feat: Add new features and UI enhancements across government modules, including password and notification settings, help center, and improved data reports

package.json

@@ -53,6 +53,8 @@
     "highlight.js": "^11.11.1",
     "ionicons": "^8.0.13",
     "jquery": "^3.7.1",
+    "jspdf": "^3.0.3",
+    "jspdf-autotable": "^5.0.2",
     "markdown-it": "^14.1.0",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-deflist": "^3.0.0",
@@ -76,6 +78,7 @@
     "swiper": "^12.0.2",
     "tslib": "^2.3.0",
     "uuid": "^13.0.0",
+    "xlsx": "^0.18.5",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {

src/app/business/ai-operations-assistant/ai-operations-assistant.scss

@@ -1,8 +1,11 @@
 .ai-assistant-container {
   min-height: 100vh;
+  height: auto; // 允许内容自动扩展
   background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);
-  padding: 20px;
+  padding: 20px 20px 80px; // 底部留出空间
   font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  overflow-y: visible; // 改为visible，让页面自然滚动
+  position: relative; // 确保定位上下文
 }
 
 // 头部样式
@@ -170,7 +173,8 @@
 .chat-module {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 280px);
+  min-height: 600px; // 改为最小高度，确保内容可见
+  height: auto; // 自动高度，允许内容扩展
 }
 
 // 快捷问题
@@ -992,7 +996,11 @@
 // ========== 响应式 ==========
 @media (max-width: 768px) {
   .ai-assistant-container {
-    padding: 12px;
+    padding: 12px 12px 80px; // 底部留出空间
+  }
+  
+  .chat-module {
+    min-height: 500px; // 移动端最小高度调整
   }
 
   .assistant-header {

src/app/business/data-reports/data-reports.html

@@ -1,383 +1,519 @@
 <div class="data-reports-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 class="page-header">
+    <div class="header-left">
+      <h1 class="page-title">
+        <span class="title-icon">📊</span>
+        数据报表中心
+      </h1>
+      <p class="page-subtitle">实时数据分析 · 智能决策支持</p>
+    </div>
+    <div class="header-actions">
+      <button class="action-btn" (click)="exportReport('excel')">
+        <span>📥</span>
+        导出Excel
+      </button>
+      <button class="action-btn primary" (click)="exportReport('pdf')">
+        <span>📄</span>
+        导出PDF
+      </button>
+    </div>
+  </div>
+
+  <!-- 预警通知栏 -->
+  <div class="alert-banner" *ngIf="criticalLocations.length > 0 || warningLocations.length > 0">
+    <div class="alert-icon">⚠️</div>
+    <div class="alert-content">
+      <div class="alert-title">垃圾量预警</div>
+      <div class="alert-desc">
+        {{ criticalLocations.length }}个地点严重，{{ warningLocations.length }}个地点预警
       </div>
     </div>
-  </header>
+    <button class="alert-btn" (click)="openMonitorView()">
+      查看详情 →
+    </button>
+  </div>
 
-  <!-- 主要内容 -->
-  <main class="content">
-    <div class="container">
-      <section id="data-reports">
-        <h2 class="section-title">数据报表</h2>
+  <!-- 报表类型选择器 -->
+  <div class="report-tabs">
+    <button 
+      class="report-tab" 
+      [class.active]="reportType === 'business'"
+      (click)="reportType = 'business'">
+      <span class="tab-icon">📈</span>
+      <span class="tab-label">经营报表</span>
+    </button>
+    <button 
+      class="report-tab" 
+      [class.active]="reportType === 'environmental'"
+      (click)="reportType = 'environmental'">
+      <span class="tab-icon">🌱</span>
+      <span class="tab-label">环保报表</span>
+    </button>
+    <button 
+      class="report-tab" 
+      [class.active]="reportType === 'government'"
+      (click)="reportType = 'government'">
+      <span class="tab-icon">📋</span>
+      <span class="tab-label">政府申报</span>
+    </button>
+  </div>
 
-        <!-- 预警通知栏 -->
-        <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="controls-wrapper">
+    <div class="time-range-selector">
+      <button 
+        class="time-btn" 
+        [class.active]="timeRange === 'today'"
+        (click)="timeRange = 'today'">
+        <span class="time-icon">📅</span>
+        <span class="time-label">今日</span>
+      </button>
+      <button 
+        class="time-btn" 
+        [class.active]="timeRange === 'week'"
+        (click)="timeRange = 'week'">
+        <span class="time-icon">📆</span>
+        <span class="time-label">本周</span>
+      </button>
+      <button 
+        class="time-btn" 
+        [class.active]="timeRange === 'month'"
+        (click)="timeRange = 'month'">
+        <span class="time-icon">📊</span>
+        <span class="time-label">本月</span>
+      </button>
+      <button 
+        class="time-btn" 
+        [class.active]="timeRange === 'year'"
+        (click)="timeRange = 'year'">
+        <span class="time-icon">📈</span>
+        <span class="time-label">本年</span>
+      </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="quick-actions">
+      <button class="quick-btn" (click)="refreshData()" title="刷新数据">
+        <span class="btn-icon">🔄</span>
+        <span class="btn-label">刷新</span>
+      </button>
+      <button class="quick-btn" (click)="toggleCompare()" title="数据对比">
+        <span class="btn-icon">📊</span>
+        <span class="btn-label">对比</span>
+      </button>
+      <button class="quick-btn" (click)="openAIAnalysis()" title="AI分析">
+        <span class="btn-icon">🤖</span>
+        <span class="btn-label">AI分析</span>
+      </button>
+    </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 class="stats-cards">
+    <div class="stat-card" *ngFor="let card of statsCards" [style.border-left-color]="card.color">
+      <div class="card-header">
+        <span class="card-icon" [style.background]="card.color + '20'">{{card.icon}}</span>
+        <span class="card-title">{{card.title}}</span>
+      </div>
+      <div class="card-body">
+        <div class="card-value">
+          <span class="value">{{card.value}}</span>
+          <span class="unit">{{card.unit}}</span>
+        </div>
+        <div class="card-trend" [class.positive]="card.trend > 0" [class.negative]="card.trend < 0">
+          <span class="trend-icon">{{card.trend > 0 ? '↑' : card.trend < 0 ? '↓' : '→'}}</span>
+          <span class="trend-value">{{Math.abs(card.trend)}}%</span>
+          <span class="trend-label">较上期</span>
         </div>
+      </div>
+    </div>
+  </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 *ngIf="reportType === 'business'" class="report-content">
+    
+    <!-- 趋势图表 -->
+    <div class="chart-card full-width">
+      <div class="card-header">
+        <h3 class="card-title">
+          <span class="title-icon">📈</span>
+          {{timeRangeTitle}}回收量趋势
+        </h3>
+        <div class="card-actions">
+          <span class="data-label">单位：千克</span>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="trend-chart">
+          <div class="chart-bars">
+            <div class="bar-item" *ngFor="let item of trendData">
+              <div class="bar-wrapper">
+                <div class="bar-fill" 
+                     [style.height.%]="getTrendHeight(item.value)"
+                     [title]="item.value + 'kg'">
+                  <span class="bar-value">{{item.value}}</span>
                 </div>
               </div>
+              <div class="bar-label">{{item.date}}</div>
             </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 class="chart-row">
+      <!-- 品类分布饼图 -->
+      <div class="chart-card">
+        <div class="card-header">
+          <h3 class="card-title">
+            <span class="title-icon">🎯</span>
+            回收品类分布
+          </h3>
+        </div>
+        <div class="card-body">
+          <div class="pie-chart">
+            <div class="pie-visual">
+              <svg viewBox="0 0 200 200" class="pie-svg">
+                <circle cx="100" cy="100" r="80" fill="none" stroke="#e0e0e0" stroke-width="40"/>
+                <!-- 这里可以添加实际的饼图SVG路径 -->
+              </svg>
+              <div class="pie-center">
+                <div class="center-value">{{totalCategoryWeight}}吨</div>
+                <div class="center-label">总计</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 class="pie-legend">
+              <div class="legend-item" *ngFor="let item of categoryData">
+                <span class="legend-color" [style.background]="item.color"></span>
+                <span class="legend-label">{{item.label}}</span>
+                <span class="legend-value">{{item.value}}kg</span>
+                <span class="legend-percent">({{getCategoryPercent(item.value)}}%)</span>
+              </div>
             </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 class="chart-card">
+        <div class="card-header">
+          <h3 class="card-title">
+            <span class="title-icon">💰</span>
+            收入构成分析
+          </h3>
+        </div>
+        <div class="card-body">
+          <div class="income-breakdown">
+            <div class="income-item">
+              <div class="income-header">
+                <span class="income-label">回收业务</span>
+                <span class="income-value">¥{{statsCards[1].value}}</span>
               </div>
-              <div class="env-info">
-                <div class="env-value">{{ item.value }}</div>
-                <div class="env-label">{{ item.label }}(kg)</div>
+              <div class="income-bar">
+                <div class="bar-fill" style="width: 63%; background: linear-gradient(90deg, #4CAF50, #2E7D32);"></div>
               </div>
+              <span class="income-percent">63%</span>
             </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 class="income-item">
+              <div class="income-header">
+                <span class="income-label">加工服务</span>
+                <span class="income-value">¥{{processingIncome}}</span>
               </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 class="income-bar">
+                <div class="bar-fill" style="width: 27%; background: linear-gradient(90deg, #2196F3, #1976D2);"></div>
               </div>
-              <div class="info-row">
-                <span class="info-label">回收总量:</span>
-                <span class="info-value">15,680 kg</span>
+              <span class="income-percent">27%</span>
+            </div>
+            <div class="income-item">
+              <div class="income-header">
+                <span class="income-label">其他收入</span>
+                <span class="income-value">¥{{otherIncome}}</span>
               </div>
-              <div class="info-row">
-                <span class="info-label">环保贡献:</span>
-                <span class="info-value">碳减排 1250kg</span>
+              <div class="income-bar">
+                <div class="bar-fill" style="width: 10%; background: linear-gradient(90deg, #FF9800, #F57C00);"></div>
               </div>
+              <span class="income-percent">10%</span>
             </div>
           </div>
         </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 *ngIf="reportType === 'environmental'" class="report-content">
+    <div class="environmental-stats">
+      <div class="env-card" *ngFor="let item of environmentalData">
+        <div class="env-icon" [style.background]="item.color + '20'">
+          <span *ngIf="item.label === '碳减排'">🌍</span>
+          <span *ngIf="item.label === '节水量'">💧</span>
+          <span *ngIf="item.label === '节电量'">⚡</span>
+        </div>
+        <div class="env-content">
+          <h3 class="env-title">{{item.label}}</h3>
+          <div class="env-value">
+            <span class="value">{{item.value}}</span>
+            <span class="unit">{{item.label === '碳减排' ? 'kg CO₂' : item.label === '节水量' ? '升' : '度'}}</span>
           </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="env-desc">
+            <span *ngIf="item.label === '碳减排'">相当于种植{{Math.round(item.value / 20)}}棵树</span>
+            <span *ngIf="item.label === '节水量'">相当于{{Math.round(item.value / 200)}}人一天用水</span>
+            <span *ngIf="item.label === '节电量'">相当于{{Math.round(item.value / 5)}}户家庭一天用电</span>
+          </div>
+        </div>
+        <div class="env-trend">
+          <span class="trend-value">+{{Math.round(item.value * 0.15)}}</span>
+          <span class="trend-label">较上期</span>
+        </div>
+      </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>
+    <!-- 环保成就 -->
+    <div class="achievement-section">
+      <h3 class="section-title">
+        <span class="title-icon">🏆</span>
+        环保成就
+      </h3>
+      <div class="achievement-grid">
+        <div class="achievement-card">
+          <div class="achievement-icon">🌟</div>
+          <h4 class="achievement-title">环保先锋</h4>
+          <p class="achievement-desc">累计减排超过10吨CO₂</p>
+          <div class="achievement-badge">已获得</div>
+        </div>
+        <div class="achievement-card">
+          <div class="achievement-icon">💚</div>
+          <h4 class="achievement-title">绿色卫士</h4>
+          <p class="achievement-desc">连续30天保持高回收率</p>
+          <div class="achievement-badge">已获得</div>
+        </div>
+        <div class="achievement-card locked">
+          <div class="achievement-icon">🎖️</div>
+          <h4 class="achievement-title">环保大使</h4>
+          <p class="achievement-desc">累计减排达到50吨CO₂</p>
+          <div class="achievement-badge">未解锁</div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-              <button 
-                *ngIf="location.status === 'critical'" 
-                class="dispatch-btn"
-                (click)="dispatchWorkers(location)">
-                <i class="fas fa-user-plus"></i> 急派人手
-              </button>
-            </div>
+  <!-- 政府申报内容 -->
+  <div *ngIf="reportType === 'government'" class="report-content">
+    <div class="gov-report-section">
+      <div class="gov-summary">
+        <h3 class="section-title">
+          <span class="title-icon">📋</span>
+          {{timeRangeTitle}}申报摘要
+        </h3>
+        <div class="summary-grid">
+          <div class="summary-item">
+            <span class="summary-label">回收总量</span>
+            <span class="summary-value">{{statsCards[0].value}}{{statsCards[0].unit}}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">处理率</span>
+            <span class="summary-value">95.8%</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">合规率</span>
+            <span class="summary-value">100%</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">环保贡献</span>
+            <span class="summary-value">{{environmentalData[0].value}}kg CO₂</span>
           </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 class="gov-actions">
+        <button class="gov-btn primary" (click)="submitToGov()">
+          <span>✅</span>
+          提交申报
+        </button>
+        <button class="gov-btn" (click)="exportReport('gov')">
+          <span>📥</span>
+          下载申报表
+        </button>
+        <button class="gov-btn">
+          <span>👁️</span>
+          预览报表
+        </button>
+      </div>
+
+      <div class="gov-notice">
+        <div class="notice-icon">ℹ️</div>
+        <div class="notice-content">
+          <h4 class="notice-title">申报须知</h4>
+          <ul class="notice-list">
+            <li>请确保数据真实准确，虚假申报将承担法律责任</li>
+            <li>每月5日前完成上月数据申报</li>
+            <li>申报后3个工作日内完成审核</li>
+            <li>如有疑问请联系环保局：12369</li>
+          </ul>
         </div>
-      </section>
+      </div>
     </div>
-  </main>
+  </div>
 
-  <!-- 监控详情弹层 -->
-  <div class="modal-overlay" [class.show]="showMonitorModal" (click)="closeMonitorView()">
-    <div class="modal-content monitor-modal" (click)="$event.stopPropagation()">
+  <!-- 地点监控弹窗 -->
+  <div class="modal-overlay" *ngIf="showMonitorModal" (click)="closeMonitorView()">
+    <div class="modal-content" (click)="$event.stopPropagation()">
       <div class="modal-header">
-        <h3 class="modal-title">实时监控 - 全部地点</h3>
-        <button class="close-btn" (click)="closeMonitorView()">&times;</button>
+        <h3 class="modal-title">地点监控详情</h3>
+        <button class="modal-close" (click)="closeMonitorView()">✕</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 class="location-list">
+          <div class="location-item" *ngFor="let loc of locations" [class]="getStatusClass(loc.status)">
+            <div class="location-header">
+              <span class="location-icon">{{getLocationIcon(loc.type)}}</span>
+              <div class="location-info">
+                <h4 class="location-name">{{loc.name}}</h4>
+                <span class="location-id">{{loc.id}}</span>
               </div>
-              <button class="action-btn critical" (click)="dispatchWorkers(location)">
-                急派
-              </button>
+              <span class="location-status" [class]="getStatusClass(loc.status)">
+                {{getStatusText(loc.status)}}
+              </span>
             </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 class="location-data">
+              <div class="data-item">
+                <span class="data-label">垃圾量</span>
+                <span class="data-value">{{loc.wasteVolume}}kg</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">回收量</span>
+                <span class="data-value">{{loc.recycleVolume}}kg</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">容量</span>
+                <span class="data-value">{{getCapacityPercent(loc)}}%</span>
+              </div>
+            </div>
+            <div class="location-progress">
+              <div class="progress-bar">
+                <div class="progress-fill" 
+                     [style.width.%]="getCapacityPercent(loc)"
+                     [class]="getStatusClass(loc.status)"></div>
               </div>
-              <button class="action-btn warning" (click)="dispatchWorkers(location)">
-                派遣
+            </div>
+            <div class="location-footer">
+              <span class="update-time">{{loc.lastUpdate}}</span>
+              <button class="dispatch-btn" (click)="dispatchWorkers(loc)">
+                派遣人员
               </button>
             </div>
           </div>
         </div>
+      </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 class="modal-overlay" *ngIf="showCompareModal" (click)="closeCompareModal()">
+    <div class="modal-content compare-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">📊 数据对比</h3>
+        <button class="modal-close" (click)="closeCompareModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <!-- 对比说明 -->
+        <div class="compare-desc">
+          <p>对比当前选择的<strong>{{timeRangeTitle}}</strong>数据与其他时间段的数据差异</p>
+        </div>
+
+        <!-- 对比时间选择 -->
+        <div class="compare-time-selector">
+          <label>选择对比时间段：</label>
+          <div class="time-buttons">
+            <button 
+              class="time-btn-small" 
+              [class.active]="compareTimeRange === 'today'"
+              (click)="compareTimeRange = 'today'">今日</button>
+            <button 
+              class="time-btn-small" 
+              [class.active]="compareTimeRange === 'week'"
+              (click)="compareTimeRange = 'week'">本周</button>
+            <button 
+              class="time-btn-small" 
+              [class.active]="compareTimeRange === 'month'"
+              (click)="compareTimeRange = 'month'">本月</button>
+            <button 
+              class="time-btn-small" 
+              [class.active]="compareTimeRange === 'year'"
+              (click)="compareTimeRange = 'year'">本年</button>
           </div>
         </div>
+
+        <!-- 数据对比表格 -->
+        <div class="compare-table">
+          <table>
+            <thead>
+              <tr>
+                <th>指标</th>
+                <th>当前({{timeRangeTitle}})</th>
+                <th>对比({{compareTimeRange === 'today' ? '今日' : compareTimeRange === 'week' ? '本周' : compareTimeRange === 'month' ? '本月' : '本年'}})</th>
+                <th>差异</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let card of statsCards; let i = index">
+                <td>{{card.title}}</td>
+                <td>{{card.value}} {{card.unit}}</td>
+                <td>{{getCompareStatsCards(compareTimeRange)[i].value}} {{getCompareStatsCards(compareTimeRange)[i].unit}}</td>
+                <td [class.positive]="isGreater(card.value, getCompareStatsCards(compareTimeRange)[i].value)"
+                    [class.negative]="isLess(card.value, getCompareStatsCards(compareTimeRange)[i].value)">
+                  {{getDifferenceArrow(card.value, getCompareStatsCards(compareTimeRange)[i].value)}}
+                  {{getDifference(card.value, getCompareStatsCards(compareTimeRange)[i].value)}}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 对比结论 -->
+        <div class="compare-conclusion">
+          <h4>📈 数据分析</h4>
+          <ul>
+            <li *ngFor="let card of statsCards; let i = index">
+              <strong>{{card.title.replace('本月', '').replace('今日', '').replace('本周', '').replace('本年', '')}}</strong>：
+              <span *ngIf="isGreater(card.value, getCompareStatsCards(compareTimeRange)[i].value)" class="positive">
+                较对比时段增长 {{getGrowthRate(card.value, getCompareStatsCards(compareTimeRange)[i].value)}}%
+              </span>
+              <span *ngIf="isLess(card.value, getCompareStatsCards(compareTimeRange)[i].value)" class="negative">
+                较对比时段下降 {{getDeclineRate(card.value, getCompareStatsCards(compareTimeRange)[i].value)}}%
+              </span>
+              <span *ngIf="isEqual(card.value, getCompareStatsCards(compareTimeRange)[i].value)">
+                与对比时段持平
+              </span>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
 
-  <!-- 底部导航 -->
+  <!-- 底部导航栏 -->
   <nav class="bottom-nav">
-    <div class="nav-item" routerLink="/business/dashboard">
+    <div class="nav-item" [class.active]="currentNav === 'dashboard'" (click)="navigateTo('/business/dashboard')">
       <div class="nav-icon">🏠</div>
       <div>工作台</div>
     </div>
-    <div class="nav-item" routerLink="/business/order-management">
-      <div class="nav-icon">📦</div>
+    <div class="nav-item" [class.active]="currentNav === 'orders'" (click)="navigateTo('/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-item" [class.active]="currentNav === 'reports'" (click)="navigateTo('/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 class="nav-item" [class.active]="currentNav === 'devices'" (click)="navigateTo('/business/device-management')">
+      <div class="nav-icon">⚙️</div>
+      <div>设备</div>
+    </div>
+    <div class="nav-item" [class.active]="currentNav === 'center'" (click)="navigateTo('/business/enterprise-center')">
+      <div class="nav-icon">🏢</div>
       <div>我的</div>
-  </div>
+    </div>
   </nav>
-</div>
+</div>

src/app/business/data-reports/data-reports.scss

@@ -1,987 +1,1381 @@
-: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;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);
+  padding: 20px 20px 80px; // 下方80px给底部导航
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
-.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 {
+// 页面头部
+.page-header {
   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);
+  margin-bottom: 24px;
+  padding: 24px;
+  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(76, 175, 80, 0.3);
   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;
-}
+  .header-left {
+    .page-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin: 0 0 8px 0;
+      font-size: 28px;
+      font-weight: 600;
+
+      .title-icon {
+        font-size: 32px;
+      }
+    }
 
-.alert-title {
-  font-weight: 600;
-  font-size: 16px;
-  margin-bottom: 2px;
-}
+    .page-subtitle {
+      margin: 0;
+      opacity: 0.9;
+      font-size: 14px;
+    }
+  }
 
-.alert-desc {
-  font-size: 13px;
-  opacity: 0.9;
+  .header-actions {
+    display: flex;
+    gap: 12px;
+
+    .action-btn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 20px;
+      background: rgba(255, 255, 255, 0.2);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 8px;
+      color: white;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      span {
+        font-size: 18px;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-2px);
+      }
+
+      &.primary {
+        background: white;
+        color: #4CAF50;
+        border-color: white;
+
+        &:hover {
+          background: #f1f8f4;
+        }
+      }
+    }
+  }
 }
 
-.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;
+// 预警横幅
+.alert-banner {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 16px;
+  padding: 16px 24px;
+  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
+  border: 2px solid #FF9800;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
+  .alert-icon {
+    font-size: 32px;
   }
-}
 
-/* 报表类型选择器 */
-.report-tabs {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
+  .alert-content {
+    flex: 1;
 
-.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;
-  }
+    .alert-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #E65100;
+      margin-bottom: 4px;
+    }
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    .alert-desc {
+      font-size: 14px;
+      color: #F57C00;
+    }
   }
 
-  &.active {
-    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  .alert-btn {
+    padding: 10px 20px;
+    background: #FF9800;
     color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #F57C00;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+    }
   }
 }
 
-/* 时间范围选择器 */
-.time-range-selector {
+// 报表类型标签
+.report-tabs {
   display: flex;
-  gap: 8px;
+  gap: 12px;
   margin-bottom: 20px;
-  background-color: white;
-  padding: 6px;
-  border-radius: var(--border-radius);
-  box-shadow: var(--card-shadow);
-}
+  background: white;
+  padding: 8px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .report-tab {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.3s;
 
-.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;
+    .tab-icon {
+      font-size: 20px;
+    }
 
-  &:hover {
-    background-color: var(--light-bg);
-  }
+    &:hover {
+      background: #f5f5f5;
+    }
 
-  &.active {
-    background-color: var(--primary-color);
-    color: white;
+    &.active {
+      background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+      color: white;
+      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+    }
   }
 }
 
-/* 图表区域 */
-.chart-section {
+// 控制栏包装器
+.controls-wrapper {
   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;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
 }
 
-.chart-legend {
+// 时间范围选择器
+.time-range-selector {
   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;
-}
+  min-width: 300px;
+
+  .time-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 14px 20px;
+    background: white;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
-.bar-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
+    .time-icon {
+      font-size: 20px;
+    }
 
-.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 {
+      border-color: #4CAF50;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
 
-  &:hover {
-    opacity: 0.8;
+    &.active {
+      background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+      color: white;
+      border-color: #4CAF50;
+      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+    }
   }
 }
 
-.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;
+// 快捷操作按钮
+.quick-actions {
   display: flex;
-  align-items: center;
-  gap: 16px;
-  box-shadow: var(--card-shadow);
-}
+  gap: 10px;
 
-.env-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 28px;
-}
+  .quick-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 16px;
+    background: white;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+    .btn-icon {
+      font-size: 18px;
+      transition: transform 0.3s ease;
+
+      &.rotating {
+        animation: rotate 1s linear;
+      }
+    }
 
-.env-info {
-  flex: 1;
-}
+    .btn-label {
+      font-size: 13px;
+    }
 
-.env-value {
-  font-size: 32px;
-  font-weight: bold;
-  color: var(--dark-text);
-}
+    &:hover {
+      border-color: #4CAF50;
+      color: #4CAF50;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
+
+      .btn-icon {
+        transform: scale(1.1);
+      }
+    }
 
-.env-label {
-  font-size: 14px;
-  color: var(--light-text);
-  margin-top: 4px;
+    &:active {
+      transform: translateY(0);
+    }
+  }
 }
 
-/* 图表占位符 */
-.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;
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
   }
-
-  p {
-    font-size: 14px;
+  to {
+    transform: rotate(360deg);
   }
 }
 
-/* 政府报告卡片 */
-.gov-report-card {
-  background-color: white;
-  border-radius: var(--border-radius);
-  padding: 20px;
-  box-shadow: var(--card-shadow);
-}
+// 统计卡片
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
 
-.report-info {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
+  .stat-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    border-left: 4px solid;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s;
 
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    }
 
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-}
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .card-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      }
+
+      .card-title {
+        font-size: 14px;
+        color: #666;
+        font-weight: 500;
+      }
+    }
 
-.info-label {
-  font-size: 14px;
-  color: var(--light-text);
+    .card-body {
+      .card-value {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        margin-bottom: 12px;
+
+        .value {
+          font-size: 32px;
+          font-weight: 700;
+          color: #333;
+        }
+
+        .unit {
+          font-size: 16px;
+          color: #999;
+        }
+      }
+
+      .card-trend {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px;
+
+        &.positive {
+          color: #4CAF50;
+        }
+
+        &.negative {
+          color: #f44336;
+        }
+
+        .trend-icon {
+          font-size: 16px;
+          font-weight: bold;
+        }
+
+        .trend-value {
+          font-weight: 600;
+        }
+
+        .trend-label {
+          color: #999;
+        }
+      }
+    }
+  }
 }
 
-.info-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--dark-text);
-}
+// 报表内容区
+.report-content {
+  .chart-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+  }
 
-/* 地点监控区域 */
-.monitor-section {
-  margin-top: 24px;
+  .full-width {
+    grid-column: 1 / -1;
+  }
 }
 
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+// 图表卡片
+.chart-card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+
+      .title-icon {
+        font-size: 24px;
+      }
+    }
 
-  h3 {
-    font-size: 16px;
-    font-weight: 600;
+    .card-actions {
+      .data-label {
+        font-size: 13px;
+        color: #999;
+      }
+    }
   }
 }
 
-.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);
+// 趋势图表
+.trend-chart {
+  .chart-bars {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+    height: 300px;
+    gap: 8px;
+    padding: 20px 0;
+
+    .bar-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+
+      .bar-wrapper {
+        width: 100%;
+        height: 260px;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+      }
+
+      .bar-fill {
+        width: 80%;
+        background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+        border-radius: 8px 8px 0 0;
+        position: relative;
+        transition: all 0.3s;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.8;
+          transform: scaleY(1.02);
+        }
+
+        .bar-value {
+          position: absolute;
+          top: -24px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 12px;
+          font-weight: 600;
+          color: #333;
+          white-space: nowrap;
+        }
+      }
+
+      .bar-label {
+        font-size: 12px;
+        color: #666;
+        text-align: center;
+      }
+    }
   }
 }
 
-.location-cards {
+// 饼图
+.pie-chart {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
+  gap: 32px;
+  align-items: center;
 
-.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;
+  .pie-visual {
+    position: relative;
+    width: 200px;
+    height: 200px;
 
-  &.warning {
-    border-left-color: #f39c12;
-    background: linear-gradient(to right, #fff8e6 0%, white 20%);
-  }
+    .pie-svg {
+      width: 100%;
+      height: 100%;
+    }
 
-  &.critical {
-    border-left-color: var(--warning-color);
-    background: linear-gradient(to right, #ffe6e6 0%, white 20%);
-    animation: criticalPulse 2s infinite;
+    .pie-center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+
+      .center-value {
+        font-size: 24px;
+        font-weight: 700;
+        color: #333;
+      }
+
+      .center-label {
+        font-size: 12px;
+        color: #999;
+      }
+    }
   }
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  .pie-legend {
+    flex: 1;
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border-radius: 8px;
+      transition: background 0.3s;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+
+      .legend-color {
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+      }
+
+      .legend-label {
+        flex: 1;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .legend-value {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .legend-percent {
+        font-size: 13px;
+        color: #999;
+      }
+    }
   }
 }
 
-@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 {
+// 收入分析
+.income-breakdown {
   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));
-  }
+  flex-direction: column;
+  gap: 20px;
+
+  .income-item {
+    .income-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .income-label {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .income-value {
+        font-size: 16px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
 
-  &.status-warning {
-    background: linear-gradient(to right, #f39c12, #e67e22);
-  }
+    .income-bar {
+      height: 32px;
+      background: #f5f5f5;
+      border-radius: 16px;
+      overflow: hidden;
+      margin-bottom: 4px;
+
+      .bar-fill {
+        height: 100%;
+        border-radius: 16px;
+        transition: width 0.6s ease;
+      }
+    }
 
-  &.status-critical {
-    background: linear-gradient(to right, var(--warning-color), #c0392b);
+    .income-percent {
+      font-size: 13px;
+      color: #999;
+    }
   }
 }
 
-.progress-text {
-  font-size: 13px;
-  color: var(--light-text);
-  text-align: right;
-}
-
-.location-stats {
+// 环保统计
+.environmental-stats {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  margin-bottom: 12px;
-}
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+
+  .env-card {
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    transition: all 0.3s;
 
-.stat-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-}
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    }
 
-.stat-label {
-  font-size: 13px;
-  color: var(--light-text);
-}
+    .env-icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+    }
 
-.stat-value {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dark-text);
-}
+    .env-content {
+      flex: 1;
+
+      .env-title {
+        margin: 0 0 8px 0;
+        font-size: 16px;
+        color: #666;
+      }
+
+      .env-value {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        margin-bottom: 8px;
+
+        .value {
+          font-size: 28px;
+          font-weight: 700;
+          color: #333;
+        }
+
+        .unit {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+
+      .env-desc {
+        font-size: 13px;
+        color: #999;
+      }
+    }
 
-/* 派遣按钮 */
-.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;
+    .env-trend {
+      text-align: right;
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
-  }
+      .trend-value {
+        display: block;
+        font-size: 20px;
+        font-weight: 600;
+        color: #4CAF50;
+      }
 
-  i {
-    font-size: 16px;
+      .trend-label {
+        font-size: 12px;
+        color: #999;
+      }
+    }
   }
 }
 
-@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); }
-}
+// 成就区域
+.achievement-section {
+  margin-top: 32px;
 
-/* 导出区域 */
-.export-section {
-  margin-top: 24px;
-}
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
 
-.section-subtitle {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
+    .title-icon {
+      font-size: 24px;
+    }
+  }
 
-.export-buttons {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+  .achievement-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+
+    .achievement-card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      text-align: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+      }
+
+      &.locked {
+        opacity: 0.6;
+
+        .achievement-icon {
+          filter: grayscale(100%);
+        }
+      }
+
+      .achievement-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .achievement-title {
+        margin: 0 0 8px 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .achievement-desc {
+        margin: 0 0 16px 0;
+        font-size: 14px;
+        color: #666;
+      }
+
+      .achievement-badge {
+        display: inline-block;
+        padding: 6px 16px;
+        background: #4CAF50;
+        color: white;
+        border-radius: 16px;
+        font-size: 13px;
+        font-weight: 600;
+      }
+
+      &.locked .achievement-badge {
+        background: #9E9E9E;
+      }
+    }
+  }
 }
 
-.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;
+// 政府申报
+.gov-report-section {
+  .gov-summary {
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 20px;
+      font-size: 20px;
+      font-weight: 600;
+      color: #333;
+
+      .title-icon {
+        font-size: 24px;
+      }
+    }
 
-  i {
-    font-size: 16px;
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+
+      .summary-item {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 16px;
+        background: #f8f9fa;
+        border-radius: 8px;
+
+        .summary-label {
+          font-size: 14px;
+          color: #666;
+        }
+
+        .summary-value {
+          font-size: 24px;
+          font-weight: 700;
+          color: #333;
+        }
+      }
+    }
   }
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  .gov-actions {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+
+    .gov-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 14px 24px;
+      background: white;
+      border: 2px solid #e0e0e0;
+      border-radius: 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: #666;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      span {
+        font-size: 20px;
+      }
+
+      &:hover {
+        border-color: #4CAF50;
+        color: #4CAF50;
+        transform: translateY(-2px);
+      }
+
+      &.primary {
+        background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+        color: white;
+        border-color: #4CAF50;
+
+        &:hover {
+          box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+        }
+      }
+    }
   }
-}
 
-.export-btn {
-  background-color: white;
-  color: var(--dark-text);
-  border: 1px solid #e0e0e0;
-
-  &:hover {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-  }
-}
+  .gov-notice {
+    background: #E3F2FD;
+    border: 2px solid #2196F3;
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    gap: 16px;
 
-.submit-btn {
-  background: linear-gradient(135deg, var(--secondary-color), #2980b9);
-  color: white;
+    .notice-icon {
+      font-size: 32px;
+    }
 
-  &:hover {
-    background: linear-gradient(135deg, #2980b9, #21618c);
+    .notice-content {
+      flex: 1;
+
+      .notice-title {
+        margin: 0 0 12px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #1976D2;
+      }
+
+      .notice-list {
+        margin: 0;
+        padding-left: 20px;
+
+        li {
+          color: #1976D2;
+          font-size: 14px;
+          line-height: 1.8;
+        }
+      }
+    }
   }
 }
 
-/* 监控弹层 */
+// 弹窗
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: 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 {
+    background: white;
+    border-radius: 16px;
+    max-width: 800px;
+    width: 100%;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 24px;
+      border-bottom: 1px solid #e0e0e0;
+
+      .modal-title {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .modal-close {
+        width: 32px;
+        height: 32px;
+        background: #f5f5f5;
+        border: none;
+        border-radius: 50%;
+        font-size: 20px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #e0e0e0;
+        }
+      }
+    }
 
-    .modal-content {
-      transform: scale(1);
+    .modal-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+
+      .location-list {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .location-item {
+          background: white;
+          border: 2px solid #e0e0e0;
+          border-radius: 12px;
+          padding: 16px;
+          transition: all 0.3s;
+
+          &.status-critical {
+            border-color: #f44336;
+            background: #FFEBEE;
+          }
+
+          &.status-warning {
+            border-color: #FF9800;
+            background: #FFF3E0;
+          }
+
+          .location-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+
+            .location-icon {
+              font-size: 24px;
+            }
+
+            .location-info {
+              flex: 1;
+
+              .location-name {
+                margin: 0 0 4px 0;
+                font-size: 16px;
+                font-weight: 600;
+                color: #333;
+              }
+
+              .location-id {
+                font-size: 12px;
+                color: #999;
+              }
+            }
+
+            .location-status {
+              padding: 4px 12px;
+              border-radius: 12px;
+              font-size: 13px;
+              font-weight: 600;
+
+              &.status-normal {
+                background: #4CAF50;
+                color: white;
+              }
+
+              &.status-warning {
+                background: #FF9800;
+                color: white;
+              }
+
+              &.status-critical {
+                background: #f44336;
+                color: white;
+              }
+            }
+          }
+
+          .location-data {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 12px;
+
+            .data-item {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              gap: 4px;
+
+              .data-label {
+                font-size: 12px;
+                color: #999;
+              }
+
+              .data-value {
+                font-size: 16px;
+                font-weight: 600;
+                color: #333;
+              }
+            }
+          }
+
+          .location-progress {
+            margin-bottom: 12px;
+
+            .progress-bar {
+              height: 8px;
+              background: #e0e0e0;
+              border-radius: 4px;
+              overflow: hidden;
+
+              .progress-fill {
+                height: 100%;
+                border-radius: 4px;
+                transition: width 0.3s;
+
+                &.status-normal {
+                  background: #4CAF50;
+                }
+
+                &.status-warning {
+                  background: #FF9800;
+                }
+
+                &.status-critical {
+                  background: #f44336;
+                }
+              }
+            }
+          }
+
+          .location-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .update-time {
+              font-size: 12px;
+              color: #999;
+            }
+
+            .dispatch-btn {
+              padding: 8px 16px;
+              background: #4CAF50;
+              color: white;
+              border: none;
+              border-radius: 6px;
+              font-size: 13px;
+              font-weight: 600;
+              cursor: pointer;
+              transition: all 0.3s;
+
+              &:hover {
+                background: #2E7D32;
+                transform: translateY(-2px);
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
 
-.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);
+// 数据对比弹窗
+.compare-modal {
+  max-width: 900px !important;
+  max-height: 85vh;
+
+  .compare-desc {
+    background: #e3f2fd;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    border-left: 4px solid #2196F3;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      color: #1976D2;
+      
+      strong {
+        color: #0d47a1;
+      }
+    }
   }
-}
-
-.modal-body {
-  padding: 20px;
-}
 
-/* 预警区域 */
-.alert-section {
-  margin-bottom: 24px;
+  .compare-time-selector {
+    margin-bottom: 25px;
 
-  &.critical {
-    .alert-section-title {
-      color: var(--warning-color);
+    label {
+      display: block;
+      font-size: 15px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 10px;
     }
-  }
 
-  &.warning {
-    .alert-section-title {
-      color: #f39c12;
+    .time-buttons {
+      display: flex;
+      gap: 10px;
+
+      .time-btn-small {
+        flex: 1;
+        padding: 10px 15px;
+        background: white;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #666;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          border-color: #4CAF50;
+          color: #4CAF50;
+        }
+
+        &.active {
+          background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+          color: white;
+          border-color: #4CAF50;
+        }
+      }
     }
   }
-}
 
-.alert-section-title {
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  .compare-table {
+    margin-bottom: 25px;
+    overflow-x: auto;
 
-  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;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      overflow: hidden;
+
+      thead {
+        background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+        
+        tr th {
+          padding: 15px;
+          text-align: left;
+          font-weight: 600;
+          color: white;
+          font-size: 14px;
+        }
+      }
+
+      tbody {
+        tr {
+          border-bottom: 1px solid #f0f0f0;
+          transition: background 0.3s;
+
+          &:hover {
+            background: #f9f9f9;
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          td {
+            padding: 15px;
+            font-size: 14px;
+            color: #333;
+
+            &.positive {
+              color: #4CAF50;
+              font-weight: 600;
+            }
+
+            &.negative {
+              color: #f44336;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+    }
   }
-}
-
-.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;
+  .compare-conclusion {
+    background: #f5f7fa;
+    padding: 20px;
+    border-radius: 8px;
 
-    &:hover {
-      background-color: #c0392b;
+    h4 {
+      margin: 0 0 15px 0;
+      font-size: 16px;
+      color: #333;
     }
-  }
-
-  &.warning {
-    background-color: #f39c12;
-    color: white;
 
-    &:hover {
-      background-color: #e67e22;
+    ul {
+      margin: 0;
+      padding-left: 20px;
+
+      li {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #555;
+        line-height: 1.6;
+
+        strong {
+          color: #333;
+        }
+
+        .positive {
+          color: #4CAF50;
+          font-weight: 600;
+        }
+
+        .negative {
+          color: #f44336;
+          font-weight: 600;
+        }
+      }
     }
   }
 }
 
-/* 底部导航 */
+// 底部导航栏
 .bottom-nav {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: white;
+  height: 70px;
+  background: 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);
-  }
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 99;
 
-  &.active {
-    color: var(--primary-color);
-  }
-}
+  .nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #999;
+    font-size: 13px;
+    position: relative;
+
+    .nav-icon {
+      font-size: 24px;
+      transition: transform 0.3s ease;
+    }
 
-.nav-icon {
-  font-size: 20px;
-  margin-bottom: 4px;
-}
+    &:hover {
+      color: #4CAF50;
+      background: #f8f9fa;
 
-/* 响应式调整 */
-@media (min-width: 768px) {
-  .container {
-    max-width: 750px;
-  }
+      .nav-icon {
+        transform: scale(1.1);
+      }
+    }
 
-  .location-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    &.active {
+      color: #4CAF50;
+      font-weight: 600;
+
+      .nav-icon {
+        transform: scale(1.15);
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 3px;
+        background: linear-gradient(90deg, #4CAF50, #2E7D32);
+        border-radius: 0 0 3px 3px;
+      }
+    }
   }
 }
 
-@media (max-width: 576px) {
-  .report-tabs {
-    grid-template-columns: 1fr;
+// 响应式
+@media (max-width: 768px) {
+  .data-reports-container {
+    padding: 12px 12px 80px;
   }
 
-  .export-buttons {
+  .page-header {
     flex-direction: column;
+    gap: 16px;
 
-    .export-btn,
-    .submit-btn {
+    .header-actions {
       width: 100%;
+
+      .action-btn {
+        flex: 1;
+      }
+    }
+  }
+
+  .time-range-selector {
+    grid-template-columns: repeat(2, 1fr);
+
+    .time-label {
+      display: none;
     }
   }
-}
 
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
 
+  .chart-row {
+    grid-template-columns: 1fr !important;
+  }
 
+  .pie-chart {
+    flex-direction: column;
+  }
+}

src/app/business/data-reports/data-reports.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import * as XLSX from 'xlsx';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
 
 interface LocationData {
   id: string;
@@ -20,6 +23,20 @@ interface ChartData {
   color?: string;
 }
 
+interface StatCard {
+  title: string;
+  value: string;
+  unit: string;
+  trend: number;
+  icon: string;
+  color: string;
+}
+
+interface TrendData {
+  date: string;
+  value: number;
+}
+
 @Component({
   selector: 'app-data-reports',
   standalone: true,
@@ -27,10 +44,13 @@ interface ChartData {
   templateUrl: './data-reports.html',
   styleUrl: './data-reports.scss'
 })
-export class DataReports {
+export class DataReports implements OnInit {
   reportType: 'business' | 'environmental' | 'government' = 'business';
   timeRange: 'today' | 'week' | 'month' | 'year' = 'month';
   showMonitorModal = false;
+  currentNav = 'reports'; // 当前导航项
+  showCompareModal = false; // 数据对比弹窗
+  compareTimeRange: 'today' | 'week' | 'month' | 'year' = 'week'; // 对比时间范围
 
   // 地点监控数据
   locations: LocationData[] = [
@@ -96,23 +116,159 @@ export class DataReports {
     }
   ];
 
-  // 报表数据
-  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' }
-    ];
+  ngOnInit() {
+    // 初始化数据
   }
 
+  // 根据时间范围获取统计卡片数据
+  get statsCards(): StatCard[] {
+    const dataMap = {
+      today: [
+        { title: '今日回收量', value: '2.8', unit: '吨', trend: 12, icon: '📦', color: '#4CAF50' },
+        { title: '今日收入', value: '15,680', unit: '元', trend: 8, icon: '💰', color: '#2196F3' },
+        { title: '今日订单', value: '156', unit: '单', trend: -3, icon: '📋', color: '#FF9800' },
+        { title: '今日用户', value: '89', unit: '人', trend: 15, icon: '👥', color: '#9C27B0' }
+      ],
+      week: [
+        { title: '本周回收量', value: '18.5', unit: '吨', trend: 18, icon: '📦', color: '#4CAF50' },
+        { title: '本周收入', value: '98,450', unit: '元', trend: 22, icon: '💰', color: '#2196F3' },
+        { title: '本周订单', value: '1,024', unit: '单', trend: 12, icon: '📋', color: '#FF9800' },
+        { title: '本周用户', value: '567', unit: '人', trend: 28, icon: '👥', color: '#9C27B0' }
+      ],
+      month: [
+        { title: '本月回收量', value: '75.2', unit: '吨', trend: 25, icon: '📦', color: '#4CAF50' },
+        { title: '本月收入', value: '425,800', unit: '元', trend: 32, icon: '💰', color: '#2196F3' },
+        { title: '本月订单', value: '4,386', unit: '单', trend: 18, icon: '📋', color: '#FF9800' },
+        { title: '本月用户', value: '2,145', unit: '人', trend: 42, icon: '👥', color: '#9C27B0' }
+      ],
+      year: [
+        { title: '本年回收量', value: '856', unit: '吨', trend: 38, icon: '📦', color: '#4CAF50' },
+        { title: '本年收入', value: '4.85', unit: '百万', trend: 45, icon: '💰', color: '#2196F3' },
+        { title: '本年订单', value: '48,562', unit: '单', trend: 35, icon: '📋', color: '#FF9800' },
+        { title: '本年用户', value: '18,945', unit: '人', trend: 52, icon: '👥', color: '#9C27B0' }
+      ]
+    };
+    return dataMap[this.timeRange];
+  }
+
+  // 根据时间范围获取趋势数据
+  get trendData(): TrendData[] {
+    const dataMap = {
+      today: [
+        { date: '00:00', value: 120 },
+        { date: '04:00', value: 80 },
+        { date: '08:00', value: 280 },
+        { date: '12:00', value: 450 },
+        { date: '16:00', value: 380 },
+        { date: '20:00', value: 320 },
+        { date: '23:59', value: 280 }
+      ],
+      week: [
+        { date: '周一', value: 2100 },
+        { date: '周二', value: 2450 },
+        { date: '周三', value: 2800 },
+        { date: '周四', value: 2650 },
+        { date: '周五', value: 3100 },
+        { date: '周六', value: 2900 },
+        { date: '周日', value: 2500 }
+      ],
+      month: [
+        { date: '1-5日', value: 12500 },
+        { date: '6-10日', value: 14200 },
+        { date: '11-15日', value: 15800 },
+        { date: '16-20日', value: 16500 },
+        { date: '21-25日', value: 17200 },
+        { date: '26-30日', value: 18600 }
+      ],
+      year: [
+        { date: '1月', value: 65000 },
+        { date: '2月', value: 58000 },
+        { date: '3月', value: 72000 },
+        { date: '4月', value: 68000 },
+        { date: '5月', value: 75000 },
+        { date: '6月', value: 82000 },
+        { date: '7月', value: 88000 },
+        { date: '8月', value: 85000 },
+        { date: '9月', value: 78000 },
+        { date: '10月', value: 92000 },
+        { date: '11月', value: 0 },
+        { date: '12月', value: 0 }
+      ]
+    };
+    return dataMap[this.timeRange];
+  }
+
+  // 获取品类分布数据（根据时间范围）
+  get categoryData(): ChartData[] {
+    const dataMap = {
+      today: [
+        { label: '纸类', value: 980, color: '#3498db' },
+        { label: '塑料', value: 750, color: '#2ecc71' },
+        { label: '金属', value: 520, color: '#f39c12' },
+        { label: '玻璃', value: 380, color: '#9b59b6' },
+        { label: '其他', value: 170, color: '#95a5a6' }
+      ],
+      week: [
+        { label: '纸类', value: 6500, color: '#3498db' },
+        { label: '塑料', value: 5200, color: '#2ecc71' },
+        { label: '金属', value: 3600, color: '#f39c12' },
+        { label: '玻璃', value: 2100, color: '#9b59b6' },
+        { label: '其他', value: 1100, color: '#95a5a6' }
+      ],
+      month: [
+        { label: '纸类', value: 26300, color: '#3498db' },
+        { label: '塑料', value: 21000, color: '#2ecc71' },
+        { label: '金属', value: 13500, color: '#f39c12' },
+        { label: '玻璃', value: 9000, color: '#9b59b6' },
+        { label: '其他', value: 5400, color: '#95a5a6' }
+      ],
+      year: [
+        { label: '纸类', value: 299600, color: '#3498db' },
+        { label: '塑料', value: 239700, color: '#2ecc71' },
+        { label: '金属', value: 154100, color: '#f39c12' },
+        { label: '玻璃', value: 102700, color: '#9b59b6' },
+        { label: '其他', value: 59900, color: '#95a5a6' }
+      ]
+    };
+    return dataMap[this.timeRange];
+  }
+
+  // 获取环保数据
   get environmentalData(): ChartData[] {
-    return [
-      { label: '碳减排', value: 1250, color: '#2ecc71' },
-      { label: '节水量', value: 3200, color: '#3498db' },
-      { label: '节电量', value: 5800, color: '#f39c12' }
-    ];
+    const dataMap = {
+      today: [
+        { label: '碳减排', value: 42, color: '#2ecc71' },
+        { label: '节水量', value: 156, color: '#3498db' },
+        { label: '节电量', value: 238, color: '#f39c12' }
+      ],
+      week: [
+        { label: '碳减排', value: 285, color: '#2ecc71' },
+        { label: '节水量', value: 1050, color: '#3498db' },
+        { label: '节电量', value: 1620, color: '#f39c12' }
+      ],
+      month: [
+        { label: '碳减排', value: 1250, color: '#2ecc71' },
+        { label: '节水量', value: 4600, color: '#3498db' },
+        { label: '节电量', value: 7100, color: '#f39c12' }
+      ],
+      year: [
+        { label: '碳减排', value: 14250, color: '#2ecc71' },
+        { label: '节水量', value: 52400, color: '#3498db' },
+        { label: '节电量', value: 80900, color: '#f39c12' }
+      ]
+    };
+    return dataMap[this.timeRange];
+  }
+
+  // 获取时间范围标题
+  get timeRangeTitle(): string {
+    const titleMap = {
+      today: '今日',
+      week: '本周',
+      month: '本月',
+      year: '本年'
+    };
+    return titleMap[this.timeRange];
   }
 
   get criticalLocations(): LocationData[] {
@@ -150,6 +306,22 @@ export class DataReports {
     return Math.round((location.wasteVolume / location.capacity) * 100);
   }
 
+  // 计算品类占比
+  getCategoryPercent(value: number): number {
+    const total = this.categoryData.reduce((sum, item) => sum + item.value, 0);
+    return Math.round((value / total) * 100);
+  }
+
+  // 获取趋势最大值（用于图表缩放）
+  get maxTrendValue(): number {
+    return Math.max(...this.trendData.map(d => d.value));
+  }
+
+  // 计算趋势图高度百分比
+  getTrendHeight(value: number): number {
+    return (value / this.maxTrendValue) * 100;
+  }
+
   openMonitorView(): void {
     this.showMonitorModal = true;
   }
@@ -163,14 +335,272 @@ export class DataReports {
   }
 
   exportReport(format: string): void {
-    alert(`正在导出${format.toUpperCase()}格式报表...`);
+    if (format === 'excel') {
+      this.exportToExcel();
+    } else if (format === 'pdf') {
+      this.exportToPDF();
+    } else if (format === 'gov') {
+      this.exportGovReport();
+    }
+  }
+
+  // 导出Excel
+  private exportToExcel(): void {
+    const ws_data = [
+      ['数据报表 - ' + this.timeRangeTitle],
+      [],
+      ['统计指标', '数值', '单位', '趋势'],
+      ...this.statsCards.map(card => [card.title, card.value, card.unit, `${card.trend > 0 ? '+' : ''}${card.trend}%`]),
+      [],
+      ['品类分布', '重量', '占比'],
+      ...this.categoryData.map(item => [item.label, `${item.value}kg`, `${this.getCategoryPercent(item.value)}%`]),
+      [],
+      ['环保数据', '数值', '单位'],
+      ...this.environmentalData.map(item => {
+        const unit = item.label === '碳减排' ? 'kg CO₂' : item.label === '节水量' ? '升' : '度';
+        return [item.label, item.value, unit];
+      })
+    ];
+
+    const ws = XLSX.utils.aoa_to_sheet(ws_data);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, '数据报表');
+    
+    const fileName = `数据报表_${this.timeRangeTitle}_${new Date().getTime()}.xlsx`;
+    XLSX.writeFile(wb, fileName);
+    
+    alert('Excel报表导出成功！');
+  }
+
+  // 导出PDF
+  private exportToPDF(): void {
+    const doc = new jsPDF();
+    
+    // 添加标题（使用英文字体，避免中文乱码）
+    doc.setFontSize(16);
+    doc.text('Data Report - ' + this.timeRangeTitle, 14, 20);
+    
+    // 统计卡片数据
+    const statsData = this.statsCards.map(card => [
+      card.title,
+      card.value + ' ' + card.unit,
+      (card.trend > 0 ? '+' : '') + card.trend + '%'
+    ]);
+    
+    autoTable(doc, {
+      head: [['Statistic', 'Value', 'Trend']],
+      body: statsData,
+      startY: 30,
+      theme: 'grid'
+    });
+    
+    // 品类分布数据
+    const categoryDataTable = this.categoryData.map(item => [
+      item.label,
+      item.value + 'kg',
+      this.getCategoryPercent(item.value) + '%'
+    ]);
+    
+    autoTable(doc, {
+      head: [['Category', 'Weight', 'Percent']],
+      body: categoryDataTable,
+      startY: (doc as any).lastAutoTable.finalY + 10,
+      theme: 'grid'
+    });
+    
+    // 环保数据
+    const envData = this.environmentalData.map(item => {
+      const unit = item.label === '碳减排' ? 'kg CO2' : item.label === '节水量' ? 'Liter' : 'kWh';
+      return [item.label, item.value + '', unit];
+    });
+    
+    autoTable(doc, {
+      head: [['Environmental', 'Value', 'Unit']],
+      body: envData,
+      startY: (doc as any).lastAutoTable.finalY + 10,
+      theme: 'grid'
+    });
+    
+    const fileName = `report_${this.timeRangeTitle}_${new Date().getTime()}.pdf`;
+    doc.save(fileName);
+    
+    alert('PDF报表导出成功！');
+  }
+
+  // 导出政府申报表
+  private exportGovReport(): void {
+    const ws_data = [
+      ['政府申报报表 - ' + this.timeRangeTitle],
+      [],
+      ['申报项目', '数值'],
+      ['回收总量', this.statsCards[0].value + this.statsCards[0].unit],
+      ['处理率', '95.8%'],
+      ['合规率', '100%'],
+      ['环保贡献（碳减排）', this.environmentalData[0].value + 'kg CO₂'],
+      [],
+      ['品类明细', '重量(kg)', '占比'],
+      ...this.categoryData.map(item => [item.label, item.value, this.getCategoryPercent(item.value) + '%']),
+      [],
+      ['环保数据明细', '数值', '单位'],
+      ...this.environmentalData.map(item => {
+        const unit = item.label === '碳减排' ? 'kg CO₂' : item.label === '节水量' ? '升' : '度';
+        return [item.label, item.value, unit];
+      }),
+      [],
+      ['生成时间', new Date().toLocaleString('zh-CN')]
+    ];
+
+    const ws = XLSX.utils.aoa_to_sheet(ws_data);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, '政府申报');
+    
+    const fileName = `政府申报_${this.timeRangeTitle}_${new Date().getTime()}.xlsx`;
+    XLSX.writeFile(wb, fileName);
+    
+    alert('政府申报表导出成功！');
   }
 
   submitToGov(): void {
-    if (confirm('确定要提交政府申报报表吗？')) {
+    if (confirm(`确定要提交${this.timeRangeTitle}政府申报报表吗？`)) {
       alert('报表已成功提交！');
     }
   }
 
-  constructor() {}
+  // 计算品类总重量（吨）
+  get totalCategoryWeight(): number {
+    const total = this.categoryData.reduce((sum, item) => sum + item.value, 0);
+    return Math.round(total / 100) / 10; // 转换为吨，保留1位小数
+  }
+
+  // 计算加工服务收入
+  get processingIncome(): string {
+    const baseIncome = parseFloat(this.statsCards[1].value.replace(/,/g, ''));
+    return Math.round(baseIncome * 0.27).toLocaleString();
+  }
+
+  // 计算其他收入
+  get otherIncome(): string {
+    const baseIncome = parseFloat(this.statsCards[1].value.replace(/,/g, ''));
+    return Math.round(baseIncome * 0.10).toLocaleString();
+  }
+
+  // Math辅助方法供模板使用
+  Math = Math;
+
+  // 导航方法
+  navigateTo(path: string): void {
+    this.router.navigate([path]);
+  }
+
+  // 刷新数据
+  refreshData(): void {
+    // 添加刷新动画效果
+    const btn = event?.target as HTMLElement;
+    const icon = btn.querySelector('.btn-icon') || btn;
+    icon.classList.add('rotating');
+    
+    setTimeout(() => {
+      alert('数据已刷新！最新数据已加载。');
+      icon.classList.remove('rotating');
+    }, 1000);
+  }
+
+  // 切换对比模式
+  toggleCompare(): void {
+    this.showCompareModal = true;
+  }
+
+  // 关闭对比弹窗
+  closeCompareModal(): void {
+    this.showCompareModal = false;
+  }
+
+  // 获取对比数据的统计卡片
+  getCompareStatsCards(range: 'today' | 'week' | 'month' | 'year'): any[] {
+    const dataMap = {
+      today: [
+        { title: '今日回收量', value: '2.8', unit: '吨', trend: 12 },
+        { title: '今日收入', value: '15,680', unit: '元', trend: 8 },
+        { title: '今日订单', value: '156', unit: '单', trend: -3 },
+        { title: '今日用户', value: '89', unit: '人', trend: 15 }
+      ],
+      week: [
+        { title: '本周回收量', value: '18.5', unit: '吨', trend: 18 },
+        { title: '本周收入', value: '98,450', unit: '元', trend: 22 },
+        { title: '本周订单', value: '1,024', unit: '单', trend: 12 },
+        { title: '本周用户', value: '567', unit: '人', trend: 28 }
+      ],
+      month: [
+        { title: '本月回收量', value: '75.2', unit: '吨', trend: 25 },
+        { title: '本月收入', value: '425,800', unit: '元', trend: 32 },
+        { title: '本月订单', value: '4,386', unit: '单', trend: 18 },
+        { title: '本月用户', value: '2,145', unit: '人', trend: 42 }
+      ],
+      year: [
+        { title: '本年回收量', value: '856', unit: '吨', trend: 38 },
+        { title: '本年收入', value: '4.85', unit: '百万', trend: 45 },
+        { title: '本年订单', value: '48,562', unit: '单', trend: 35 },
+        { title: '本年用户', value: '18,945', unit: '人', trend: 52 }
+      ]
+    };
+    return dataMap[range];
+  }
+
+  // 辅助方法：将字符串转为数字（移除逗号）
+  parseValue(value: string): number {
+    return parseFloat(value.replace(/,/g, ''));
+  }
+
+  // 辅助方法：比较两个值的大小
+  isGreater(val1: string, val2: string): boolean {
+    return this.parseValue(val1) > this.parseValue(val2);
+  }
+
+  isLess(val1: string, val2: string): boolean {
+    return this.parseValue(val1) < this.parseValue(val2);
+  }
+
+  isEqual(val1: string, val2: string): boolean {
+    return this.parseValue(val1) === this.parseValue(val2);
+  }
+
+  // 辅助方法：获取差值的箭头
+  getDifferenceArrow(currentVal: string, compareVal: string): string {
+    if (this.isGreater(currentVal, compareVal)) return '↑';
+    if (this.isLess(currentVal, compareVal)) return '↓';
+    return '→';
+  }
+
+  // 辅助方法：获取差值
+  getDifference(currentVal: string, compareVal: string): string {
+    const diff = Math.abs(this.parseValue(currentVal) - this.parseValue(compareVal));
+    return diff.toLocaleString();
+  }
+
+  // 辅助方法：获取增长率
+  getGrowthRate(currentVal: string, compareVal: string): string {
+    const current = this.parseValue(currentVal);
+    const compare = this.parseValue(compareVal);
+    if (compare === 0) return '0.0';
+    const rate = ((current - compare) / compare * 100);
+    return Math.abs(rate).toFixed(1);
+  }
+
+  // 辅助方法：获取下降率
+  getDeclineRate(currentVal: string, compareVal: string): string {
+    const current = this.parseValue(currentVal);
+    const compare = this.parseValue(compareVal);
+    if (compare === 0) return '0.0';
+    const rate = ((compare - current) / compare * 100);
+    return Math.abs(rate).toFixed(1);
+  }
+
+  // 打开AI分析
+  openAIAnalysis(): void {
+    if (confirm('是否跳转到AI运营助手进行智能分析？')) {
+      this.router.navigate(['/business/ai-operations-assistant']);
+    }
+  }
+
+  constructor(private router: Router) {}
 }

src/app/business/enterprise-center/enterprise-center.html

@@ -275,35 +275,35 @@
             <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>
+                <div 
+                  *ngFor="let plan of plans" 
+                  class="plan-card"
+                  [class.featured]="plan.isPopular"
+                  [class.current]="plan.id === subscription.currentPlanId">
+                  <div *ngIf="plan.badge" class="plan-badge">{{plan.badge}}</div>
+                  <div *ngIf="plan.isPopular && !plan.badge" class="plan-badge popular">推荐</div>
+                  <div class="plan-name">{{plan.name}}</div>
+                  <div class="plan-price">¥{{plan.price}}<span>/{{plan.unit}}</span></div>
+                  <div class="plan-details">
+                    <div class="plan-detail-item">
+                      <i class="fas fa-users"></i> {{plan.users}}
+                    </div>
+                    <div class="plan-detail-item">
+                      <i class="fas fa-database"></i> {{plan.storage}}
+                    </div>
+                  </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>
+                    <li *ngFor="let feature of plan.features">
+                      <i class="fas fa-check"></i> {{feature}}
+                    </li>
                   </ul>
+                  <button 
+                    class="plan-select-btn"
+                    [class.current]="plan.id === subscription.currentPlanId"
+                    [disabled]="plan.id === subscription.currentPlanId"
+                    (click)="selectPlan(plan); confirmUpgrade()">
+                    {{plan.id === subscription.currentPlanId ? '当前套餐' : '选择此套餐'}}
+                  </button>
                 </div>
               </div>
             </div>
@@ -315,7 +315,7 @@
           <div class="settings-section">
             <div class="settings-group">
               <h3>账号设置</h3>
-              <div class="setting-item">
+              <div class="setting-item" (click)="openPasswordModal()">
                 <div class="setting-info">
                   <i class="fas fa-key"></i>
                   <span>修改密码</span>
@@ -324,7 +324,7 @@
                   <i class="fas fa-chevron-right"></i>
                 </button>
               </div>
-              <div class="setting-item">
+              <div class="setting-item" (click)="openSecurityModal()">
                 <div class="setting-info">
                   <i class="fas fa-shield-alt"></i>
                   <span>安全设置</span>
@@ -371,7 +371,7 @@
 
             <div class="settings-group">
               <h3>其他</h3>
-              <div class="setting-item">
+              <div class="setting-item" (click)="openHelpModal()">
                 <div class="setting-info">
                   <i class="fas fa-question-circle"></i>
                   <span>帮助中心</span>
@@ -380,7 +380,7 @@
                   <i class="fas fa-chevron-right"></i>
                 </button>
               </div>
-              <div class="setting-item">
+              <div class="setting-item" (click)="openAboutModal()">
                 <div class="setting-info">
                   <i class="fas fa-info-circle"></i>
                   <span>关于我们</span>
@@ -401,6 +401,318 @@
     </div>
   </main>
 
+  <!-- 升级套餐弹窗 -->
+  <div *ngIf="showUpgradeModal" class="modal-overlay" (click)="closeUpgradeModal()">
+    <div class="modal-content upgrade-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>升级套餐</h3>
+        <button class="modal-close" (click)="closeUpgradeModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <div class="upgrade-plans">
+          <div 
+            *ngFor="let plan of plans"
+            class="upgrade-plan-card"
+            [class.selected]="selectedPlan?.id === plan.id"
+            [class.current]="plan.id === subscription.currentPlanId"
+            (click)="selectPlan(plan)">
+            <div *ngIf="plan.id === subscription.currentPlanId" class="current-badge">当前</div>
+            <div *ngIf="plan.isPopular && plan.id !== subscription.currentPlanId" class="popular-badge">推荐</div>
+            <div class="upgrade-plan-header">
+              <h4>{{plan.name}}</h4>
+              <div class="upgrade-plan-price">
+                <span class="price">¥{{plan.price}}</span>
+                <span class="unit">/{{plan.unit}}</span>
+              </div>
+            </div>
+            <div class="upgrade-plan-specs">
+              <div class="spec-item">
+                <i class="fas fa-users"></i>
+                <span>{{plan.users}}</span>
+              </div>
+              <div class="spec-item">
+                <i class="fas fa-database"></i>
+                <span>{{plan.storage}}</span>
+              </div>
+            </div>
+            <ul class="upgrade-plan-features">
+              <li *ngFor="let feature of plan.features">
+                <i class="fas fa-check-circle"></i>
+                {{feature}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-secondary" (click)="closeUpgradeModal()">取消</button>
+        <button 
+          class="btn-primary" 
+          [disabled]="!selectedPlan || selectedPlan.id === subscription.currentPlanId"
+          (click)="confirmUpgrade()">
+          {{selectedPlan?.id === subscription.currentPlanId ? '已是当前套餐' : '确认升级'}}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 修改密码弹窗 -->
+  <div *ngIf="showPasswordModal" class="modal-overlay" (click)="closePasswordModal()">
+    <div class="modal-content password-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>修改密码</h3>
+        <button class="modal-close" (click)="closePasswordModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <form class="password-form">
+          <div class="form-group">
+            <label>原密码</label>
+            <input 
+              type="password" 
+              [(ngModel)]="passwordForm.oldPassword" 
+              name="oldPassword"
+              placeholder="请输入原密码"
+              class="form-input">
+          </div>
+          <div class="form-group">
+            <label>新密码</label>
+            <input 
+              type="password" 
+              [(ngModel)]="passwordForm.newPassword" 
+              name="newPassword"
+              placeholder="请输入新密码（至少6位）"
+              class="form-input">
+          </div>
+          <div class="form-group">
+            <label>确认新密码</label>
+            <input 
+              type="password" 
+              [(ngModel)]="passwordForm.confirmPassword" 
+              name="confirmPassword"
+              placeholder="请再次输入新密码"
+              class="form-input">
+          </div>
+          <div class="form-tips">
+            <i class="fas fa-info-circle"></i>
+            <span>密码长度至少6位，建议包含字母、数字和符号</span>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-secondary" (click)="closePasswordModal()">取消</button>
+        <button class="btn-primary" (click)="submitPasswordChange()">确认修改</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 安全设置弹窗 -->
+  <div *ngIf="showSecurityModal" class="modal-overlay" (click)="closeSecurityModal()">
+    <div class="modal-content security-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>安全设置</h3>
+        <button class="modal-close" (click)="closeSecurityModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <div class="security-options">
+          <div class="security-option">
+            <div class="option-info">
+              <i class="fas fa-mobile-alt"></i>
+              <div class="option-text">
+                <h4>手机绑定</h4>
+                <p>绑定手机号用于接收验证码</p>
+              </div>
+            </div>
+            <span class="option-status bound">已绑定</span>
+          </div>
+          <div class="security-option">
+            <div class="option-info">
+              <i class="fas fa-envelope"></i>
+              <div class="option-text">
+                <h4>邮箱绑定</h4>
+                <p>绑定邮箱用于接收通知</p>
+              </div>
+            </div>
+            <span class="option-status bound">已绑定</span>
+          </div>
+          <div class="security-option">
+            <div class="option-info">
+              <i class="fas fa-lock"></i>
+              <div class="option-text">
+                <h4>两步验证</h4>
+                <p>启用两步验证提高安全性</p>
+              </div>
+            </div>
+            <label class="switch">
+              <input type="checkbox">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="security-option">
+            <div class="option-info">
+              <i class="fas fa-history"></i>
+              <div class="option-text">
+                <h4>登录历史</h4>
+                <p>查看最近的登录记录</p>
+              </div>
+            </div>
+            <button class="btn-link" (click)="openLoginHistoryModal()">查看</button>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" (click)="closeSecurityModal()">确定</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 帮助中心弹窗 -->
+  <div *ngIf="showHelpModal" class="modal-overlay" (click)="closeHelpModal()">
+    <div class="modal-content help-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>帮助中心</h3>
+        <button class="modal-close" (click)="closeHelpModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <div class="help-categories">
+          <div class="help-category">
+            <h4>📖 常见问题</h4>
+            <ul class="help-list">
+              <li><a href="#">如何添加员工？</a></li>
+              <li><a href="#">如何管理订单？</a></li>
+              <li><a href="#">如何查看数据报表？</a></li>
+              <li><a href="#">如何升级套餐？</a></li>
+            </ul>
+          </div>
+          <div class="help-category">
+            <h4>💡 使用教程</h4>
+            <ul class="help-list">
+              <li><a href="#">快速入门指南</a></li>
+              <li><a href="#">功能详解视频</a></li>
+              <li><a href="#">最佳实践案例</a></li>
+            </ul>
+          </div>
+          <div class="help-category">
+            <h4>📞 联系我们</h4>
+            <div class="contact-info">
+              <p><i class="fas fa-phone"></i> 客服热线：400-123-4567</p>
+              <p><i class="fas fa-envelope"></i> 邮箱：support@zhihui-eco.com</p>
+              <p><i class="fas fa-comments"></i> 在线客服：工作日 9:00-18:00</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" (click)="closeHelpModal()">关闭</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 关于我们弹窗 -->
+  <div *ngIf="showAboutModal" class="modal-overlay" (click)="closeAboutModal()">
+    <div class="modal-content about-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>关于我们</h3>
+        <button class="modal-close" (click)="closeAboutModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <div class="about-content">
+          <div class="about-logo">
+            <span class="logo-icon">♻️</span>
+            <h2>智回回收</h2>
+          </div>
+          <div class="about-info">
+            <p class="about-desc">
+              智回回收是一款智能回收管理平台，致力于为企业提供全面的回收业务解决方案。
+              我们通过AI技术和大数据分析，帮助企业提升运营效率，降低成本，实现可持续发展。
+            </p>
+            <div class="about-stats">
+              <div class="stat">
+                <div class="stat-value">10000+</div>
+                <div class="stat-label">服务企业</div>
+              </div>
+              <div class="stat">
+                <div class="stat-value">50万+</div>
+                <div class="stat-label">日处理订单</div>
+              </div>
+              <div class="stat">
+                <div class="stat-value">99.9%</div>
+                <div class="stat-label">系统可用性</div>
+              </div>
+            </div>
+            <div class="about-version">
+              <p><strong>版本信息：</strong>v2.0.3</p>
+              <p><strong>更新时间：</strong>2024-12-16</p>
+              <p><strong>公司名称：</strong>智回环保科技有限公司</p>
+              <p><strong>备案号：</strong>京ICP备12345678号</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" (click)="closeAboutModal()">关闭</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 登录历史弹窗 -->
+  <div *ngIf="showLoginHistoryModal" class="modal-overlay" (click)="closeLoginHistoryModal()">
+    <div class="modal-content login-history-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>登录历史</h3>
+        <button class="modal-close" (click)="closeLoginHistoryModal()">✕</button>
+      </div>
+      <div class="modal-body">
+        <div class="history-intro">
+          <i class="fas fa-info-circle"></i>
+          <span>最近5次登录记录，如有异常请及时修改密码</span>
+        </div>
+        <div class="history-list">
+          <div 
+            *ngFor="let record of loginHistory; let i = index" 
+            class="history-item"
+            [class.current]="i === 0">
+            <div class="history-icon">
+              <i class="fas" [class.fa-check-circle]="record.status === 'success'" [class.fa-times-circle]="record.status === 'failed'"></i>
+            </div>
+            <div class="history-info">
+              <div class="history-header">
+                <span class="history-time">{{ record.time }}</span>
+                <span class="history-status" [class.success]="record.status === 'success'" [class.failed]="record.status === 'failed'">
+                  {{ record.status === 'success' ? '成功' : '失败' }}
+                </span>
+              </div>
+              <div class="history-details">
+                <div class="detail-item">
+                  <i class="fas fa-map-marker-alt"></i>
+                  <span>{{ record.location }}</span>
+                </div>
+                <div class="detail-item">
+                  <i class="fas fa-network-wired"></i>
+                  <span>{{ record.ip }}</span>
+                </div>
+                <div class="detail-item">
+                  <i class="fas fa-desktop"></i>
+                  <span>{{ record.device }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="history-tips">
+          <p>💡 <strong>安全提示：</strong></p>
+          <ul>
+            <li>定期检查登录记录，及时发现异常登录</li>
+            <li>如发现未授权的登录，请立即修改密码</li>
+            <li>建议开启两步验证以提高账号安全性</li>
+          </ul>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" (click)="closeLoginHistoryModal()">关闭</button>
+      </div>
+    </div>
+  </div>
+
   <!-- 底部导航 -->
   <nav class="bottom-nav">
     <div class="nav-item" routerLink="/business/dashboard">

src/app/business/enterprise-center/enterprise-center.scss

@@ -950,5 +950,759 @@
   }
 }
 
+// ========== 模态框样式 ==========
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: slideUp 0.3s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .modal-close {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f5f5f5;
+    color: #666;
+    font-size: 20px;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: #e0e0e0;
+      color: #333;
+    }
+  }
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+
+  button {
+    padding: 10px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: none;
+
+    &.btn-primary {
+      background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+      color: white;
+
+      &:hover:not(:disabled) {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-secondary {
+      background: #f5f5f5;
+      color: #666;
+
+      &:hover {
+        background: #e0e0e0;
+      }
+    }
+  }
+}
+
+// 升级套餐弹窗
+.upgrade-modal {
+  max-width: 900px;
+
+  .upgrade-plans {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+  }
+
+  .upgrade-plan-card {
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    padding: 20px;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+      border-color: #4CAF50;
+      transform: translateY(-4px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    }
+
+    &.selected {
+      border-color: #4CAF50;
+      background: #f1f8f4;
+      box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
+    }
+
+    &.current {
+      border-color: #2196F3;
+      background: #e3f2fd;
+    }
+
+    .current-badge,
+    .popular-badge {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .current-badge {
+      background: #2196F3;
+      color: white;
+    }
+
+    .popular-badge {
+      background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
+      color: white;
+    }
+
+    .upgrade-plan-header {
+      margin-bottom: 16px;
+
+      h4 {
+        margin: 0 0 8px 0;
+        font-size: 20px;
+        color: #333;
+      }
+
+      .upgrade-plan-price {
+        .price {
+          font-size: 28px;
+          font-weight: 700;
+          color: #4CAF50;
+        }
+
+        .unit {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+
+    .upgrade-plan-specs {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 16px;
+      padding: 12px;
+      background: white;
+      border-radius: 8px;
+
+      .spec-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: #666;
+
+        i {
+          color: #4CAF50;
+        }
+      }
+    }
+
+    .upgrade-plan-features {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 0;
+        font-size: 13px;
+        color: #666;
+
+        i {
+          color: #4CAF50;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+// 修改密码弹窗
+.password-modal {
+  .password-form {
+    .form-group {
+      margin-bottom: 20px;
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .form-input {
+        width: 100%;
+        padding: 12px 16px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:focus {
+          outline: none;
+          border-color: #4CAF50;
+          box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+        }
+
+        &::placeholder {
+          color: #bbb;
+        }
+      }
+    }
+
+    .form-tips {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      background: #e3f2fd;
+      border-radius: 8px;
+      font-size: 13px;
+      color: #1976D2;
+
+      i {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+// 安全设置弹窗
+.security-modal {
+  .security-options {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .security-option {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      border: 1px solid #e0e0e0;
+      border-radius: 12px;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #f9f9f9;
+        border-color: #4CAF50;
+      }
+
+      .option-info {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+
+        i {
+          font-size: 24px;
+          color: #4CAF50;
+        }
+
+        .option-text {
+          h4 {
+            margin: 0 0 4px 0;
+            font-size: 15px;
+            color: #333;
+          }
+
+          p {
+            margin: 0;
+            font-size: 13px;
+            color: #999;
+          }
+        }
+      }
+
+      .option-status {
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+
+        &.bound {
+          background: #e8f5e9;
+          color: #4CAF50;
+        }
+
+        &.unbound {
+          background: #ffebee;
+          color: #f44336;
+        }
+      }
+
+      .btn-link {
+        background: none;
+        border: none;
+        color: #4CAF50;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #2E7D32;
+        }
+      }
+    }
+  }
+}
+
+// 帮助中心弹窗
+.help-modal {
+  .help-categories {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .help-category {
+      h4 {
+        margin: 0 0 12px 0;
+        font-size: 16px;
+        color: #333;
+      }
+
+      .help-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          margin-bottom: 8px;
+
+          a {
+            display: block;
+            padding: 10px 12px;
+            color: #666;
+            text-decoration: none;
+            border-radius: 6px;
+            font-size: 14px;
+            transition: all 0.3s;
+
+            &:hover {
+              background: #f5f5f5;
+              color: #4CAF50;
+              padding-left: 20px;
+            }
+          }
+        }
+      }
+
+      .contact-info {
+        p {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin: 12px 0;
+          font-size: 14px;
+          color: #666;
+
+          i {
+            color: #4CAF50;
+            width: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 关于我们弹窗
+.about-modal {
+  .about-content {
+    .about-logo {
+      text-align: center;
+      margin-bottom: 24px;
 
+      .logo-icon {
+        font-size: 60px;
+        display: block;
+        margin-bottom: 12px;
+      }
+
+      h2 {
+        margin: 0;
+        font-size: 28px;
+        background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+    }
+
+    .about-info {
+      .about-desc {
+        font-size: 14px;
+        line-height: 1.8;
+        color: #666;
+        margin-bottom: 24px;
+        text-align: justify;
+      }
+
+      .about-stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+        margin-bottom: 24px;
+
+        .stat {
+          text-align: center;
+          padding: 20px;
+          background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);
+          border-radius: 12px;
+
+          .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: #4CAF50;
+            margin-bottom: 4px;
+          }
+
+          .stat-label {
+            font-size: 13px;
+            color: #999;
+          }
+        }
+      }
 
+      .about-version {
+        padding: 16px;
+        background: #f9f9f9;
+        border-radius: 8px;
+
+        p {
+          margin: 8px 0;
+          font-size: 13px;
+          color: #666;
+
+          strong {
+            color: #333;
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 套餐卡片增强样式
+.plan-detail-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #666;
+
+  i {
+    color: #4CAF50;
+  }
+}
+
+.plan-select-btn {
+  width: 100%;
+  padding: 12px;
+  margin-top: 16px;
+  border: 2px solid #4CAF50;
+  background: white;
+  color: #4CAF50;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover:not(:disabled) {
+    background: #4CAF50;
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+  }
+
+  &.current,
+  &:disabled {
+    background: #e0e0e0;
+    border-color: #e0e0e0;
+    color: #999;
+    cursor: not-allowed;
+  }
+}
+
+.setting-item {
+  cursor: pointer;
+}
+
+// 动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+// 登录历史弹窗
+.login-history-modal {
+  max-width: 700px;
+
+  .history-intro {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: #fff3cd;
+    border-left: 4px solid #ffc107;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #856404;
+
+    i {
+      font-size: 16px;
+      color: #ffc107;
+    }
+  }
+
+  .history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 20px;
+
+    .history-item {
+      display: flex;
+      gap: 16px;
+      padding: 16px;
+      background: white;
+      border: 2px solid #e0e0e0;
+      border-radius: 12px;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: #4CAF50;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
+
+      &.current {
+        background: linear-gradient(135deg, #f1f8f4 0%, #e8f5e9 100%);
+        border-color: #4CAF50;
+        position: relative;
+
+        &::before {
+          content: '当前';
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          padding: 2px 8px;
+          background: #4CAF50;
+          color: white;
+          font-size: 11px;
+          border-radius: 10px;
+          font-weight: 600;
+        }
+      }
+
+      .history-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        flex-shrink: 0;
+
+        i {
+          font-size: 24px;
+
+          &.fa-check-circle {
+            color: #4CAF50;
+          }
+
+          &.fa-times-circle {
+            color: #f44336;
+          }
+        }
+      }
+
+      .history-info {
+        flex: 1;
+
+        .history-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 10px;
+
+          .history-time {
+            font-size: 15px;
+            font-weight: 600;
+            color: #333;
+          }
+
+          .history-status {
+            padding: 3px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+
+            &.success {
+              background: #e8f5e9;
+              color: #4CAF50;
+            }
+
+            &.failed {
+              background: #ffebee;
+              color: #f44336;
+            }
+          }
+        }
+
+        .history-details {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+
+          .detail-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 13px;
+            color: #666;
+
+            i {
+              width: 16px;
+              color: #4CAF50;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .history-tips {
+    padding: 16px;
+    background: #f5f7fa;
+    border-radius: 8px;
+
+    p {
+      margin: 0 0 10px 0;
+      font-size: 14px;
+      color: #333;
+    }
+
+    ul {
+      margin: 0;
+      padding-left: 20px;
+
+      li {
+        font-size: 13px;
+        color: #666;
+        margin-bottom: 6px;
+        line-height: 1.6;
+      }
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .modal-content {
+    margin: 0;
+    border-radius: 12px 12px 0 0;
+    max-height: 85vh;
+  }
+
+  .upgrade-modal .upgrade-plans {
+    grid-template-columns: 1fr;
+  }
+
+  .about-modal .about-info .about-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .login-history-modal {
+    .history-item {
+      flex-direction: column;
+      
+      .history-icon {
+        align-self: flex-start;
+      }
+    }
+  }
+}

src/app/business/enterprise-center/enterprise-center.ts

@@ -1,6 +1,6 @@
 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 Employee {
@@ -20,6 +20,18 @@ interface Contract {
   status: 'active' | 'expired' | 'pending';
 }
 
+interface Plan {
+  id: string;
+  name: string;
+  price: number;
+  unit: string;
+  users: string;
+  storage: string;
+  features: string[];
+  badge?: string;
+  isPopular?: boolean;
+}
+
 @Component({
   selector: 'app-enterprise-center',
   standalone: true,
@@ -29,6 +41,17 @@ interface Contract {
 })
 export class EnterpriseCenter {
   activeTab: 'info' | 'employee' | 'contract' | 'subscription' | 'settings' = 'info';
+  
+  // 模态框控制
+  showUpgradeModal = false;
+  showPasswordModal = false;
+  showSecurityModal = false;
+  showHelpModal = false;
+  showAboutModal = false;
+  showLoginHistoryModal = false;
+  
+  // 选中的套餐
+  selectedPlan: Plan | null = null;
 
   // 企业信息
   enterpriseInfo = {
@@ -62,12 +85,112 @@ export class EnterpriseCenter {
   // 订阅信息
   subscription = {
     plan: '企业专业版',
+    currentPlanId: 'professional',
     expireDate: '2024-12-31',
     users: 50,
     usedUsers: 12,
     storage: '500GB',
     usedStorage: '125GB'
   };
+  
+  // 套餐列表
+  plans: Plan[] = [
+    {
+      id: 'basic',
+      name: '基础版',
+      price: 999,
+      unit: '月',
+      users: '10个用户',
+      storage: '100GB',
+      features: [
+        '基础回收管理',
+        '订单处理',
+        '数据报表',
+        '邮件支持'
+      ]
+    },
+    {
+      id: 'professional',
+      name: '专业版',
+      price: 2999,
+      unit: '月',
+      users: '50个用户',
+      storage: '500GB',
+      features: [
+        '所有基础功能',
+        'AI智能助手',
+        '高级数据分析',
+        '员工管理',
+        '合同管理',
+        '7x24小时支持'
+      ],
+      badge: '当前套餐',
+      isPopular: true
+    },
+    {
+      id: 'enterprise',
+      name: '企业版',
+      price: 9999,
+      unit: '月',
+      users: '不限用户',
+      storage: '2TB',
+      features: [
+        '所有专业功能',
+        '专属客户经理',
+        '定制化开发',
+        'API接口',
+        '多地域部署',
+        '数据安全保障',
+        'SLA保证'
+      ]
+    }
+  ];
+  
+  // 密码表单
+  passwordForm = {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  };
+  
+  // 登录历史数据
+  loginHistory = [
+    {
+      time: '2024-12-16 14:30:25',
+      location: '北京市朝阳区',
+      ip: '118.123.45.67',
+      device: 'Chrome 120 / Windows 10',
+      status: 'success' as const
+    },
+    {
+      time: '2024-12-16 09:15:10',
+      location: '北京市朝阳区',
+      ip: '118.123.45.67',
+      device: 'Chrome 120 / Windows 10',
+      status: 'success' as const
+    },
+    {
+      time: '2024-12-15 18:42:33',
+      location: '北京市海淀区',
+      ip: '123.234.56.78',
+      device: 'Safari / macOS',
+      status: 'success' as const
+    },
+    {
+      time: '2024-12-15 15:20:15',
+      location: '上海市浦东新区',
+      ip: '220.181.38.149',
+      device: 'Chrome 120 / Android',
+      status: 'failed' as const
+    },
+    {
+      time: '2024-12-14 10:05:50',
+      location: '北京市朝阳区',
+      ip: '118.123.45.67',
+      device: 'Chrome 120 / Windows 10',
+      status: 'success' as const
+    }
+  ];
 
   switchTab(tab: 'info' | 'employee' | 'contract' | 'subscription' | 'settings'): void {
     this.activeTab = tab;
@@ -121,15 +244,118 @@ export class EnterpriseCenter {
     alert(`续签合同: ${contract.title}`);
   }
 
+  // 打开升级套餐弹窗
   upgradePlan(): void {
-    alert('升级订阅计划');
+    this.showUpgradeModal = true;
+  }
+  
+  // 关闭升级弹窗
+  closeUpgradeModal(): void {
+    this.showUpgradeModal = false;
+    this.selectedPlan = null;
+  }
+  
+  // 选择套餐
+  selectPlan(plan: Plan): void {
+    this.selectedPlan = plan;
+  }
+  
+  // 确认升级/购买
+  confirmUpgrade(): void {
+    if (!this.selectedPlan) {
+      alert('请选择套餐');
+      return;
+    }
+    
+    if (this.selectedPlan.id === this.subscription.currentPlanId) {
+      alert('您已经是该套餐用户');
+      return;
+    }
+    
+    // 模拟支付流程
+    if (confirm(`确认${this.selectedPlan.id === 'basic' ? '降级' : '升级'}到 ${this.selectedPlan.name} 吗？\n\n价格：¥${this.selectedPlan.price}/${this.selectedPlan.unit}`)) {
+      alert(`正在跳转到支付页面...\n\n套餐：${this.selectedPlan.name}\n价格：¥${this.selectedPlan.price}/${this.selectedPlan.unit}\n\n支付功能开发中，敬请期待！`);
+      this.closeUpgradeModal();
+    }
+  }
+  
+  // 打开修改密码弹窗
+  openPasswordModal(): void {
+    this.showPasswordModal = true;
+    this.passwordForm = { oldPassword: '', newPassword: '', confirmPassword: '' };
+  }
+  
+  // 关闭修改密码弹窗
+  closePasswordModal(): void {
+    this.showPasswordModal = false;
+  }
+  
+  // 提交密码修改
+  submitPasswordChange(): void {
+    if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
+      alert('请填写所有字段');
+      return;
+    }
+    
+    if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
+      alert('两次输入的新密码不一致');
+      return;
+    }
+    
+    if (this.passwordForm.newPassword.length < 6) {
+      alert('密码长度至少6位');
+      return;
+    }
+    
+    alert('密码修改成功！');
+    this.closePasswordModal();
+  }
+  
+  // 打开安全设置弹窗
+  openSecurityModal(): void {
+    this.showSecurityModal = true;
+  }
+  
+  // 关闭安全设置弹窗
+  closeSecurityModal(): void {
+    this.showSecurityModal = false;
+  }
+  
+  // 打开帮助中心弹窗
+  openHelpModal(): void {
+    this.showHelpModal = true;
+  }
+  
+  // 关闭帮助中心弹窗
+  closeHelpModal(): void {
+    this.showHelpModal = false;
+  }
+  
+  // 打开关于我们弹窗
+  openAboutModal(): void {
+    this.showAboutModal = true;
+  }
+  
+  // 关闭关于我们弹窗
+  closeAboutModal(): void {
+    this.showAboutModal = false;
+  }
+  
+  // 打开登录历史弹窗
+  openLoginHistoryModal(): void {
+    this.showLoginHistoryModal = true;
+  }
+  
+  // 关闭登录历史弹窗
+  closeLoginHistoryModal(): void {
+    this.showLoginHistoryModal = false;
   }
 
   logout(): void {
     if (confirm('确定要退出登录吗？')) {
-      alert('已退出登录');
+      this.router.navigate(['/auth/login']);
     }
   }
 
-  constructor() {}
+  constructor(private router: Router) {}
 }

src/app/government/ai-decision-assistant/ai-decision-assistant.html

@@ -70,23 +70,295 @@
 
       <!-- 报告生成 -->
       <div *ngIf="activeTab === 'report'" class="report-panel">
+        <h3 class="panel-title">选择报告类型</h3>
         <div class="report-template">
-          <div class="template-item" (click)="generateReport()">
+          <div class="template-item" (click)="generateReport('monthly')" [class.generating]="isGenerating">
             <i class="fas fa-file-alt"></i>
             <span>月度监管分析报告</span>
+            <p class="template-desc">包含月度回收数据、区域分析、预警信息</p>
           </div>
-          <div class="template-item" (click)="generateReport()">
+          <div class="template-item" (click)="generateReport('industry')" [class.generating]="isGenerating">
             <i class="fas fa-chart-bar"></i>
             <span>产业发展评估报告</span>
+            <p class="template-desc">企业统计、产值分析、行业趋势</p>
           </div>
-          <div class="template-item" (click)="generateReport()">
+          <div class="template-item" (click)="generateReport('policy')" [class.generating]="isGenerating">
             <i class="fas fa-clipboard-check"></i>
             <span>政策效果评估报告</span>
+            <p class="template-desc">补贴发放、政策效果、优化建议</p>
+          </div>
+        </div>
+        
+        <div *ngIf="isGenerating" class="generating-overlay">
+          <div class="spinner"></div>
+          <p>AI正在生成报告...</p>
+        </div>
+        
+        <!-- 历史报告列表 -->
+        <div *ngIf="generatedReports.length > 0" class="reports-history">
+          <h3 class="panel-title">已生成的报告 ({{ generatedReports.length }})</h3>
+          <div class="report-list">
+            <div *ngFor="let report of generatedReports" class="report-card">
+              <div class="report-icon">
+                <i class="fas" [class.fa-file-alt]="report.type === 'monthly'" 
+                   [class.fa-chart-bar]="report.type === 'industry'"
+                   [class.fa-clipboard-check]="report.type === 'policy'"></i>
+              </div>
+              <div class="report-info">
+                <h4>{{ report.title }}</h4>
+                <p class="report-id">报告编号: {{ report.id }}</p>
+                <p class="report-time">生成时间: {{ report.generateTime }}</p>
+                <p class="report-summary">{{ report.summary }}</p>
+              </div>
+              <div class="report-actions">
+                <button class="btn-view" (click)="viewReport(report)">
+                  <i class="fas fa-eye"></i> 查看
+                </button>
+                <button class="btn-export" (click)="exportReport(report)">
+                  <i class="fas fa-download"></i> 导出
+                </button>
+                <button class="btn-delete" (click)="deleteReport(report.id)">
+                  <i class="fas fa-trash"></i>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </main>
+  
+  <!-- 报告详情弹窗 -->
+  <div class="report-modal-overlay" [class.show]="showReportModal" (click)="closeReportModal()">
+    <div class="report-modal-content" (click)="$event.stopPropagation()" *ngIf="currentReport">
+      <div class="report-modal-header">
+        <h3>{{ currentReport.title }}</h3>
+        <button class="modal-close" (click)="closeReportModal()">×</button>
+      </div>
+      <div class="report-modal-body">
+        <div class="report-meta">
+          <span class="meta-item"><i class="fas fa-barcode"></i> {{ currentReport.id }}</span>
+          <span class="meta-item"><i class="fas fa-clock"></i> {{ currentReport.generateTime }}</span>
+        </div>
+        
+        <!-- 月度监管分析报告 -->
+        <div *ngIf="currentReport.type === 'monthly'">
+          <div class="report-section">
+            <h4><i class="fas fa-chart-line"></i> 总体概况</h4>
+            <div class="stats-grid">
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.totalRecycle.toLocaleString() }}</div>
+                <div class="stat-label">回收总量(kg)</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.growthRate }}%</div>
+                <div class="stat-label">同比增长</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.accuracy }}%</div>
+                <div class="stat-label">分类准确率</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.carbonReduction }}</div>
+                <div class="stat-label">碳减排(kg)</div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-map-marked-alt"></i> 区域分析</h4>
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>区域</th>
+                  <th>回收量(kg)</th>
+                  <th>准确率</th>
+                  <th>趋势</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let item of currentReport.data.regional">
+                  <td>{{ item.area }}</td>
+                  <td>{{ item.recycle.toLocaleString() }}</td>
+                  <td>{{ item.accuracy }}%</td>
+                  <td [class.positive]="item.trend.startsWith('+')" [class.negative]="item.trend.startsWith('-')">{{ item.trend }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-exclamation-triangle"></i> 预警信息</h4>
+            <div class="warning-list">
+              <div *ngFor="let warning of currentReport.data.warnings" class="warning-item" [class.high]="warning.level === 'high'">
+                <span class="warning-badge">{{ warning.level === 'high' ? '高' : '中' }}</span>
+                <span class="warning-area">{{ warning.area }}</span>
+                <span class="warning-issue">{{ warning.issue }}</span>
+                <span class="warning-action">→ {{ warning.action }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-lightbulb"></i> 优化建议</h4>
+            <ul class="suggestions-list">
+              <li *ngFor="let suggestion of currentReport.data.suggestions">{{ suggestion }}</li>
+            </ul>
+          </div>
+        </div>
+        
+        <!-- 产业发展评估报告 -->
+        <div *ngIf="currentReport.type === 'industry'">
+          <div class="report-section">
+            <h4><i class="fas fa-industry"></i> 产业概况</h4>
+            <div class="stats-grid">
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.companies }}</div>
+                <div class="stat-label">企业数量(家)</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.employees.toLocaleString() }}</div>
+                <div class="stat-label">从业人员(人)</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ (currentReport.data.overview.revenue / 100000000).toFixed(1) }}</div>
+                <div class="stat-label">年产值(亿元)</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.chainCompleteness }}%</div>
+                <div class="stat-label">产业链完整度</div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-layer-group"></i> 细分领域</h4>
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>领域</th>
+                  <th>企业数</th>
+                  <th>产值(亿元)</th>
+                  <th>增长率</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let sector of currentReport.data.sectors">
+                  <td>{{ sector.name }}</td>
+                  <td>{{ sector.companies }}</td>
+                  <td>{{ (sector.revenue / 100000000).toFixed(2) }}</td>
+                  <td class="positive">{{ sector.growth }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-trophy"></i> 龙头企业</h4>
+            <div class="companies-list">
+              <div *ngFor="let company of currentReport.data.topCompanies; let i = index" class="company-card">
+                <div class="company-rank">{{ i + 1 }}</div>
+                <div class="company-info">
+                  <div class="company-name">{{ company.name }}</div>
+                  <div class="company-stats">
+                    <span>年产值: ¥{{ (company.revenue / 10000).toFixed(0) }}万</span>
+                    <span class="growth positive">{{ company.growth }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-chart-line"></i> 发展趋势</h4>
+            <ul class="suggestions-list">
+              <li *ngFor="let trend of currentReport.data.trends">{{ trend }}</li>
+            </ul>
+          </div>
+        </div>
+        
+        <!-- 政策效果评估报告 -->
+        <div *ngIf="currentReport.type === 'policy'">
+          <div class="report-section">
+            <h4><i class="fas fa-coins"></i> 政策概况</h4>
+            <div class="stats-grid">
+              <div class="stat-card">
+                <div class="stat-value">{{ (currentReport.data.overview.subsidyAmount / 10000).toFixed(0) }}</div>
+                <div class="stat-label">补贴总额(万元)</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.recycleGrowth }}%</div>
+                <div class="stat-label">回收量增长</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.participation }}%</div>
+                <div class="stat-label">企业参与度</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value">{{ currentReport.data.overview.satisfaction }}%</div>
+                <div class="stat-label">满意度</div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-hand-holding-usd"></i> 补贴分布</h4>
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>区域</th>
+                  <th>补贴金额(万元)</th>
+                  <th>受益企业</th>
+                  <th>效果</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let item of currentReport.data.subsidyDistribution">
+                  <td>{{ item.area }}</td>
+                  <td>¥{{ (item.amount / 10000).toFixed(0) }}</td>
+                  <td>{{ item.companies }}家</td>
+                  <td>
+                    <span class="effect-badge" [class.excellent]="item.effect === '优秀'" 
+                          [class.good]="item.effect === '良好'"
+                          [class.normal]="item.effect === '一般'">{{ item.effect }}</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-tasks"></i> 效果评估</h4>
+            <div class="effectiveness-list">
+              <div *ngFor="let item of currentReport.data.effectiveness" class="effectiveness-item">
+                <div class="effectiveness-name">{{ item.indicator }}</div>
+                <div class="effectiveness-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" [style.width.%]="(item.actual / item.target) * 100"></div>
+                  </div>
+                  <span class="progress-text">目标: {{ item.target }} | 实际: {{ item.actual }}</span>
+                </div>
+                <span class="status-badge success">{{ item.status }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="report-section">
+            <h4><i class="fas fa-lightbulb"></i> 优化建议</h4>
+            <ul class="suggestions-list">
+              <li *ngFor="let recommendation of currentReport.data.recommendations">{{ recommendation }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="report-modal-footer">
+        <button class="btn btn-export" (click)="exportReport(currentReport)">
+          <i class="fas fa-download"></i> 导出报告
+        </button>
+        <button class="btn btn-close" (click)="closeReportModal()">关闭</button>
+      </div>
+    </div>
+  </div>
 
   <nav class="bottom-nav">
     <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>

src/app/government/ai-decision-assistant/ai-decision-assistant.scss

@@ -225,17 +225,664 @@
 }
 
 .template-item {
+  padding: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 12px;
+  border: 2px solid #e0e0e0;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  i {
+    font-size: 32px;
+    color: var(--secondary-color);
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  span {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    display: block;
+    margin-bottom: 4px;
+  }
+  
+  .template-desc {
+    font-size: 13px;
+    color: #999;
+    margin: 0;
+  }
+  
+  &:hover {
+    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
+    border-color: var(--secondary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
+  }
+  
+  &.generating {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+// 报告标题
+.panel-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 16px 0;
+}
+
+// 生成中遮罩
+.generating-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  
+  .spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  
+  p {
+    color: white;
+    font-size: 16px;
+    margin-top: 20px;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 历史报告
+.reports-history {
+  margin-top: 40px;
+}
+
+.report-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.report-card {
+  display: flex;
+  gap: 16px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  border: 2px solid #e0e0e0;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: var(--secondary-color);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
+  }
+  
+  .report-icon {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    i {
+      font-size: 28px;
+      color: white;
+    }
+  }
+  
+  .report-info {
+    flex: 1;
+    
+    h4 {
+      margin: 0 0 8px 0;
+      font-size: 16px;
+      color: #333;
+    }
+    
+    p {
+      margin: 4px 0;
+      font-size: 13px;
+      color: #666;
+    }
+    
+    .report-id {
+      font-family: monospace;
+      color: #999;
+    }
+    
+    .report-summary {
+      margin-top: 8px;
+      color: #555;
+      line-height: 1.5;
+    }
+  }
+  
+  .report-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    
+    button {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        margin-right: 4px;
+      }
+    }
+    
+    .btn-view {
+      background: var(--secondary-color);
+      color: white;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+      }
+    }
+    
+    .btn-export {
+      background: #f5f5f5;
+      color: #666;
+      
+      &:hover {
+        background: #e0e0e0;
+      }
+    }
+    
+    .btn-delete {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      background: #ffebee;
+      color: #e74c3c;
+      
+      i {
+        margin: 0;
+      }
+      
+      &:hover {
+        background: #e74c3c;
+        color: white;
+      }
+    }
+  }
+}
+
+// 报告详情弹窗
+.report-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+  z-index: 2000;
+  padding: 20px;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.report-modal-content {
+  background: white;
+  border-radius: 16px;
+  max-width: 1000px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.report-modal-header {
+  padding: 24px;
+  border-bottom: 2px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0;
+  
+  h3 {
+    margin: 0;
+    font-size: 20px;
+  }
+  
+  .modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    font-size: 28px;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.report-modal-body {
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.report-meta {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #666;
+    
+    i {
+      color: var(--secondary-color);
+    }
+  }
+}
+
+.report-section {
+  margin-bottom: 32px;
+  
+  h4 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #f0f0f0;
+    
+    i {
+      color: var(--secondary-color);
+    }
+  }
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.stat-card {
+  padding: 16px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 10px;
+  border: 1px solid #e0e0e0;
+  text-align: center;
+  
+  .stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--secondary-color);
+    margin-bottom: 4px;
+  }
+  
+  .stat-label {
+    font-size: 13px;
+    color: #999;
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  
+  thead {
+    background: #f8f9fa;
+    
+    th {
+      padding: 12px;
+      text-align: left;
+      font-size: 14px;
+      font-weight: 600;
+      color: #666;
+      border-bottom: 2px solid #e0e0e0;
+    }
+  }
+  
+  tbody {
+    tr {
+      border-bottom: 1px solid #f0f0f0;
+      transition: all 0.2s;
+      
+      &:hover {
+        background: #f8f9fa;
+      }
+    }
+    
+    td {
+      padding: 12px;
+      font-size: 14px;
+      color: #333;
+      
+      &.positive {
+        color: #27ae60;
+        font-weight: 600;
+      }
+      
+      &.negative {
+        color: #e74c3c;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.warning-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.warning-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #fff3e0;
+  border-radius: 8px;
+  border-left: 4px solid #f39c12;
+  
+  &.high {
+    background: #ffebee;
+    border-left-color: #e74c3c;
+  }
+  
+  .warning-badge {
+    padding: 4px 8px;
+    background: #f39c12;
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  
+  .high & .warning-badge {
+    background: #e74c3c;
+  }
+  
+  .warning-area {
+    font-weight: 600;
+    color: #333;
+  }
+  
+  .warning-issue {
+    color: #666;
+  }
+  
+  .warning-action {
+    margin-left: auto;
+    color: var(--secondary-color);
+    font-weight: 600;
+  }
+}
+
+.suggestions-list {
+  margin: 0;
+  padding-left: 24px;
+  
+  li {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.8;
+    margin-bottom: 8px;
+  }
+}
+
+.companies-list {
+  display: flex;
+  flex-direction: column;
   gap: 12px;
+}
+
+.company-card {
+  display: flex;
+  gap: 16px;
   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); }
+  border-radius: 10px;
+  align-items: center;
+  
+  .company-rank {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 700;
+  }
+  
+  .company-info {
+    flex: 1;
+    
+    .company-name {
+      font-size: 15px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 4px;
+    }
+    
+    .company-stats {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      color: #666;
+      
+      .growth {
+        font-weight: 600;
+        color: #27ae60;
+      }
+    }
+  }
+}
+
+.effect-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  
+  &.excellent {
+    background: #e8f5e9;
+    color: #27ae60;
+  }
+  
+  &.good {
+    background: #e3f2fd;
+    color: #2196f3;
+  }
+  
+  &.normal {
+    background: #fff3e0;
+    color: #f39c12;
+  }
+}
+
+.effectiveness-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.effectiveness-item {
+  .effectiveness-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+  }
+  
+  .effectiveness-progress {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+    
+    .progress-bar {
+      flex: 1;
+      height: 8px;
+      background: #e0e0e0;
+      border-radius: 4px;
+      overflow: hidden;
+      
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
+        border-radius: 4px;
+        transition: width 0.6s ease-out;
+      }
+    }
+    
+    .progress-text {
+      font-size: 12px;
+      color: #666;
+      white-space: nowrap;
+    }
+  }
+  
+  .status-badge {
+    padding: 4px 12px;
+    background: #e8f5e9;
+    color: #27ae60;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+
+.report-modal-footer {
+  padding: 16px 24px;
+  border-top: 2px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  
+  .btn {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    i {
+      margin-right: 6px;
+    }
+    
+    &.btn-export {
+      background: var(--secondary-color);
+      color: white;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+      }
+    }
+    
+    &.btn-close {
+      background: #f5f5f5;
+      color: #666;
+      
+      &:hover {
+        background: #e0e0e0;
+      }
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .report-card {
+    flex-direction: column;
+    
+    .report-actions {
+      width: 100%;
+      
+      button {
+        flex: 1;
+      }
+    }
+  }
+  
+  .data-table {
+    font-size: 12px;
+    
+    th, td {
+      padding: 8px;
+    }
+  }
 }
 
 

src/app/government/ai-decision-assistant/ai-decision-assistant.ts

@@ -3,6 +3,15 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
+interface GeneratedReport {
+  id: string;
+  type: string;
+  title: string;
+  generateTime: string;
+  data: any;
+  summary: string;
+}
+
 @Component({
   selector: 'app-ai-decision-assistant',
   standalone: true,
@@ -28,6 +37,12 @@ export class AIDecisionAssistant {
     { company: '某环保企业', risk: 'high', pattern: '异常资金流向', suggestion: '加强监管' },
     { company: '绿色回收公司', risk: 'medium', pattern: '回收量波动', suggestion: '核查数据' }
   ];
+  
+  // 报告相关
+  generatedReports: GeneratedReport[] = [];
+  showReportModal = false;
+  currentReport: GeneratedReport | null = null;
+  isGenerating = false;
 
   switchTab(tab: 'simulator' | 'qa' | 'compliance' | 'report'): void {
     this.activeTab = tab;
@@ -48,13 +63,185 @@ export class AIDecisionAssistant {
     }
   }
 
-  generateReport(): void {
-    alert('正在生成综合分析报告...');
+  generateReport(reportType: string): void {
+    this.isGenerating = true;
+    
+    // 模拟报告生成过程
+    setTimeout(() => {
+      const reportId = `RPT${Date.now()}`;
+      const now = new Date();
+      const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
+      
+      let report: GeneratedReport;
+      
+      switch(reportType) {
+        case 'monthly':
+          report = {
+            id: reportId,
+            type: 'monthly',
+            title: '月度监管分析报告',
+            generateTime: timeStr,
+            summary: '本月回收总量45,680kg，同比增长12%，分类准确率92.5%，碳减排1,250kg',
+            data: {
+              overview: {
+                totalRecycle: 45680,
+                growthRate: 12,
+                accuracy: 92.5,
+                carbonReduction: 1250
+              },
+              regional: [
+                { area: '朝阳区', recycle: 12500, accuracy: 95, trend: '+8%' },
+                { area: '海淀区', recycle: 10200, accuracy: 88, trend: '+5%' },
+                { area: '西城区', recycle: 8900, accuracy: 93, trend: '+15%' },
+                { area: '东城区', recycle: 7800, accuracy: 76, trend: '-3%' },
+                { area: '丰台区', recycle: 6280, accuracy: 91, trend: '+10%' }
+              ],
+              warnings: [
+                { level: 'high', area: '东城区', issue: '分类准确率下降', action: '加强培训' },
+                { level: 'medium', area: '海淀区', issue: '回收量波动', action: '核查数据' }
+              ],
+              suggestions: [
+                '建议加强东城区的垃圾分类培训工作',
+                '朝阳区表现优异，可作为示范区推广经验',
+                '建议对海淀区进行专项数据核查'
+              ]
+            }
+          };
+          break;
+          
+        case 'industry':
+          report = {
+            id: reportId,
+            type: 'industry',
+            title: '产业发展评估报告',
+            generateTime: timeStr,
+            summary: '全市回收企业120家，从业人员3,500人，年产值2.8亿元，产业链完整度85%',
+            data: {
+              overview: {
+                companies: 120,
+                employees: 3500,
+                revenue: 280000000,
+                chainCompleteness: 85
+              },
+              sectors: [
+                { name: '可回收物', companies: 45, revenue: 120000000, growth: '+15%' },
+                { name: '有害垃圾', companies: 28, revenue: 35000000, growth: '+8%' },
+                { name: '厨余垃圾', companies: 32, revenue: 85000000, growth: '+22%' },
+                { name: '其他垃圾', companies: 15, revenue: 40000000, growth: '+5%' }
+              ],
+              topCompanies: [
+                { name: '北京绿色环保有限公司', revenue: 45000000, growth: '+28%' },
+                { name: '首都回收科技集团', revenue: 38000000, growth: '+18%' },
+                { name: '朝阳智能分类公司', revenue: 32000000, growth: '+25%' }
+              ],
+              trends: [
+                '智能化回收设备需求增长显著',
+                '厨余垃圾资源化利用成为新增长点',
+                '产业链上下游整合趋势明显'
+              ]
+            }
+          };
+          break;
+          
+        case 'policy':
+          report = {
+            id: reportId,
+            type: 'policy',
+            title: '政策效果评估报告',
+            generateTime: timeStr,
+            summary: '补贴政策实施6个月，累计发放补贴580万元，带动回收量增长18%，企业参与度89%',
+            data: {
+              overview: {
+                subsidyAmount: 5800000,
+                recycleGrowth: 18,
+                participation: 89,
+                satisfaction: 92
+              },
+              subsidyDistribution: [
+                { area: '朝阳区', amount: 1500000, companies: 35, effect: '优秀' },
+                { area: '海淀区', amount: 1200000, companies: 28, effect: '良好' },
+                { area: '西城区', amount: 980000, companies: 22, effect: '优秀' },
+                { area: '东城区', amount: 850000, companies: 18, effect: '一般' },
+                { area: '丰台区', amount: 1270000, companies: 25, effect: '良好' }
+              ],
+              effectiveness: [
+                { indicator: '回收量增长', target: 15, actual: 18, status: '超额完成' },
+                { indicator: '企业参与度', target: 80, actual: 89, status: '超额完成' },
+                { indicator: '居民满意度', target: 85, actual: 92, status: '超额完成' },
+                { indicator: '成本效益比', target: 1.5, actual: 1.8, status: '超额完成' }
+              ],
+              recommendations: [
+                '建议继续加大补贴力度，特别是对表现优异的区域',
+                '优化补贴发放流程，提高资金使用效率',
+                '加强政策宣传，提高企业和居民的知晓率'
+              ]
+            }
+          };
+          break;
+          
+        default:
+          return;
+      }
+      
+      this.generatedReports.unshift(report);
+      this.currentReport = report;
+      this.isGenerating = false;
+      this.showReportModal = true;
+      
+      // 保存到本地存储
+      this.saveReportsToLocalStorage();
+    }, 1500);
+  }
+  
+  // 保存报告到本地存储
+  saveReportsToLocalStorage(): void {
+    localStorage.setItem('aiReports', JSON.stringify(this.generatedReports));
+  }
+  
+  // 从本地存储加载报告
+  loadReportsFromLocalStorage(): void {
+    const saved = localStorage.getItem('aiReports');
+    if (saved) {
+      this.generatedReports = JSON.parse(saved);
+    }
+  }
+  
+  // 查看报告
+  viewReport(report: GeneratedReport): void {
+    this.currentReport = report;
+    this.showReportModal = true;
+  }
+  
+  // 关闭报告弹窗
+  closeReportModal(): void {
+    this.showReportModal = false;
+  }
+  
+  // 删除报告
+  deleteReport(reportId: string): void {
+    if (confirm('确定要删除这份报告吗？')) {
+      this.generatedReports = this.generatedReports.filter(r => r.id !== reportId);
+      this.saveReportsToLocalStorage();
+    }
+  }
+  
+  // 导出报告
+  exportReport(report: GeneratedReport): void {
+    const dataStr = JSON.stringify(report, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${report.title}_${report.id}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
   }
 
   getRiskClass(risk: string): string {
     return `risk-${risk}`;
   }
 
-  constructor() {}
+  constructor() {
+    this.loadReportsFromLocalStorage();
+  }
 }

src/app/government/government-center/government-center.html

@@ -69,14 +69,63 @@
       </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 *ngIf="activeTab === 'region'" class="region-section">
+        <div class="region-header">
+          <h3>辖区列表 ({{ regions.length }})</h3>
+          <button class="add-btn" (click)="openAddRegionModal()">
+            <i class="fas fa-plus"></i> 添加辖区
+          </button>
+        </div>
+        
+        <div class="region-list">
+          <div *ngFor="let region of regions" class="region-card" (click)="manageRegion(region)">
+            <div class="region-card-header">
+              <div class="region-title">
+                <h4>{{ region.name }}</h4>
+                <span class="region-id">ID: {{ region.id }}</span>
+              </div>
+              <span class="region-status" [class.active]="region.status === 'active'">
+                {{ region.status === 'active' ? '运行中' : '已停用' }}
+              </span>
+            </div>
+            
+            <div class="region-card-body">
+              <div class="region-detail">
+                <i class="fas fa-user-tie"></i>
+                <span class="detail-label">负责人:</span>
+                <span class="detail-value">{{ region.manager }}</span>
+              </div>
+              <div class="region-detail">
+                <i class="fas fa-phone"></i>
+                <span class="detail-label">联系方式:</span>
+                <span class="detail-value">{{ region.contact }}</span>
+              </div>
+              <div class="region-detail">
+                <i class="fas fa-map-marker-alt"></i>
+                <span class="detail-label">地址:</span>
+                <span class="detail-value">{{ region.address }}</span>
+              </div>
+            </div>
+            
+            <div class="region-card-footer">
+              <div class="stat-item">
+                <i class="fas fa-users"></i>
+                <span>{{ (region.population / 10000).toFixed(1) }}万人</span>
+              </div>
+              <div class="stat-item">
+                <i class="fas fa-store"></i>
+                <span>{{ region.recyclePoints }}个网点</span>
+              </div>
+              <div class="stat-item">
+                <i class="fas fa-check-circle"></i>
+                <span>{{ region.complianceRate }}%合规</span>
+              </div>
+            </div>
+            
+            <div class="region-card-actions">
+              <i class="fas fa-chevron-right"></i>
+            </div>
           </div>
-          <i class="fas fa-chevron-right"></i>
         </div>
       </div>
 
@@ -116,10 +165,25 @@
 
       <!-- 系统设置 -->
       <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 class="setting-item" routerLink="/government/government-center/password-settings">
+          <i class="fas fa-key"></i>
+          <span>修改密码</span>
+          <i class="fas fa-chevron-right"></i>
+        </div>
+        <div class="setting-item" routerLink="/government/government-center/notification-settings">
+          <i class="fas fa-bell"></i>
+          <span>通知设置</span>
+          <i class="fas fa-chevron-right"></i>
+        </div>
+        <div class="setting-item" routerLink="/government/government-center/help-center">
+          <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>
@@ -191,6 +255,172 @@
     </div>
   </div>
 
+  <!-- 辖区详情弹窗 -->
+  <div class="modal-overlay" [class.show]="showRegionModal" (click)="closeRegionModal()">
+    <div class="modal-content region-modal" (click)="$event.stopPropagation()" *ngIf="selectedRegion">
+      <div class="modal-header">
+        <h3 class="modal-title">{{ selectedRegion.name }} - 辖区详情</h3>
+        <button class="close-btn" (click)="closeRegionModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <!-- 基本信息 -->
+        <div class="detail-section">
+          <h4 class="section-title">📋 基本信息</h4>
+          <div class="detail-grid">
+            <div class="detail-row">
+              <span class="label">辖区ID:</span>
+              <span class="value">{{ selectedRegion.id }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">辖区名称:</span>
+              <span class="value">{{ selectedRegion.name }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">负责人:</span>
+              <span class="value">{{ selectedRegion.manager }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">联系方式:</span>
+              <span class="value">{{ selectedRegion.contact }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">详细地址:</span>
+              <span class="value">{{ selectedRegion.address }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">运行状态:</span>
+              <span class="value status" [class.active]="selectedRegion.status === 'active'">
+                {{ selectedRegion.status === 'active' ? '运行中' : '已停用' }}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 数据统计 -->
+        <div class="detail-section">
+          <h4 class="section-title">📊 数据统计</h4>
+          <div class="stats-grid">
+            <div class="stats-card">
+              <div class="stats-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <i class="fas fa-users"></i>
+              </div>
+              <div class="stats-content">
+                <div class="stats-value">{{ (selectedRegion.population / 10000).toFixed(1) }}</div>
+                <div class="stats-label">常住人口(万)</div>
+              </div>
+            </div>
+            <div class="stats-card">
+              <div class="stats-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                <i class="fas fa-store"></i>
+              </div>
+              <div class="stats-content">
+                <div class="stats-value">{{ selectedRegion.recyclePoints }}</div>
+                <div class="stats-label">回收网点(个)</div>
+              </div>
+            </div>
+            <div class="stats-card">
+              <div class="stats-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                <i class="fas fa-check-circle"></i>
+              </div>
+              <div class="stats-content">
+                <div class="stats-value">{{ selectedRegion.complianceRate }}%</div>
+                <div class="stats-label">合规率</div>
+              </div>
+            </div>
+            <div class="stats-card">
+              <div class="stats-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+                <i class="fas fa-recycle"></i>
+              </div>
+              <div class="stats-content">
+                <div class="stats-value">{{ (selectedRegion.monthlyVolume / 1000).toFixed(1) }}</div>
+                <div class="stats-label">月回收量(吨)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-danger" (click)="deleteRegion(selectedRegion)">
+          <i class="fas fa-trash"></i> 删除
+        </button>
+        <button class="btn btn-warning" (click)="toggleRegionStatus(selectedRegion)">
+          <i class="fas" [class.fa-pause]="selectedRegion.status === 'active'" [class.fa-play]="selectedRegion.status === 'inactive'"></i>
+          {{ selectedRegion.status === 'active' ? '停用' : '启用' }}
+        </button>
+        <button class="btn btn-primary" (click)="editRegion(selectedRegion)">
+          <i class="fas fa-edit"></i> 编辑
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 添加/编辑辖区弹窗 -->
+  <div class="modal-overlay" [class.show]="showAddRegionModal" (click)="closeAddRegionModal()">
+    <div class="modal-content add-region-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">{{ regionForm.id ? '编辑辖区' : '添加辖区' }}</h3>
+        <button class="close-btn" (click)="closeAddRegionModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-grid">
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-map"></i> 辖区名称 <span class="required">*</span></label>
+            <input type="text" class="form-input" [(ngModel)]="regionForm.name" placeholder="请输入辖区名称">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-user-tie"></i> 负责人 <span class="required">*</span></label>
+            <input type="text" class="form-input" [(ngModel)]="regionForm.manager" placeholder="请输入负责人姓名">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-phone"></i> 联系方式 <span class="required">*</span></label>
+            <input type="text" class="form-input" [(ngModel)]="regionForm.contact" placeholder="请输入联系方式">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-toggle-on"></i> 运行状态</label>
+            <select class="form-input" [(ngModel)]="regionForm.status">
+              <option value="active">运行中</option>
+              <option value="inactive">已停用</option>
+            </select>
+          </div>
+          
+          <div class="form-group full-width">
+            <label class="form-label"><i class="fas fa-map-marker-alt"></i> 详细地址</label>
+            <input type="text" class="form-input" [(ngModel)]="regionForm.address" placeholder="请输入详细地址">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-users"></i> 常住人口</label>
+            <input type="number" class="form-input" [(ngModel)]="regionForm.population" placeholder="请输入常住人口">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-store"></i> 回收网点数</label>
+            <input type="number" class="form-input" [(ngModel)]="regionForm.recyclePoints" placeholder="请输入回收网点数">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-check-circle"></i> 合规率 (%)</label>
+            <input type="number" class="form-input" [(ngModel)]="regionForm.complianceRate" placeholder="0-100" min="0" max="100">
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label"><i class="fas fa-recycle"></i> 月回收量 (kg)</label>
+            <input type="number" class="form-input" [(ngModel)]="regionForm.monthlyVolume" placeholder="请输入月回收量">
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-cancel" (click)="closeAddRegionModal()">取消</button>
+        <button class="btn btn-save" (click)="updateRegion()">
+          <i class="fas fa-save"></i> {{ regionForm.id ? '保存' : '添加' }}
+        </button>
+      </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" routerLink="/government/subsidy-management"><div class="nav-icon">💰</div><div>补贴</div></div>

src/app/government/government-center/government-center.scss

@@ -111,6 +111,423 @@
   &:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
 }
 
+// ========== 辖区管理新样式 ==========
+.region-section {
+  margin-top: 20px;
+}
+
+.region-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--dark-text);
+  }
+
+  .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;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
+    }
+
+    i {
+      margin-right: 6px;
+    }
+  }
+}
+
+.region-card {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+  border-left: 4px solid var(--primary-color);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.region-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.region-title {
+  h4 {
+    margin: 0 0 4px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--dark-text);
+  }
+
+  .region-id {
+    font-size: 12px;
+    color: var(--light-text);
+    background: #f0f0f0;
+    padding: 2px 8px;
+    border-radius: 10px;
+  }
+}
+
+.region-status {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #ffe6e6;
+  color: #f44336;
+
+  &.active {
+    background: #e8f5e9;
+    color: var(--primary-dark);
+  }
+}
+
+.region-card-body {
+  margin-bottom: 12px;
+}
+
+.region-detail {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 13px;
+
+  i {
+    width: 18px;
+    color: var(--primary-color);
+    font-size: 14px;
+  }
+
+  .detail-label {
+    color: var(--light-text);
+    min-width: 70px;
+  }
+
+  .detail-value {
+    color: var(--dark-text);
+    font-weight: 500;
+  }
+}
+
+.region-card-footer {
+  display: flex;
+  gap: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+
+  .stat-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--dark-text);
+
+    i {
+      color: var(--primary-color);
+    }
+  }
+}
+
+.region-card-actions {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  i {
+    color: var(--light-text);
+    font-size: 20px;
+    transition: all 0.3s;
+  }
+}
+
+.region-card:hover .region-card-actions i {
+  color: var(--primary-color);
+  transform: translateX(4px);
+}
+
+// 辖区详情弹窗
+.region-modal {
+  max-width: 800px;
+
+  .detail-section {
+    margin-bottom: 24px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--dark-text);
+      margin: 0 0 16px 0;
+      padding-bottom: 8px;
+      border-bottom: 2px solid var(--primary-color);
+    }
+  }
+
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .detail-row {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 8px;
+
+    .label {
+      font-size: 13px;
+      color: var(--light-text);
+      min-width: 90px;
+      font-weight: 500;
+    }
+
+    .value {
+      font-size: 14px;
+      color: var(--dark-text);
+      font-weight: 600;
+
+      &.status {
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        background: #ffe6e6;
+        color: #f44336;
+
+        &.active {
+          background: #e8f5e9;
+          color: var(--primary-dark);
+        }
+      }
+    }
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  .stats-card {
+    background: white;
+    border-radius: 12px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .stats-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 20px;
+  }
+
+  .stats-content {
+    flex: 1;
+
+    .stats-value {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--dark-text);
+      line-height: 1;
+      margin-bottom: 4px;
+    }
+
+    .stats-label {
+      font-size: 12px;
+      color: var(--light-text);
+    }
+  }
+
+  .modal-footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+
+    .btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      border: none;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      i {
+        margin-right: 6px;
+      }
+
+      &.btn-danger {
+        background: #f44336;
+        color: white;
+
+        &:hover {
+          background: #d32f2f;
+        }
+      }
+
+      &.btn-warning {
+        background: #ff9800;
+        color: white;
+
+        &:hover {
+          background: #f57c00;
+        }
+      }
+
+      &.btn-primary {
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+        color: white;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+        }
+      }
+    }
+  }
+}
+
+// 添加/编辑辖区弹窗
+.add-region-modal {
+  max-width: 700px;
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
+    .form-group {
+      &.full-width {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+
+  .form-group {
+    .form-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--dark-text);
+
+      i {
+        color: var(--primary-color);
+      }
+
+      .required {
+        color: #f44336;
+        margin-left: 2px;
+      }
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 10px 14px;
+      border: 2px solid #e0e0e0;
+      border-radius: 8px;
+      font-size: 14px;
+      transition: all 0.3s;
+
+      &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
+      }
+
+      &::placeholder {
+        color: #bbb;
+      }
+    }
+  }
+
+  .modal-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+
+    .btn {
+      padding: 10px 24px;
+      border-radius: 8px;
+      border: none;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &.btn-cancel {
+        background: #f5f5f5;
+        color: #666;
+
+        &:hover {
+          background: #e0e0e0;
+        }
+      }
+
+      &.btn-save {
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+        color: white;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+        }
+
+        i {
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}
+
+// 旧样式（保持兼容）
 .region-item {
   display: flex;
   justify-content: space-between;

src/app/government/government-center/government-center.ts

@@ -13,6 +13,19 @@ interface GovernmentInfo {
   avatar: string;
 }
 
+interface Region {
+  id: string;
+  name: string;
+  manager: string;
+  contact: string;
+  status: 'active' | 'inactive';
+  address: string;
+  population: number;
+  recyclePoints: number;
+  complianceRate: number;
+  monthlyVolume: number;
+}
+
 @Component({
   selector: 'app-government-center',
   standalone: true,
@@ -24,6 +37,10 @@ export class GovernmentCenter {
   activeTab: 'region' | 'user' | 'notice' | 'log' | 'settings' | 'profile' = 'profile';
   showProfileModal = false;
   showAvatarModal = false;
+  showRegionModal = false;
+  showAddRegionModal = false;
+  selectedRegion: Region | null = null;
+  regionForm: Partial<Region> = {};
   
   // 政府信息
   governmentInfo: GovernmentInfo = {
@@ -36,10 +53,67 @@ export class GovernmentCenter {
     avatar: ''
   };
 
-  regions = [
-    { name: '朝阳区', manager: '张主任', contact: '138****1234', status: 'active' },
-    { name: '海淀区', manager: '李主任', contact: '139****5678', status: 'active' },
-    { name: '西城区', manager: '王主任', contact: '137****9012', status: 'active' }
+  regions: Region[] = [
+    { 
+      id: 'R001', 
+      name: '朝阳区', 
+      manager: '张主任', 
+      contact: '138****1234', 
+      status: 'active' as const,
+      address: '北京市朝阳区朝外大街',
+      population: 350000,
+      recyclePoints: 45,
+      complianceRate: 95,
+      monthlyVolume: 12500
+    },
+    { 
+      id: 'R002', 
+      name: '海淀区', 
+      manager: '李主任', 
+      contact: '139****5678', 
+      status: 'active' as const,
+      address: '北京市海淀区中关村大街',
+      population: 320000,
+      recyclePoints: 38,
+      complianceRate: 88,
+      monthlyVolume: 10200
+    },
+    { 
+      id: 'R003', 
+      name: '西城区', 
+      manager: '王主任', 
+      contact: '137****9012', 
+      status: 'active' as const,
+      address: '北京市西城区西单北大街',
+      population: 280000,
+      recyclePoints: 32,
+      complianceRate: 93,
+      monthlyVolume: 8900
+    },
+    { 
+      id: 'R004', 
+      name: '东城区', 
+      manager: '赵主任', 
+      contact: '136****3456', 
+      status: 'active' as const,
+      address: '北京市东城区东单北大街',
+      population: 260000,
+      recyclePoints: 28,
+      complianceRate: 76,
+      monthlyVolume: 7800
+    },
+    { 
+      id: 'R005', 
+      name: '丰台区', 
+      manager: '刘主任', 
+      contact: '135****7890', 
+      status: 'inactive' as const,
+      address: '北京市丰台区丰台路',
+      population: 290000,
+      recyclePoints: 25,
+      complianceRate: 91,
+      monthlyVolume: 6280
+    }
   ];
 
   users = [
@@ -62,8 +136,103 @@ export class GovernmentCenter {
     this.activeTab = tab;
   }
 
-  manageRegion(region: any): void {
-    alert(`管理辖区: ${region.name}`);
+  // 打开辖区详情
+  manageRegion(region: Region): void {
+    this.selectedRegion = region;
+    this.showRegionModal = true;
+  }
+  
+  // 关闭辖区详情
+  closeRegionModal(): void {
+    this.showRegionModal = false;
+    this.selectedRegion = null;
+  }
+  
+  // 打开添加辖区弹窗
+  openAddRegionModal(): void {
+    this.regionForm = {
+      status: 'active',
+      population: 0,
+      recyclePoints: 0,
+      complianceRate: 0,
+      monthlyVolume: 0
+    };
+    this.showAddRegionModal = true;
+  }
+  
+  // 关闭添加辖区弹窗
+  closeAddRegionModal(): void {
+    this.showAddRegionModal = false;
+    this.regionForm = {};
+  }
+  
+  // 添加辖区
+  addRegion(): void {
+    if (!this.regionForm.name || !this.regionForm.manager || !this.regionForm.contact) {
+      alert('请填写必填项：辖区名称、负责人、联系方式');
+      return;
+    }
+    
+    const newRegion: Region = {
+      id: 'R' + String(this.regions.length + 1).padStart(3, '0'),
+      name: this.regionForm.name!,
+      manager: this.regionForm.manager!,
+      contact: this.regionForm.contact!,
+      status: this.regionForm.status || 'active',
+      address: this.regionForm.address || '',
+      population: this.regionForm.population || 0,
+      recyclePoints: this.regionForm.recyclePoints || 0,
+      complianceRate: this.regionForm.complianceRate || 0,
+      monthlyVolume: this.regionForm.monthlyVolume || 0
+    };
+    
+    this.regions.push(newRegion);
+    alert(`辖区 ${newRegion.name} 添加成功！`);
+    this.closeAddRegionModal();
+  }
+  
+  // 编辑辖区
+  editRegion(region: Region): void {
+    this.regionForm = { ...region };
+    this.closeRegionModal();
+    this.showAddRegionModal = true;
+  }
+  
+  // 更新辖区
+  updateRegion(): void {
+    if (!this.regionForm.id) {
+      this.addRegion();
+      return;
+    }
+    
+    const index = this.regions.findIndex(r => r.id === this.regionForm.id);
+    if (index !== -1) {
+      this.regions[index] = {
+        ...this.regions[index],
+        ...this.regionForm as Region
+      };
+      alert('辖区信息更新成功！');
+      this.closeAddRegionModal();
+    }
+  }
+  
+  // 删除辖区
+  deleteRegion(region: Region): void {
+    if (confirm(`确定要删除辖区 ${region.name} 吗？此操作不可恢复！`)) {
+      const index = this.regions.findIndex(r => r.id === region.id);
+      if (index !== -1) {
+        this.regions.splice(index, 1);
+        alert(`辖区 ${region.name} 已删除`);
+        this.closeRegionModal();
+      }
+    }
+  }
+  
+  // 切换辖区状态
+  toggleRegionStatus(region: Region): void {
+    region.status = region.status === 'active' ? 'inactive' : 'active';
+    const statusText = region.status === 'active' ? '启用' : '停用';
+    alert(`辖区 ${region.name} 已${statusText}`);
   }
 
   manageUser(user: any): void {

src/app/government/government-center/help-center/help-center.html

@@ -0,0 +1,234 @@
+<div class="help-center-container">
+  <!-- 顶部导航 -->
+  <header class="header">
+    <div class="header-content">
+      <button class="back-btn" (click)="goBack()">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <h1 class="page-title">帮助中心</h1>
+      <div class="header-spacer"></div>
+    </div>
+  </header>
+
+  <!-- 主要内容 -->
+  <main class="content">
+    <div class="container">
+      <!-- 搜索框 -->
+      <div class="search-section">
+        <div class="search-wrapper">
+          <i class="fas fa-search"></i>
+          <input type="text" placeholder="搜索帮助文档..." [(ngModel)]="searchQuery">
+        </div>
+      </div>
+
+      <!-- 标签页 -->
+      <div class="tabs-section">
+        <div class="tabs">
+          <div class="tab" [class.active]="activeTab === 'faq'" (click)="switchTab('faq')">
+            <i class="fas fa-list-ul"></i>
+            <span>常见问题</span>
+          </div>
+          <div class="tab" [class.active]="activeTab === 'tutorial'" (click)="switchTab('tutorial')">
+            <i class="fas fa-graduation-cap"></i>
+            <span>使用教程</span>
+          </div>
+          <div class="tab" [class.active]="activeTab === 'contact'" (click)="switchTab('contact')">
+            <i class="fas fa-headset"></i>
+            <span>联系我们</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 常见问题 -->
+      <div class="content-section" *ngIf="activeTab === 'faq'">
+        <div class="faq-list">
+          <div class="faq-item" *ngFor="let faq of filteredFaqs; let i = index">
+            <div class="faq-question" (click)="toggleFaq(faq)">
+              <i class="fas" [class.fa-chevron-right]="!faq.expanded" [class.fa-chevron-down]="faq.expanded"></i>
+              <span class="question-number">{{ i + 1 }}.</span>
+              <span class="question-text">{{ faq.question }}</span>
+            </div>
+            <div class="faq-answer" [class.show]="faq.expanded">
+              <p>{{ faq.answer }}</p>
+            </div>
+          </div>
+          
+          <div class="no-results" *ngIf="filteredFaqs.length === 0">
+            <i class="fas fa-search"></i>
+            <p>未找到相关问题</p>
+            <span>尝试使用其他关键词搜索</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 使用教程 -->
+      <div class="content-section" *ngIf="activeTab === 'tutorial'">
+        <div class="tutorial-grid">
+          <div class="tutorial-card" *ngFor="let tutorial of tutorials">
+            <div class="tutorial-icon">
+              <i [class]="tutorial.icon"></i>
+            </div>
+            <div class="tutorial-info">
+              <h3>{{ tutorial.title }}</h3>
+              <p>{{ tutorial.description }}</p>
+              <div class="tutorial-meta">
+                <span class="meta-item">
+                  <i class="fas fa-clock"></i>
+                  {{ tutorial.duration }}
+                </span>
+                <span class="meta-item level" [class.beginner]="tutorial.level === '入门'" 
+                      [class.intermediate]="tutorial.level === '中级'"
+                      [class.advanced]="tutorial.level === '进阶'">
+                  <i class="fas fa-signal"></i>
+                  {{ tutorial.level }}
+                </span>
+              </div>
+              <button class="btn-view" (click)="openVideoModal(tutorial)">
+                <i class="fas fa-play"></i> 观看视频
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 联系我们 -->
+      <div class="content-section" *ngIf="activeTab === 'contact'">
+        <div class="contact-grid">
+          <div class="contact-card phone">
+            <div class="card-icon">
+              <i class="fas fa-phone-alt"></i>
+            </div>
+            <h3>客服热线</h3>
+            <p class="contact-value">400-123-4567</p>
+            <span class="contact-time">工作日 9:00-18:00</span>
+            <button class="btn-contact">
+              <i class="fas fa-phone"></i> 立即拨打
+            </button>
+          </div>
+          
+          <div class="contact-card email">
+            <div class="card-icon">
+              <i class="fas fa-envelope"></i>
+            </div>
+            <h3>邮箱支持</h3>
+            <p class="contact-value">support@zhihui-gov.com</p>
+            <span class="contact-time">24小时内回复</span>
+            <button class="btn-contact">
+              <i class="fas fa-paper-plane"></i> 发送邮件
+            </button>
+          </div>
+          
+          <div class="contact-card chat">
+            <div class="card-icon">
+              <i class="fas fa-comments"></i>
+            </div>
+            <h3>在线客服</h3>
+            <p class="contact-value">即时沟通</p>
+            <span class="contact-time">工作日 9:00-18:00</span>
+            <button class="btn-contact primary">
+              <i class="fas fa-comment-dots"></i> 立即咨询
+            </button>
+          </div>
+          
+          <div class="contact-card location">
+            <div class="card-icon">
+              <i class="fas fa-map-marker-alt"></i>
+            </div>
+            <h3>办公地址</h3>
+            <p class="contact-value">北京市朝阳区XXX大厦15层</p>
+            <span class="contact-time">工作日 9:00-17:30</span>
+            <button class="btn-contact">
+              <i class="fas fa-map"></i> 查看地图
+            </button>
+          </div>
+        </div>
+        
+        <!-- 反馈表单 -->
+        <div class="feedback-section">
+          <h3>
+            <i class="fas fa-comment-medical"></i>
+            问题反馈
+          </h3>
+          <p class="feedback-desc">如果您有任何问题或建议，请填写下面的表单，我们会尽快回复您。</p>
+          <form class="feedback-form">
+            <div class="form-row">
+              <div class="form-group">
+                <label>姓名</label>
+                <input type="text" placeholder="请输入您的姓名">
+              </div>
+              <div class="form-group">
+                <label>联系方式</label>
+                <input type="text" placeholder="手机号或邮箱">
+              </div>
+            </div>
+            <div class="form-group">
+              <label>问题类型</label>
+              <select>
+                <option>功能咨询</option>
+                <option>技术问题</option>
+                <option>功能建议</option>
+                <option>其他</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>详细描述</label>
+              <textarea rows="5" placeholder="请详细描述您的问题或建议..."></textarea>
+            </div>
+            <button type="submit" class="btn-submit">
+              <i class="fas fa-paper-plane"></i> 提交反馈
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+  
+  <!-- 视频播放弹窗 -->
+  <div class="video-modal-overlay" [class.show]="showVideoModal" (click)="closeVideoModal()">
+    <div class="video-modal-content" (click)="$event.stopPropagation()">
+      <div class="video-modal-header">
+        <h3>{{ selectedVideo?.title }}</h3>
+        <button class="video-modal-close" (click)="closeVideoModal()">×</button>
+      </div>
+      <div class="video-modal-body">
+        <div class="video-preview">
+          <div class="douyin-icon">
+            <i class="fas fa-play-circle"></i>
+          </div>
+          <div class="preview-overlay">
+            <p class="preview-title">{{ selectedVideo?.title }}</p>
+            <p class="preview-desc">{{ selectedVideo?.description }}</p>
+          </div>
+        </div>
+        <div class="video-info">
+          <div class="video-meta">
+            <span class="meta-badge">
+              <i class="fas fa-clock"></i> {{ selectedVideo?.duration }}
+            </span>
+            <span class="meta-badge level" 
+                  [class.beginner]="selectedVideo?.level === '入门'"
+                  [class.intermediate]="selectedVideo?.level === '中级'"
+                  [class.advanced]="selectedVideo?.level === '进阶'">
+              <i class="fas fa-signal"></i> {{ selectedVideo?.level }}
+            </span>
+          </div>
+          <div class="video-actions">
+            <a [href]="selectedVideo?.videoUrl" target="_blank" class="btn-watch-douyin">
+              <i class="fas fa-external-link-alt"></i>
+              在抖音中观看
+            </a>
+            <button class="btn-copy-link" (click)="copyVideoLink()">
+              <i class="fas fa-copy"></i>
+              复制链接
+            </button>
+          </div>
+          <div class="video-tips">
+            <i class="fas fa-info-circle"></i>
+            <span>点击"在抖音中观看"按钮将在新窗口打开抖音，如已安装抖音APP将自动打开</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

src/app/government/government-center/help-center/help-center.scss

@@ -0,0 +1,928 @@
+.help-center-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  padding-bottom: 20px;
+}
+
+// 顶部导航
+.header {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  
+  .header-content {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: #f5f7fa;
+      color: #3498db;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        font-size: 18px;
+      }
+      
+      &:hover {
+        background: #667eea;
+        color: white;
+      }
+    }
+    
+    .page-title {
+      flex: 1;
+      text-align: center;
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .header-spacer {
+      width: 40px;
+    }
+  }
+}
+
+// 主要内容
+.content {
+  padding: 30px 20px;
+  
+  .container {
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+}
+
+// 搜索区域
+.search-section {
+  margin-bottom: 24px;
+  
+  .search-wrapper {
+    position: relative;
+    max-width: 600px;
+    margin: 0 auto;
+    
+    i {
+      position: absolute;
+      left: 18px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #999;
+      font-size: 18px;
+    }
+    
+    input {
+      width: 100%;
+      padding: 16px 20px 16px 52px;
+      border: none;
+      border-radius: 50px;
+      font-size: 15px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s;
+      
+      &:focus {
+        outline: none;
+        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
+      }
+      
+      &::placeholder {
+        color: #bbb;
+      }
+    }
+  }
+}
+
+// 标签页
+.tabs-section {
+  margin-bottom: 30px;
+  
+  .tabs {
+    display: flex;
+    gap: 12px;
+    background: white;
+    padding: 8px;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    
+    .tab {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 14px 20px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 15px;
+      font-weight: 600;
+      color: #666;
+      
+      i {
+        font-size: 16px;
+      }
+      
+      &:hover {
+        background: #f5f7fa;
+        color: #3498db;
+      }
+      
+      &.active {
+        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+        color: white;
+        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+      }
+    }
+  }
+}
+
+// 内容区域
+.content-section {
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+// FAQ列表
+.faq-list {
+  .faq-item {
+    margin-bottom: 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s;
+    
+    &:hover {
+      border-color: #3498db;
+      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
+    }
+    
+    .faq-question {
+      padding: 20px;
+      background: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-weight: 600;
+      color: #333;
+      font-size: 15px;
+      transition: all 0.3s;
+      
+      i {
+        color: #3498db;
+        font-size: 14px;
+        transition: transform 0.3s;
+      }
+      
+      .question-number {
+        color: #3498db;
+        font-weight: 700;
+      }
+      
+      .question-text {
+        flex: 1;
+      }
+      
+      &:hover {
+        background: linear-gradient(135deg, #f0f0f0 0%, #e8f0f7 100%);
+      }
+    }
+    
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s, padding 0.3s;
+      padding: 0 20px;
+      background: white;
+      
+      &.show {
+        max-height: 500px;
+        padding: 20px;
+        border-top: 2px solid #f0f0f0;
+      }
+      
+      p {
+        margin: 0;
+        line-height: 1.8;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+  
+  .no-results {
+    text-align: center;
+    padding: 60px 20px;
+    
+    i {
+      font-size: 64px;
+      color: #ddd;
+      margin-bottom: 16px;
+    }
+    
+    p {
+      font-size: 18px;
+      color: #999;
+      margin: 0 0 8px 0;
+    }
+    
+    span {
+      font-size: 14px;
+      color: #bbb;
+    }
+  }
+}
+
+// 教程网格
+.tutorial-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+.tutorial-card {
+  background: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
+  border-radius: 16px;
+  padding: 24px;
+  display: flex;
+  gap: 20px;
+  transition: all 0.3s;
+  border: 2px solid transparent;
+  
+  &:hover {
+    border-color: #3498db;
+    background: white;
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.15);
+  }
+  
+  .tutorial-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 32px;
+    flex-shrink: 0;
+  }
+  
+  .tutorial-info {
+    flex: 1;
+    
+    h3 {
+      margin: 0 0 8px 0;
+      font-size: 17px;
+      color: #333;
+    }
+    
+    p {
+      margin: 0 0 12px 0;
+      font-size: 13px;
+      color: #999;
+      line-height: 1.6;
+    }
+    
+    .tutorial-meta {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 16px;
+      
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        color: #666;
+        padding: 4px 10px;
+        background: white;
+        border-radius: 6px;
+        
+        i {
+          font-size: 11px;
+        }
+        
+        &.level {
+          font-weight: 600;
+          
+          &.beginner {
+            color: #27ae60;
+            background: #e8f5e9;
+          }
+          
+          &.intermediate {
+            color: #f39c12;
+            background: #fff3e0;
+          }
+          
+          &.advanced {
+            color: #e74c3c;
+            background: #ffebee;
+          }
+        }
+      }
+    }
+    
+    .btn-view {
+      padding: 8px 16px;
+      border: 2px solid #3498db;
+      background: transparent;
+      color: #3498db;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        margin-right: 6px;
+        font-size: 11px;
+      }
+      
+      &:hover {
+        background: #3498db;
+        color: white;
+      }
+    }
+  }
+}
+
+// 联系我们网格
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 40px;
+}
+
+.contact-card {
+  background: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
+  border-radius: 16px;
+  padding: 32px;
+  text-align: center;
+  transition: all 0.3s;
+  border: 2px solid transparent;
+  
+  &:hover {
+    border-color: #3498db;
+    background: white;
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.15);
+  }
+  
+  .card-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 32px;
+    margin: 0 auto 20px;
+  }
+  
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 18px;
+    color: #333;
+  }
+  
+  .contact-value {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    color: #3498db;
+    font-weight: 600;
+  }
+  
+  .contact-time {
+    display: block;
+    font-size: 12px;
+    color: #999;
+    margin-bottom: 20px;
+  }
+  
+  .btn-contact {
+    padding: 10px 24px;
+    border: 2px solid #3498db;
+    background: transparent;
+    color: #3498db;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    i {
+      margin-right: 6px;
+    }
+    
+    &:hover {
+      background: #3498db;
+      color: white;
+    }
+    
+    &.primary {
+      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+      color: white;
+      border: none;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+      }
+    }
+  }
+}
+
+// 反馈表单
+.feedback-section {
+  background: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
+  border-radius: 16px;
+  padding: 32px;
+  
+  h3 {
+    margin: 0 0 8px 0;
+    font-size: 20px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    
+    i {
+      color: #3498db;
+    }
+  }
+  
+  .feedback-desc {
+    margin: 0 0 24px 0;
+    color: #999;
+    font-size: 14px;
+  }
+  
+  .feedback-form {
+    .form-row {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+    }
+    
+    .form-group {
+      margin-bottom: 20px;
+      
+      label {
+        display: block;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 8px;
+      }
+      
+      input,
+      select,
+      textarea {
+        width: 100%;
+        padding: 12px 16px;
+        border: 2px solid #e0e0e0;
+        border-radius: 10px;
+        font-size: 14px;
+        transition: all 0.3s;
+        box-sizing: border-box;
+        font-family: inherit;
+        
+      &:focus {
+        outline: none;
+        border-color: #3498db;
+        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
+      }
+        
+        &::placeholder {
+          color: #bbb;
+        }
+      }
+      
+      textarea {
+        resize: vertical;
+      }
+    }
+    
+    .btn-submit {
+      width: 100%;
+      padding: 14px;
+      border: none;
+      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+      color: white;
+      border-radius: 10px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        margin-right: 8px;
+      }
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+      }
+    }
+  }
+}
+
+// 视频播放弹窗
+.video-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+  z-index: 3000;
+  padding: 20px;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.video-modal-content {
+  background: white;
+  border-radius: 16px;
+  max-width: 900px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: videoSlideUp 0.4s ease-out;
+}
+
+@keyframes videoSlideUp {
+  from {
+    transform: translateY(50px) scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+.video-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e0e0e0;
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  color: white;
+  border-radius: 16px 16px 0 0;
+  
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  
+  .video-modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    font-size: 28px;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.video-modal-body {
+  padding: 0;
+}
+
+.video-preview {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  
+  .douyin-icon {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    animation: pulse 2s infinite;
+    
+    i {
+      font-size: 64px;
+      color: white;
+      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+    }
+  }
+  
+  .preview-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 30px 24px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    color: white;
+    
+    .preview-title {
+      margin: 0 0 8px 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+    
+    .preview-desc {
+      margin: 0;
+      font-size: 14px;
+      opacity: 0.9;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+.video-info {
+  padding: 24px;
+  
+  .video-meta {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 20px;
+    
+    .meta-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 14px;
+      background: #f5f7fa;
+      border-radius: 20px;
+      font-size: 13px;
+      color: #666;
+      font-weight: 500;
+      
+      i {
+        font-size: 12px;
+      }
+      
+      &.level {
+        &.beginner {
+          color: #27ae60;
+          background: #e8f5e9;
+        }
+        
+        &.intermediate {
+          color: #f39c12;
+          background: #fff3e0;
+        }
+        
+        &.advanced {
+          color: #e74c3c;
+          background: #ffebee;
+        }
+      }
+    }
+  }
+  
+  .video-actions {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    
+    .btn-watch-douyin {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 14px 24px;
+      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+      color: white;
+      text-decoration: none;
+      border: none;
+      border-radius: 10px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        font-size: 14px;
+      }
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+      }
+    }
+    
+    .btn-copy-link {
+      padding: 14px 20px;
+      background: white;
+      color: #3498db;
+      border: 2px solid #3498db;
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      
+      i {
+        font-size: 13px;
+      }
+      
+      &:hover {
+        background: #3498db;
+        color: white;
+      }
+    }
+  }
+  
+  .video-tips {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px 16px;
+    background: #fff3e0;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #856404;
+    line-height: 1.6;
+    
+    i {
+      color: #f39c12;
+      font-size: 16px;
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .content {
+    padding: 20px 16px;
+  }
+  
+  .content-section {
+    padding: 24px 20px;
+  }
+  
+  .tabs-section .tabs {
+    .tab {
+      flex-direction: column;
+      padding: 12px 10px;
+      font-size: 13px;
+      
+      span {
+        display: none;
+      }
+      
+      i {
+        font-size: 20px;
+      }
+    }
+  }
+  
+  .tutorial-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .tutorial-card {
+    flex-direction: column;
+    text-align: center;
+    
+    .tutorial-icon {
+      margin: 0 auto;
+    }
+  }
+  
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .feedback-form .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .video-modal-content {
+    margin: 0;
+    border-radius: 12px 12px 0 0;
+    max-height: 95vh;
+  }
+  
+  .video-modal-header {
+    padding: 16px 20px;
+    border-radius: 12px 12px 0 0;
+    
+    h3 {
+      font-size: 16px;
+    }
+  }
+  
+  .video-preview {
+    height: 300px;
+    
+    .douyin-icon {
+      width: 90px;
+      height: 90px;
+      
+      i {
+        font-size: 48px;
+      }
+    }
+    
+    .preview-overlay {
+      padding: 20px;
+      
+      .preview-title {
+        font-size: 16px;
+      }
+      
+      .preview-desc {
+        font-size: 13px;
+      }
+    }
+  }
+  
+  .video-info {
+    padding: 20px;
+    
+    .video-meta {
+      flex-wrap: wrap;
+    }
+    
+    .video-actions {
+      flex-direction: column;
+      
+      .btn-watch-douyin,
+      .btn-copy-link {
+        width: 100%;
+      }
+    }
+    
+    .video-tips {
+      font-size: 12px;
+    }
+  }
+}
+

src/app/government/government-center/help-center/help-center.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HelpCenter } from './help-center';
+
+describe('HelpCenter', () => {
+  let component: HelpCenter;
+  let fixture: ComponentFixture<HelpCenter>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HelpCenter]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HelpCenter);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+

src/app/government/government-center/help-center/help-center.ts

@@ -0,0 +1,166 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-help-center',
+  standalone: true,
+  imports: [CommonModule, RouterModule, FormsModule],
+  templateUrl: './help-center.html',
+  styleUrl: './help-center.scss'
+})
+export class HelpCenter {
+  activeTab: 'faq' | 'tutorial' | 'contact' = 'faq';
+  searchQuery = '';
+  
+  faqs = [
+    {
+      question: '如何查看辖区详细数据？',
+      answer: '点击地图上的区域标记或区域列表中的任意项目，即可查看该辖区的详细数据统计，包括人口、网点、合规率等信息。您也可以通过筛选功能快速定位特定辖区。',
+      expanded: false
+    },
+    {
+      question: '预警通知如何处理？',
+      answer: '在实时预警列表中点击预警项目，查看详情后可以点击"处理"按钮标记为处理中，处理完成后点击"解决"按钮完成流程。系统会自动记录处理时间和处理人。',
+      expanded: false
+    },
+    {
+      question: '如何切换不同的监管视图？',
+      answer: '在区域监管地图上方有三个切换按钮：网点分布、合规状态、政策覆盖，点击即可切换不同的数据视图。每个视图都会展示相应的统计数据和地图分布。',
+      expanded: false
+    },
+    {
+      question: '数据多久更新一次？',
+      answer: '系统数据实时更新，核心指标每5分钟刷新一次，预警信息即时推送。您可以在页面右上角查看最后更新时间。',
+      expanded: false
+    },
+    {
+      question: '如何导出报表数据？',
+      answer: '在数据统计页面点击"导出"按钮，可以选择Excel或PDF格式导出当前查看的数据报表。导出的数据包含当前筛选条件下的所有统计结果。',
+      expanded: false
+    },
+    {
+      question: '如何设置通知提醒？',
+      answer: '进入"系统设置"-"通知设置"，可以自定义接收哪些类型的通知，以及选择邮件、短信等不同的接收方式。',
+      expanded: false
+    },
+    {
+      question: '忘记密码怎么办？',
+      answer: '请联系系统管理员重置密码，或拨打技术支持热线400-123-4567。为了账号安全，密码重置需要验证身份信息。',
+      expanded: false
+    },
+    {
+      question: '如何添加新的监管区域？',
+      answer: '请联系系统管理员提交区域添加申请，需要提供区域名称、范围、人口等基础信息。审核通过后系统会自动添加到监管地图中。',
+      expanded: false
+    }
+  ];
+  
+  tutorials = [
+    {
+      icon: 'fas fa-play-circle',
+      title: '快速入门指南',
+      description: '了解系统基本功能和操作流程，5分钟快速上手',
+      duration: '5分钟',
+      level: '入门',
+      videoUrl: 'https://www.douyin.com/video/7328088546456677675'
+    },
+    {
+      icon: 'fas fa-chart-bar',
+      title: '数据分析教程',
+      description: '学习如何使用数据分析工具进行决策支持',
+      duration: '15分钟',
+      level: '进阶',
+      videoUrl: 'https://www.douyin.com/video/7329876543210123456'
+    },
+    {
+      icon: 'fas fa-bell',
+      title: '预警管理指南',
+      description: '掌握预警处理和问题解决的完整流程',
+      duration: '10分钟',
+      level: '中级',
+      videoUrl: 'https://www.douyin.com/video/7330123456789012345'
+    },
+    {
+      icon: 'fas fa-cog',
+      title: '系统设置说明',
+      description: '个性化配置系统参数和通知偏好',
+      duration: '8分钟',
+      level: '入门',
+      videoUrl: 'https://www.douyin.com/video/7331234567890123456'
+    },
+    {
+      icon: 'fas fa-map-marked-alt',
+      title: '地图功能详解',
+      description: '深入了解监管地图的各项功能和使用技巧',
+      duration: '12分钟',
+      level: '中级',
+      videoUrl: 'https://www.douyin.com/video/7332345678901234567'
+    },
+    {
+      icon: 'fas fa-file-export',
+      title: '报表导出教程',
+      description: '学习如何导出和分析各类数据报表',
+      duration: '10分钟',
+      level: '进阶',
+      videoUrl: 'https://www.douyin.com/video/7333456789012345678'
+    }
+  ];
+  
+  showVideoModal = false;
+  selectedVideo: any = null;
+  
+  constructor(private router: Router) {}
+  
+  // 切换标签页
+  switchTab(tab: 'faq' | 'tutorial' | 'contact'): void {
+    this.activeTab = tab;
+  }
+  
+  // 切换FAQ展开状态
+  toggleFaq(faq: any): void {
+    faq.expanded = !faq.expanded;
+  }
+  
+  // 获取过滤后的FAQs
+  get filteredFaqs() {
+    if (!this.searchQuery) return this.faqs;
+    
+    const query = this.searchQuery.toLowerCase();
+    return this.faqs.filter(faq => 
+      faq.question.toLowerCase().includes(query) || 
+      faq.answer.toLowerCase().includes(query)
+    );
+  }
+  
+  // 打开视频播放
+  openVideoModal(tutorial: any): void {
+    this.selectedVideo = tutorial;
+    this.showVideoModal = true;
+  }
+  
+  // 关闭视频播放
+  closeVideoModal(): void {
+    this.showVideoModal = false;
+    this.selectedVideo = null;
+  }
+  
+  // 复制视频链接
+  copyVideoLink(): void {
+    if (this.selectedVideo?.videoUrl) {
+      navigator.clipboard.writeText(this.selectedVideo.videoUrl).then(() => {
+        alert('视频链接已复制到剪贴板！');
+      }).catch(err => {
+        console.error('复制失败:', err);
+        alert('复制失败，请手动复制链接');
+      });
+    }
+  }
+  
+  // 返回政务中心
+  goBack(): void {
+    this.router.navigate(['/government/government-center']);
+  }
+}
+

src/app/government/government-center/notification-settings/notification-settings.html

@@ -0,0 +1,114 @@
+<div class="notification-settings-container">
+  <!-- 顶部导航 -->
+  <header class="header">
+    <div class="header-content">
+      <button class="back-btn" (click)="goBack()">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <h1 class="page-title">通知设置</h1>
+      <div class="header-spacer"></div>
+    </div>
+  </header>
+
+  <!-- 主要内容 -->
+  <main class="content">
+    <div class="container">
+      <!-- 系统通知 -->
+      <div class="settings-section">
+        <div class="section-header">
+          <i class="fas fa-desktop"></i>
+          <h2>系统通知</h2>
+        </div>
+        <div class="section-body">
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">预警通知</div>
+              <div class="item-desc">接收高风险、违规事件等预警提醒</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.systemAlerts">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">数据报告</div>
+              <div class="item-desc">每日/每周数据统计报告推送</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.dataReports">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">政策更新</div>
+              <div class="item-desc">政策法规变更通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.policyUpdates">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 邮件通知 -->
+      <div class="settings-section">
+        <div class="section-header">
+          <i class="fas fa-envelope"></i>
+          <h2>邮件通知</h2>
+        </div>
+        <div class="section-body">
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">启用邮件通知</div>
+              <div class="item-desc">通过邮件接收重要通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.emailNotifications">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="form-group" *ngIf="notificationSettings.emailNotifications">
+            <label class="form-label">接收邮箱</label>
+            <input type="email" class="form-input" [(ngModel)]="notificationSettings.email" placeholder="请输入邮箱地址">
+          </div>
+        </div>
+      </div>
+
+      <!-- 短信通知 -->
+      <div class="settings-section">
+        <div class="section-header">
+          <i class="fas fa-mobile-alt"></i>
+          <h2>短信通知</h2>
+        </div>
+        <div class="section-body">
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">启用短信通知</div>
+              <div class="item-desc">通过短信接收紧急通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.smsNotifications">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="form-group" *ngIf="notificationSettings.smsNotifications">
+            <label class="form-label">手机号码</label>
+            <input type="tel" class="form-input" [(ngModel)]="notificationSettings.phone" placeholder="请输入手机号">
+          </div>
+        </div>
+      </div>
+      
+      <!-- 保存按钮 -->
+      <div class="save-actions">
+        <button class="btn btn-cancel" (click)="goBack()">取消</button>
+        <button class="btn btn-primary" (click)="saveNotificationSettings()">
+          <i class="fas fa-save"></i> 保存设置
+        </button>
+      </div>
+    </div>
+  </main>
+</div>
+

src/app/government/government-center/notification-settings/notification-settings.scss

@@ -0,0 +1,292 @@
+.notification-settings-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  padding-bottom: 20px;
+}
+
+// 顶部导航
+.header {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  
+  .header-content {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: #f5f7fa;
+      color: #3498db;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        font-size: 18px;
+      }
+      
+      &:hover {
+        background: #3498db;
+        color: white;
+      }
+    }
+    
+    .page-title {
+      flex: 1;
+      text-align: center;
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .header-spacer {
+      width: 40px;
+    }
+  }
+}
+
+// 主要内容
+.content {
+  padding: 30px 20px;
+  
+  .container {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+}
+
+// 设置区块
+.settings-section {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin-bottom: 24px;
+  
+  .section-header {
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    color: white;
+    padding: 20px 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    i {
+      font-size: 22px;
+    }
+    
+    h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+  
+  .section-body {
+    padding: 24px;
+  }
+}
+
+// 通知项
+.notification-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px;
+  background: linear-gradient(135deg, #f9f9f9 0%, #f5f7fa 100%);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  transition: all 0.3s;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  &:hover {
+    background: linear-gradient(135deg, #f0f0f0 0%, #e8f0f7 100%);
+    transform: translateX(4px);
+  }
+  
+  .item-info {
+    flex: 1;
+    
+    .item-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 6px;
+    }
+    
+    .item-desc {
+      font-size: 13px;
+      color: #999;
+      line-height: 1.5;
+    }
+  }
+}
+
+// 表单组
+.form-group {
+  margin-top: 16px;
+  
+  .form-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+  }
+  
+  .form-input {
+    width: 100%;
+    padding: 14px 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    font-size: 15px;
+    transition: all 0.3s;
+    box-sizing: border-box;
+    
+    &:focus {
+      outline: none;
+      border-color: #3498db;
+      box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
+    }
+    
+    &::placeholder {
+      color: #bbb;
+    }
+  }
+}
+
+// 开关按钮
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 52px;
+  height: 28px;
+  flex-shrink: 0;
+  
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    
+    &:checked + .slider {
+      background-color: #3498db;
+      
+      &:before {
+        transform: translateX(24px);
+      }
+    }
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 28px;
+    
+    &:before {
+      position: absolute;
+      content: "";
+      height: 22px;
+      width: 22px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: .4s;
+      border-radius: 50%;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+// 保存按钮区域
+.save-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  margin-top: 32px;
+  
+  .btn {
+    padding: 14px 36px;
+    border-radius: 10px;
+    border: none;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    i {
+      margin-right: 8px;
+    }
+    
+    &.btn-cancel {
+      background: white;
+      color: #666;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      
+      &:hover {
+        background: #f5f5f5;
+      }
+    }
+    
+    &.btn-primary {
+      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+      color: white;
+      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+      }
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .content {
+    padding: 20px 16px;
+  }
+  
+  .settings-section .section-body {
+    padding: 20px;
+  }
+  
+  .notification-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    
+    .switch {
+      align-self: flex-end;
+    }
+  }
+  
+  .save-actions {
+    flex-direction: column;
+    
+    .btn {
+      width: 100%;
+    }
+  }
+}
+

src/app/government/government-center/notification-settings/notification-settings.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NotificationSettings } from './notification-settings';
+
+describe('NotificationSettings', () => {
+  let component: NotificationSettings;
+  let fixture: ComponentFixture<NotificationSettings>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotificationSettings]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotificationSettings);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+

src/app/government/government-center/notification-settings/notification-settings.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-notification-settings',
+  standalone: true,
+  imports: [CommonModule, RouterModule, FormsModule],
+  templateUrl: './notification-settings.html',
+  styleUrl: './notification-settings.scss'
+})
+export class NotificationSettings implements OnInit {
+  // 通知设置
+  notificationSettings = {
+    systemAlerts: true,
+    dataReports: true,
+    policyUpdates: true,
+    emailNotifications: false,
+    email: '',
+    smsNotifications: false,
+    phone: ''
+  };
+  
+  constructor(private router: Router) {}
+  
+  ngOnInit(): void {
+    // 从本地存储加载通知设置
+    const savedSettings = localStorage.getItem('notificationSettings');
+    if (savedSettings) {
+      this.notificationSettings = JSON.parse(savedSettings);
+    }
+  }
+  
+  // 保存通知设置
+  saveNotificationSettings(): void {
+    if (this.notificationSettings.emailNotifications && !this.notificationSettings.email) {
+      alert('请输入接收邮箱');
+      return;
+    }
+    
+    if (this.notificationSettings.smsNotifications && !this.notificationSettings.phone) {
+      alert('请输入手机号码');
+      return;
+    }
+    
+    // 保存到本地存储
+    localStorage.setItem('notificationSettings', JSON.stringify(this.notificationSettings));
+    alert('通知设置保存成功！');
+  }
+  
+  // 返回政务中心
+  goBack(): void {
+    this.router.navigate(['/government/government-center']);
+  }
+}
+

src/app/government/government-center/password-settings/password-settings.html

@@ -0,0 +1,129 @@
+<div class="password-settings-container">
+  <!-- 顶部导航 -->
+  <header class="header">
+    <div class="header-content">
+      <button class="back-btn" (click)="goBack()">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+      <h1 class="page-title">修改密码</h1>
+      <div class="header-spacer"></div>
+    </div>
+  </header>
+
+  <!-- 主要内容 -->
+  <main class="content">
+    <div class="container">
+      <div class="settings-card">
+        <div class="card-header">
+          <i class="fas fa-key"></i>
+          <h2>修改登录密码</h2>
+        </div>
+        
+        <div class="card-body">
+          <form class="password-form">
+            <div class="form-group">
+              <label class="form-label">
+                <i class="fas fa-lock"></i> 当前密码
+              </label>
+              <div class="password-input-wrapper">
+                <input 
+                  [type]="showOldPassword ? 'text' : 'password'" 
+                  class="form-input" 
+                  [(ngModel)]="passwordForm.oldPassword"
+                  name="oldPassword"
+                  placeholder="请输入当前密码"
+                  autocomplete="current-password">
+                <i class="fas toggle-password" 
+                   [class.fa-eye]="!showOldPassword" 
+                   [class.fa-eye-slash]="showOldPassword"
+                   (click)="showOldPassword = !showOldPassword"></i>
+              </div>
+            </div>
+            
+            <div class="form-group">
+              <label class="form-label">
+                <i class="fas fa-lock"></i> 新密码
+              </label>
+              <div class="password-input-wrapper">
+                <input 
+                  [type]="showNewPassword ? 'text' : 'password'" 
+                  class="form-input" 
+                  [(ngModel)]="passwordForm.newPassword"
+                  name="newPassword"
+                  placeholder="请输入新密码（至少6位）"
+                  autocomplete="new-password">
+                <i class="fas toggle-password" 
+                   [class.fa-eye]="!showNewPassword" 
+                   [class.fa-eye-slash]="showNewPassword"
+                   (click)="showNewPassword = !showNewPassword"></i>
+              </div>
+              <div class="password-strength" *ngIf="passwordForm.newPassword">
+                <div class="strength-bar">
+                  <div class="strength-fill" [style.width.%]="getPasswordStrength()" 
+                       [class.weak]="getPasswordStrength() < 40"
+                       [class.medium]="getPasswordStrength() >= 40 && getPasswordStrength() < 70"
+                       [class.strong]="getPasswordStrength() >= 70"></div>
+                </div>
+                <span class="strength-text">密码强度：{{ getPasswordStrengthText() }}</span>
+              </div>
+            </div>
+            
+            <div class="form-group">
+              <label class="form-label">
+                <i class="fas fa-lock"></i> 确认新密码
+              </label>
+              <div class="password-input-wrapper">
+                <input 
+                  [type]="showConfirmPassword ? 'text' : 'password'" 
+                  class="form-input" 
+                  [(ngModel)]="passwordForm.confirmPassword"
+                  name="confirmPassword"
+                  placeholder="请再次输入新密码"
+                  autocomplete="new-password">
+                <i class="fas toggle-password" 
+                   [class.fa-eye]="!showConfirmPassword" 
+                   [class.fa-eye-slash]="showConfirmPassword"
+                   (click)="showConfirmPassword = !showConfirmPassword"></i>
+              </div>
+            </div>
+            
+            <div class="form-tips">
+              <i class="fas fa-info-circle"></i>
+              <div class="tips-content">
+                <p>密码要求：</p>
+                <ul>
+                  <li>长度至少6位</li>
+                  <li>建议包含字母、数字和符号</li>
+                  <li>不要使用简单密码（如123456）</li>
+                  <li>定期更换密码以保证账号安全</li>
+                </ul>
+              </div>
+            </div>
+            
+            <div class="form-actions">
+              <button type="button" class="btn btn-cancel" (click)="goBack()">取消</button>
+              <button type="button" class="btn btn-primary" (click)="submitPasswordChange()">
+                <i class="fas fa-check"></i> 确认修改
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      
+      <!-- 安全提示 -->
+      <div class="security-tips">
+        <div class="tip-header">
+          <i class="fas fa-shield-alt"></i>
+          <h3>安全提示</h3>
+        </div>
+        <ul>
+          <li>为了您的账号安全，建议定期修改密码</li>
+          <li>不要使用与其他网站相同的密码</li>
+          <li>不要将密码告诉他人或写在容易被看到的地方</li>
+          <li>如发现账号异常，请立即修改密码并联系管理员</li>
+        </ul>
+      </div>
+    </div>
+  </main>
+</div>
+

src/app/government/government-center/password-settings/password-settings.scss

@@ -0,0 +1,331 @@
+.password-settings-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  padding-bottom: 20px;
+}
+
+// 顶部导航
+.header {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  
+  .header-content {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    
+    .back-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: #f5f7fa;
+      color: #667eea;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        font-size: 18px;
+      }
+      
+      &:hover {
+        background: #3498db;
+        color: white;
+      }
+    }
+    
+    .page-title {
+      flex: 1;
+      text-align: center;
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .header-spacer {
+      width: 40px; // 平衡左侧按钮
+    }
+  }
+}
+
+// 主要内容
+.content {
+  padding: 30px 20px;
+  
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+
+// 设置卡片
+.settings-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin-bottom: 24px;
+  
+  .card-header {
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    color: white;
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    i {
+      font-size: 24px;
+    }
+    
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
+  
+  .card-body {
+    padding: 32px;
+  }
+}
+
+// 表单样式
+.password-form {
+  .form-group {
+    margin-bottom: 24px;
+    
+    .form-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 10px;
+      
+      i {
+        color: #3498db;
+        font-size: 14px;
+      }
+    }
+    
+    .password-input-wrapper {
+      position: relative;
+      
+      .form-input {
+        width: 100%;
+        padding: 14px 50px 14px 16px;
+        border: 2px solid #e0e0e0;
+        border-radius: 10px;
+        font-size: 15px;
+        transition: all 0.3s;
+        box-sizing: border-box;
+        
+        &:focus {
+          outline: none;
+          border-color: #3498db;
+          box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
+        }
+        
+        &::placeholder {
+          color: #bbb;
+        }
+      }
+      
+      .toggle-password {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #999;
+        cursor: pointer;
+        font-size: 18px;
+        
+        &:hover {
+          color: #3498db;
+        }
+      }
+    }
+  }
+  
+  .password-strength {
+    margin-top: 10px;
+    
+    .strength-bar {
+      height: 6px;
+      background: #e0e0e0;
+      border-radius: 3px;
+      overflow: hidden;
+      margin-bottom: 6px;
+      
+      .strength-fill {
+        height: 100%;
+        transition: all 0.3s;
+        border-radius: 3px;
+        
+        &.weak {
+          background: #e74c3c;
+        }
+        
+        &.medium {
+          background: #f39c12;
+        }
+        
+        &.strong {
+          background: #27ae60;
+        }
+      }
+    }
+    
+    .strength-text {
+      font-size: 13px;
+      color: #666;
+      font-weight: 500;
+    }
+  }
+  
+  .form-tips {
+    background: linear-gradient(135deg, #e8f4f8 0%, #e8f0f7 100%);
+    padding: 18px;
+    border-radius: 12px;
+    display: flex;
+    gap: 12px;
+    margin-bottom: 24px;
+    
+    i {
+      color: #3498db;
+      font-size: 20px;
+      margin-top: 2px;
+    }
+    
+    .tips-content {
+      flex: 1;
+      
+      p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: #3498db;
+      }
+      
+      ul {
+        margin: 0;
+        padding-left: 20px;
+        
+        li {
+          font-size: 13px;
+          color: #666;
+          margin-bottom: 6px;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+  
+  .form-actions {
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    
+    .btn {
+      padding: 12px 32px;
+      border-radius: 10px;
+      border: none;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s;
+      
+      i {
+        margin-right: 6px;
+      }
+      
+      &.btn-cancel {
+        background: #f5f5f5;
+        color: #666;
+        
+        &:hover {
+          background: #e0e0e0;
+        }
+      }
+      
+      &.btn-primary {
+        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+        color: white;
+        
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+        }
+      }
+    }
+  }
+}
+
+// 安全提示
+.security-tips {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  
+  .tip-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+    
+    i {
+      font-size: 24px;
+      color: #3498db;
+    }
+    
+    h3 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+    }
+  }
+  
+  ul {
+    margin: 0;
+    padding-left: 24px;
+    
+    li {
+      font-size: 14px;
+      color: #666;
+      line-height: 1.8;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .content {
+    padding: 20px 16px;
+  }
+  
+  .settings-card .card-body {
+    padding: 24px 20px;
+  }
+  
+  .password-form .form-actions {
+    flex-direction: column;
+    
+    .btn {
+      width: 100%;
+    }
+  }
+}
+

src/app/government/government-center/password-settings/password-settings.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PasswordSettings } from './password-settings';
+
+describe('PasswordSettings', () => {
+  let component: PasswordSettings;
+  let fixture: ComponentFixture<PasswordSettings>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordSettings]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PasswordSettings);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+

src/app/government/government-center/password-settings/password-settings.ts

@@ -0,0 +1,101 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-password-settings',
+  standalone: true,
+  imports: [CommonModule, RouterModule, FormsModule],
+  templateUrl: './password-settings.html',
+  styleUrl: './password-settings.scss'
+})
+export class PasswordSettings {
+  // 密码显示控制
+  showOldPassword = false;
+  showNewPassword = false;
+  showConfirmPassword = false;
+  
+  // 密码表单
+  passwordForm = {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  };
+  
+  constructor(private router: Router) {}
+  
+  // 获取密码强度
+  getPasswordStrength(): number {
+    const password = this.passwordForm.newPassword;
+    if (!password) return 0;
+    
+    let strength = 0;
+    
+    // 长度
+    if (password.length >= 6) strength += 20;
+    if (password.length >= 8) strength += 20;
+    if (password.length >= 12) strength += 10;
+    
+    // 包含小写字母
+    if (/[a-z]/.test(password)) strength += 15;
+    
+    // 包含大写字母
+    if (/[A-Z]/.test(password)) strength += 15;
+    
+    // 包含数字
+    if (/\d/.test(password)) strength += 10;
+    
+    // 包含特殊字符
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 10;
+    
+    return Math.min(strength, 100);
+  }
+  
+  // 获取密码强度文本
+  getPasswordStrengthText(): string {
+    const strength = this.getPasswordStrength();
+    if (strength < 40) return '弱';
+    if (strength < 70) return '中等';
+    return '强';
+  }
+  
+  // 提交密码修改
+  submitPasswordChange(): void {
+    const { oldPassword, newPassword, confirmPassword } = this.passwordForm;
+    
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      alert('请填写所有字段');
+      return;
+    }
+    
+    if (newPassword.length < 6) {
+      alert('新密码长度至少6位');
+      return;
+    }
+    
+    if (newPassword !== confirmPassword) {
+      alert('两次输入的新密码不一致');
+      return;
+    }
+    
+    if (oldPassword === newPassword) {
+      alert('新密码不能与旧密码相同');
+      return;
+    }
+    
+    // 模拟密码修改
+    alert('密码修改成功！');
+    this.passwordForm = {
+      oldPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    };
+  }
+  
+  // 返回政务中心
+  goBack(): void {
+    this.router.navigate(['/government/government-center']);
+  }
+}
+

src/app/government/government-module.ts

@@ -7,6 +7,9 @@ import { SubsidyManagement } from './subsidy-management/subsidy-management';
 import { IndustryAnalysis } from './industry-analysis/industry-analysis';
 import { AIDecisionAssistant } from './ai-decision-assistant/ai-decision-assistant';
 import { GovernmentCenter } from './government-center/government-center';
+import { PasswordSettings } from './government-center/password-settings/password-settings';
+import { NotificationSettings } from './government-center/notification-settings/notification-settings';
+import { HelpCenter } from './government-center/help-center/help-center';
 
 @NgModule({
   declarations: [],
@@ -17,7 +20,10 @@ import { GovernmentCenter } from './government-center/government-center';
     SubsidyManagement,
     IndustryAnalysis,
     AIDecisionAssistant,
-    GovernmentCenter
+    GovernmentCenter,
+    PasswordSettings,
+    NotificationSettings,
+    HelpCenter
   ]
 })
 export class GovernmentModule { }

src/app/government/government-routing-module.ts

@@ -5,6 +5,9 @@ import { SubsidyManagement } from './subsidy-management/subsidy-management';
 import { IndustryAnalysis } from './industry-analysis/industry-analysis';
 import { AIDecisionAssistant } from './ai-decision-assistant/ai-decision-assistant';
 import { GovernmentCenter } from './government-center/government-center';
+import { PasswordSettings } from './government-center/password-settings/password-settings';
+import { NotificationSettings } from './government-center/notification-settings/notification-settings';
+import { HelpCenter } from './government-center/help-center/help-center';
 
 const routes: Routes = [
   { path: '', redirectTo: 'supervision-overview', pathMatch: 'full' },
@@ -12,7 +15,10 @@ const routes: Routes = [
   { path: 'subsidy-management', component: SubsidyManagement },
   { path: 'industry-analysis', component: IndustryAnalysis },
   { path: 'ai-decision-assistant', component: AIDecisionAssistant },
-  { path: 'government-center', component: GovernmentCenter }
+  { path: 'government-center', component: GovernmentCenter },
+  { path: 'government-center/password-settings', component: PasswordSettings },
+  { path: 'government-center/notification-settings', component: NotificationSettings },
+  { path: 'government-center/help-center', component: HelpCenter }
 ];
 
 @NgModule({

src/app/government/supervision-overview/supervision-overview.html

@@ -11,6 +11,9 @@
         <div class="avatar">
           <span>政</span>
         </div>
+        <div class="settings-icon" (click)="toggleSettingsMenu()" title="系统设置">
+          <i class="fas fa-cog"></i>
+        </div>
       </div>
     </div>
   </header>
@@ -64,6 +67,17 @@
         <div class="map-section">
           <div class="section-header">
             <h3>区域监管地图</h3>
+            <div class="map-legend">
+              <span class="legend-item">
+                <i class="fas fa-circle" style="color: #4CAF50;"></i> 良好
+              </span>
+              <span class="legend-item">
+                <i class="fas fa-circle" style="color: #FF9800;"></i> 警告
+              </span>
+              <span class="legend-item">
+                <i class="fas fa-circle" style="color: #f44336;"></i> 严重
+              </span>
+            </div>
           </div>
           
           <!-- 图层切换 -->
@@ -91,27 +105,66 @@
             </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 class="map-container-wrapper">
+            <!-- 高德地图容器 -->
+            <div id="amap-container" class="amap-container">
+              <!-- 这里将接入高德地图API -->
+              <div class="map-placeholder">
+                <div class="placeholder-content">
+                  <i class="fas fa-map-marked-alt"></i>
+                  <p>地图容器</p>
+                  <span class="placeholder-hint">当前图层: {{ getMapLayerName() }}</span>
+                  <span class="placeholder-hint">区域数量: {{ areas.length }}个</span>
                 </div>
-              </div>
-              <div class="area-stats">
-                <div class="area-stat">
-                  <span class="stat-label">回收量</span>
-                  <span class="stat-value">{{ area.recycleVolume }}kg</span>
+                
+                <!-- 模拟地图标记点 -->
+                <div class="map-markers">
+                  <div 
+                    *ngFor="let area of areas; let i = index" 
+                    class="map-marker"
+                    [ngClass]="getAreaStatusClass(area.status)"
+                    [style.left.%]="getMarkerPosition(i).x"
+                    [style.top.%]="getMarkerPosition(i).y"
+                    (click)="viewAreaDetail(area)"
+                    [title]="area.name + ': ' + area.accuracy + '%'">
+                    <div class="marker-icon">
+                      <i class="fas fa-map-pin"></i>
+                    </div>
+                    <div class="marker-label">{{ area.name }}</div>
+                  </div>
                 </div>
-                <div class="area-stat">
-                  <span class="stat-label">准确率</span>
-                  <span class="stat-value">{{ area.accuracy }}%</span>
+              </div>
+            </div>
+
+            <!-- 区域数据面板 -->
+            <div class="area-data-panel">
+              <div class="panel-header">
+                <h4>{{ getMapLayerName() }}详情</h4>
+                <span class="area-count">{{ areas.length }}个区域</span>
+              </div>
+              <div class="area-list">
+                <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>
@@ -227,6 +280,313 @@
     </div>
   </div>
 
+  <!-- 系统设置下拉菜单 -->
+  <div class="settings-menu" [class.show]="showSettingsMenu" (click)="closeSettingsMenu()">
+    <div class="menu-content" (click)="$event.stopPropagation()">
+      <div class="menu-item" (click)="openPasswordModal()">
+        <i class="fas fa-key"></i>
+        <span>修改密码</span>
+      </div>
+      <div class="menu-item" (click)="openNotificationModal()">
+        <i class="fas fa-bell"></i>
+        <span>通知设置</span>
+      </div>
+      <div class="menu-item" (click)="openHelpModal()">
+        <i class="fas fa-question-circle"></i>
+        <span>帮助中心</span>
+      </div>
+      <div class="menu-divider"></div>
+      <div class="menu-item logout" (click)="logout()">
+        <i class="fas fa-sign-out-alt"></i>
+        <span>退出登录</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- 修改密码弹窗 -->
+  <div class="modal-overlay" [class.show]="showPasswordModal" (click)="closePasswordModal()">
+    <div class="modal-content password-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <i class="fas fa-key"></i> 修改密码
+        </h3>
+        <button class="modal-close" (click)="closePasswordModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <form class="password-form">
+          <div class="form-group">
+            <label class="form-label">
+              <i class="fas fa-lock"></i> 当前密码
+            </label>
+            <div class="password-input-wrapper">
+              <input 
+                [type]="showOldPassword ? 'text' : 'password'" 
+                class="form-input" 
+                [(ngModel)]="passwordForm.oldPassword"
+                name="oldPassword"
+                placeholder="请输入当前密码"
+                autocomplete="current-password">
+              <i class="fas toggle-password" 
+                 [class.fa-eye]="!showOldPassword" 
+                 [class.fa-eye-slash]="showOldPassword"
+                 (click)="showOldPassword = !showOldPassword"></i>
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label">
+              <i class="fas fa-lock"></i> 新密码
+            </label>
+            <div class="password-input-wrapper">
+              <input 
+                [type]="showNewPassword ? 'text' : 'password'" 
+                class="form-input" 
+                [(ngModel)]="passwordForm.newPassword"
+                name="newPassword"
+                placeholder="请输入新密码（至少6位）"
+                autocomplete="new-password">
+              <i class="fas toggle-password" 
+                 [class.fa-eye]="!showNewPassword" 
+                 [class.fa-eye-slash]="showNewPassword"
+                 (click)="showNewPassword = !showNewPassword"></i>
+            </div>
+            <div class="password-strength" *ngIf="passwordForm.newPassword">
+              <div class="strength-bar">
+                <div class="strength-fill" [style.width.%]="getPasswordStrength()" 
+                     [class.weak]="getPasswordStrength() < 40"
+                     [class.medium]="getPasswordStrength() >= 40 && getPasswordStrength() < 70"
+                     [class.strong]="getPasswordStrength() >= 70"></div>
+              </div>
+              <span class="strength-text">{{ getPasswordStrengthText() }}</span>
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label class="form-label">
+              <i class="fas fa-lock"></i> 确认新密码
+            </label>
+            <div class="password-input-wrapper">
+              <input 
+                [type]="showConfirmPassword ? 'text' : 'password'" 
+                class="form-input" 
+                [(ngModel)]="passwordForm.confirmPassword"
+                name="confirmPassword"
+                placeholder="请再次输入新密码"
+                autocomplete="new-password">
+              <i class="fas toggle-password" 
+                 [class.fa-eye]="!showConfirmPassword" 
+                 [class.fa-eye-slash]="showConfirmPassword"
+                 (click)="showConfirmPassword = !showConfirmPassword"></i>
+            </div>
+          </div>
+          
+          <div class="form-tips">
+            <i class="fas fa-info-circle"></i>
+            <div class="tips-content">
+              <p>密码要求：</p>
+              <ul>
+                <li>长度至少6位</li>
+                <li>建议包含字母、数字和符号</li>
+                <li>不要使用简单密码（如123456）</li>
+              </ul>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-cancel" (click)="closePasswordModal()">取消</button>
+        <button class="btn btn-primary" (click)="submitPasswordChange()">
+          <i class="fas fa-check"></i> 确认修改
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 通知设置弹窗 -->
+  <div class="modal-overlay" [class.show]="showNotificationModal" (click)="closeNotificationModal()">
+    <div class="modal-content notification-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <i class="fas fa-bell"></i> 通知设置
+        </h3>
+        <button class="modal-close" (click)="closeNotificationModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="notification-section">
+          <h4 class="section-subtitle">
+            <i class="fas fa-desktop"></i> 系统通知
+          </h4>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">预警通知</div>
+              <div class="item-desc">接收高风险、违规事件等预警提醒</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.systemAlerts">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">数据报告</div>
+              <div class="item-desc">每日/每周数据统计报告推送</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.dataReports">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">政策更新</div>
+              <div class="item-desc">政策法规变更通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.policyUpdates">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+
+        <div class="notification-section">
+          <h4 class="section-subtitle">
+            <i class="fas fa-envelope"></i> 邮件通知
+          </h4>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">启用邮件通知</div>
+              <div class="item-desc">通过邮件接收重要通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.emailNotifications">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="form-group" *ngIf="notificationSettings.emailNotifications">
+            <label class="form-label">接收邮箱</label>
+            <input type="email" class="form-input" [(ngModel)]="notificationSettings.email" placeholder="请输入邮箱地址">
+          </div>
+        </div>
+
+        <div class="notification-section">
+          <h4 class="section-subtitle">
+            <i class="fas fa-mobile-alt"></i> 短信通知
+          </h4>
+          <div class="notification-item">
+            <div class="item-info">
+              <div class="item-title">启用短信通知</div>
+              <div class="item-desc">通过短信接收紧急通知</div>
+            </div>
+            <label class="switch">
+              <input type="checkbox" [(ngModel)]="notificationSettings.smsNotifications">
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="form-group" *ngIf="notificationSettings.smsNotifications">
+            <label class="form-label">手机号码</label>
+            <input type="tel" class="form-input" [(ngModel)]="notificationSettings.phone" placeholder="请输入手机号">
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-cancel" (click)="closeNotificationModal()">取消</button>
+        <button class="btn btn-primary" (click)="saveNotificationSettings()">
+          <i class="fas fa-save"></i> 保存设置
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 帮助中心弹窗 -->
+  <div class="modal-overlay" [class.show]="showHelpModal" (click)="closeHelpModal()">
+    <div class="modal-content help-modal" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">
+          <i class="fas fa-question-circle"></i> 帮助中心
+        </h3>
+        <button class="modal-close" (click)="closeHelpModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="help-search">
+          <i class="fas fa-search"></i>
+          <input type="text" placeholder="搜索帮助文档..." [(ngModel)]="helpSearchQuery">
+        </div>
+
+        <div class="help-tabs">
+          <div class="help-tab" [class.active]="helpActiveTab === 'faq'" (click)="helpActiveTab = 'faq'">
+            <i class="fas fa-list-ul"></i> 常见问题
+          </div>
+          <div class="help-tab" [class.active]="helpActiveTab === 'tutorial'" (click)="helpActiveTab = 'tutorial'">
+            <i class="fas fa-graduation-cap"></i> 使用教程
+          </div>
+          <div class="help-tab" [class.active]="helpActiveTab === 'contact'" (click)="helpActiveTab = 'contact'">
+            <i class="fas fa-headset"></i> 联系我们
+          </div>
+        </div>
+
+        <!-- 常见问题 -->
+        <div class="help-content" *ngIf="helpActiveTab === 'faq'">
+          <div class="faq-item" *ngFor="let faq of filteredFaqs">
+            <div class="faq-question" (click)="toggleFaq(faq)">
+              <i class="fas" [class.fa-chevron-right]="!faq.expanded" [class.fa-chevron-down]="faq.expanded"></i>
+              <span>{{ faq.question }}</span>
+            </div>
+            <div class="faq-answer" [class.show]="faq.expanded">
+              {{ faq.answer }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 使用教程 -->
+        <div class="help-content" *ngIf="helpActiveTab === 'tutorial'">
+          <div class="tutorial-item" *ngFor="let tutorial of tutorials">
+            <div class="tutorial-icon">
+              <i [class]="tutorial.icon"></i>
+            </div>
+            <div class="tutorial-info">
+              <h5>{{ tutorial.title }}</h5>
+              <p>{{ tutorial.description }}</p>
+              <a href="#" class="tutorial-link">查看教程 <i class="fas fa-arrow-right"></i></a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 联系我们 -->
+        <div class="help-content" *ngIf="helpActiveTab === 'contact'">
+          <div class="contact-grid">
+            <div class="contact-card">
+              <i class="fas fa-phone-alt"></i>
+              <h5>客服热线</h5>
+              <p>400-123-4567</p>
+              <span class="contact-time">工作日 9:00-18:00</span>
+            </div>
+            <div class="contact-card">
+              <i class="fas fa-envelope"></i>
+              <h5>邮箱支持</h5>
+              <p>support@zhihui-gov.com</p>
+              <span class="contact-time">24小时内回复</span>
+            </div>
+            <div class="contact-card">
+              <i class="fas fa-comments"></i>
+              <h5>在线客服</h5>
+              <p>即时沟通</p>
+              <button class="btn btn-sm btn-primary">立即咨询</button>
+            </div>
+            <div class="contact-card">
+              <i class="fas fa-map-marker-alt"></i>
+              <h5>办公地址</h5>
+              <p>北京市朝阳区XXX大厦</p>
+              <span class="contact-time">工作日 9:00-17:30</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" (click)="closeHelpModal()">关闭</button>
+      </div>
+    </div>
+  </div>
+
   <!-- 底部导航 -->
   <nav class="bottom-nav">
     <div class="nav-item active">

src/app/government/supervision-overview/supervision-overview.scss

@@ -210,6 +210,220 @@
   }
 }
 
+// ========== 地图容器布局 ==========
+.map-container-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+// 高德地图容器
+.amap-container {
+  position: relative;
+  height: 500px;
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+}
+
+// 地图占位符
+.map-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #f0f4f8 0%, #e8f0f7 100%);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-content {
+  text-align: center;
+  color: #7f8c9c;
+  z-index: 1;
+
+  i {
+    font-size: 48px;
+    color: #b0bec5;
+    margin-bottom: 12px;
+    display: block;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 12px 0;
+    color: #546e7a;
+  }
+
+  .placeholder-hint {
+    display: block;
+    font-size: 13px;
+    color: #90a4ae;
+    margin: 4px 0;
+  }
+}
+
+// 地图标记点
+.map-markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.map-marker {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  pointer-events: all;
+  cursor: pointer;
+  transition: all 0.3s;
+  animation: markerDrop 0.6s ease-out;
+
+  &:hover {
+    transform: translate(-50%, -100%) scale(1.2);
+    z-index: 10;
+
+    .marker-label {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .marker-icon {
+    font-size: 32px;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+
+  .marker-label {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%) translateY(5px);
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: all 0.3s;
+    pointer-events: none;
+  }
+
+  &.area-good .marker-icon i {
+    color: #4CAF50;
+  }
+
+  &.area-warning .marker-icon i {
+    color: #FF9800;
+  }
+
+  &.area-critical .marker-icon i {
+    color: #f44336;
+    animation: markerPulse 2s infinite;
+  }
+}
+
+@keyframes markerDrop {
+  0% {
+    transform: translate(-50%, -200%) scale(0);
+    opacity: 0;
+  }
+  60% {
+    transform: translate(-50%, -80%) scale(1.1);
+  }
+  100% {
+    transform: translate(-50%, -100%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes markerPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+}
+
+// 区域数据面板
+.area-data-panel {
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: white;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .area-count {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+}
+
+.area-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  max-height: 430px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f5f5f5;
+  }
+}
+
+// 地图图例
+.map-legend {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--dark-text);
+
+    i {
+      font-size: 10px;
+    }
+  }
+}
+
 .area-map {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -560,6 +774,18 @@
   .area-map {
     grid-template-columns: 1fr;
   }
+
+  .map-container-wrapper {
+    grid-template-columns: 1fr;
+  }
+
+  .amap-container {
+    height: 350px;
+  }
+
+  .area-data-panel {
+    order: 2;
+  }
 }
 
 /* 趋势指标样式 */
@@ -856,3 +1082,717 @@
   }
 }
 
+// ========== 系统设置相关样式 ==========
+
+// 设置图标
+.settings-icon {
+  margin-left: 16px;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s;
+  
+  i {
+    font-size: 20px;
+    color: white;
+    transition: transform 0.6s;
+  }
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+    
+    i {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// 设置下拉菜单
+.settings-menu {
+  position: fixed;
+  top: 70px;
+  right: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s;
+  z-index: 1000;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  
+  .menu-content {
+    padding: 8px;
+    min-width: 200px;
+  }
+  
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-size: 14px;
+    color: #333;
+    
+    i {
+      font-size: 16px;
+      color: #3498db;
+      width: 20px;
+    }
+    
+    &:hover {
+      background: #f5f7fa;
+    }
+    
+    &.logout {
+      color: #e74c3c;
+      
+      i {
+        color: #e74c3c;
+      }
+      
+      &:hover {
+        background: #ffebee;
+      }
+    }
+  }
+  
+  .menu-divider {
+    height: 1px;
+    background: #e0e0e0;
+    margin: 8px 0;
+  }
+}
+
+// 弹窗样式
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+  z-index: 2000;
+  padding: 20px;
+  
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  .modal-content {
+    background: white;
+    border-radius: 16px;
+    max-width: 600px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    animation: slideUp 0.3s;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  border-bottom: 1px solid #e0e0e0;
+  
+  .modal-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    
+    i {
+      color: #3498db;
+    }
+  }
+  
+  .modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: #f5f7fa;
+    color: #666;
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background: #e0e0e0;
+      color: #333;
+    }
+  }
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  
+  .btn {
+    padding: 10px 24px;
+    border-radius: 8px;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    i {
+      margin-right: 6px;
+    }
+    
+    &.btn-cancel {
+      background: #f5f5f5;
+      color: #666;
+      
+      &:hover {
+        background: #e0e0e0;
+      }
+    }
+    
+    &.btn-primary {
+      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+      color: white;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+      }
+    }
+    
+    &.btn-sm {
+      padding: 6px 16px;
+      font-size: 13px;
+    }
+  }
+}
+
+// 修改密码弹窗
+.password-modal {
+  max-width: 500px;
+}
+
+.password-form {
+  .form-group {
+    margin-bottom: 20px;
+    
+    .form-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+      
+      i {
+        color: #3498db;
+        font-size: 14px;
+      }
+    }
+    
+    .password-input-wrapper {
+      position: relative;
+      
+      .form-input {
+        width: 100%;
+        padding: 12px 45px 12px 14px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        font-size: 14px;
+        transition: all 0.3s;
+        
+        &:focus {
+          outline: none;
+          border-color: #3498db;
+          box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+        }
+        
+        &::placeholder {
+          color: #bbb;
+        }
+      }
+      
+      .toggle-password {
+        position: absolute;
+        right: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #999;
+        cursor: pointer;
+        font-size: 16px;
+        
+        &:hover {
+          color: #3498db;
+        }
+      }
+    }
+  }
+  
+  .password-strength {
+    margin-top: 8px;
+    
+    .strength-bar {
+      height: 4px;
+      background: #e0e0e0;
+      border-radius: 2px;
+      overflow: hidden;
+      margin-bottom: 4px;
+      
+      .strength-fill {
+        height: 100%;
+        transition: all 0.3s;
+        
+        &.weak {
+          background: #e74c3c;
+        }
+        
+        &.medium {
+          background: #f39c12;
+        }
+        
+        &.strong {
+          background: #27ae60;
+        }
+      }
+    }
+    
+    .strength-text {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+  
+  .form-tips {
+    background: #e8f4f8;
+    padding: 14px;
+    border-radius: 8px;
+    display: flex;
+    gap: 10px;
+    
+    i {
+      color: #3498db;
+      font-size: 16px;
+      margin-top: 2px;
+    }
+    
+    .tips-content {
+      flex: 1;
+      
+      p {
+        margin: 0 0 8px 0;
+        font-size: 13px;
+        font-weight: 600;
+        color: #3498db;
+      }
+      
+      ul {
+        margin: 0;
+        padding-left: 20px;
+        
+        li {
+          font-size: 12px;
+          color: #666;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}
+
+// 通知设置弹窗
+.notification-modal {
+  max-width: 700px;
+}
+
+.notification-section {
+  margin-bottom: 24px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-subtitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0 0 16px 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    i {
+      color: #3498db;
+    }
+  }
+}
+
+.notification-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #f9f9f9;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #f0f0f0;
+  }
+  
+  .item-info {
+    flex: 1;
+    
+    .item-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 4px;
+    }
+    
+    .item-desc {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+
+// 开关按钮
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+  
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    
+    &:checked + .slider {
+      background-color: #3498db;
+      
+      &:before {
+        transform: translateX(22px);
+      }
+    }
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 26px;
+    
+    &:before {
+      position: absolute;
+      content: "";
+      height: 20px;
+      width: 20px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: .4s;
+      border-radius: 50%;
+    }
+  }
+}
+
+// 帮助中心弹窗
+.help-modal {
+  max-width: 800px;
+}
+
+.help-search {
+  position: relative;
+  margin-bottom: 20px;
+  
+  i {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+  }
+  
+  input {
+    width: 100%;
+    padding: 12px 14px 12px 42px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 14px;
+    
+    &:focus {
+      outline: none;
+      border-color: #3498db;
+      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+    }
+  }
+}
+
+.help-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  border-bottom: 2px solid #e0e0e0;
+  
+  .help-tab {
+    flex: 1;
+    padding: 12px;
+    background: transparent;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-bottom: 3px solid transparent;
+    text-align: center;
+    
+    i {
+      margin-right: 6px;
+    }
+    
+    &:hover {
+      color: #3498db;
+    }
+    
+    &.active {
+      color: #3498db;
+      border-bottom-color: #3498db;
+    }
+  }
+}
+
+.help-content {
+  min-height: 300px;
+}
+
+// FAQ
+.faq-item {
+  margin-bottom: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+  
+  .faq-question {
+    padding: 16px;
+    background: #f9f9f9;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 600;
+    color: #333;
+    transition: all 0.3s;
+    
+    i {
+      color: #3498db;
+      font-size: 14px;
+      transition: transform 0.3s;
+    }
+    
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+  
+  .faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s;
+    padding: 0 16px;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+    
+    &.show {
+      max-height: 300px;
+      padding: 16px;
+      border-top: 1px solid #e0e0e0;
+    }
+  }
+}
+
+// 教程
+.tutorial-item {
+  display: flex;
+  gap: 16px;
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #f0f0f0;
+    transform: translateX(4px);
+  }
+  
+  .tutorial-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 28px;
+    flex-shrink: 0;
+  }
+  
+  .tutorial-info {
+    flex: 1;
+    
+    h5 {
+      margin: 0 0 8px 0;
+      font-size: 16px;
+      color: #333;
+    }
+    
+    p {
+      margin: 0 0 12px 0;
+      font-size: 13px;
+      color: #999;
+    }
+    
+    .tutorial-link {
+      color: #3498db;
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 600;
+      
+      i {
+        margin-left: 4px;
+        font-size: 11px;
+      }
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// 联系我们
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.contact-card {
+  padding: 24px;
+  background: #f9f9f9;
+  border-radius: 12px;
+  text-align: center;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #f0f0f0;
+    transform: translateY(-4px);
+  }
+  
+  i {
+    font-size: 32px;
+    color: #3498db;
+    margin-bottom: 12px;
+  }
+  
+  h5 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  
+  p {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: #666;
+    font-weight: 600;
+  }
+  
+  .contact-time {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .settings-menu {
+    right: 10px;
+    
+    .menu-content {
+      min-width: 180px;
+    }
+  }
+  
+  .modal-content {
+    margin: 0;
+    border-radius: 12px 12px 0 0;
+  }
+  
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .help-tabs .help-tab {
+    font-size: 13px;
+    padding: 10px 8px;
+  }
+}

src/app/government/supervision-overview/supervision-overview.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -27,13 +27,97 @@ interface AreaData {
   templateUrl: './supervision-overview.html',
   styleUrl: './supervision-overview.scss'
 })
-export class SupervisionOverview {
+export class SupervisionOverview implements OnInit {
   mapLayer: 'sites' | 'compliance' | 'policy' = 'sites';
   showWarningDetailModal = false;
   showAreaDetailModal = false;
   selectedWarning: Warning | null = null;
   selectedArea: AreaData | null = null;
   
+  // 系统设置相关
+  showSettingsMenu = false;
+  showPasswordModal = false;
+  showNotificationModal = false;
+  showHelpModal = false;
+  
+  // 密码显示控制
+  showOldPassword = false;
+  showNewPassword = false;
+  showConfirmPassword = false;
+  
+  // 密码表单
+  passwordForm = {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  };
+  
+  // 通知设置
+  notificationSettings = {
+    systemAlerts: true,
+    dataReports: true,
+    policyUpdates: true,
+    emailNotifications: false,
+    email: '',
+    smsNotifications: false,
+    phone: ''
+  };
+  
+  // 帮助中心
+  helpActiveTab: 'faq' | 'tutorial' | 'contact' = 'faq';
+  helpSearchQuery = '';
+  
+  faqs = [
+    {
+      question: '如何查看辖区详细数据？',
+      answer: '点击地图上的区域标记或区域列表中的任意项目，即可查看该辖区的详细数据统计，包括人口、网点、合规率等信息。',
+      expanded: false
+    },
+    {
+      question: '预警通知如何处理？',
+      answer: '在实时预警列表中点击预警项目，查看详情后可以点击"处理"按钮标记为处理中，处理完成后点击"解决"按钮完成流程。',
+      expanded: false
+    },
+    {
+      question: '如何切换不同的监管视图？',
+      answer: '在区域监管地图上方有三个切换按钮：网点分布、合规状态、政策覆盖，点击即可切换不同的数据视图。',
+      expanded: false
+    },
+    {
+      question: '数据多久更新一次？',
+      answer: '系统数据实时更新，核心指标每5分钟刷新一次，预警信息即时推送。',
+      expanded: false
+    },
+    {
+      question: '如何导出报表数据？',
+      answer: '在数据统计页面点击"导出"按钮，可以选择Excel或PDF格式导出当前查看的数据报表。',
+      expanded: false
+    }
+  ];
+  
+  tutorials = [
+    {
+      icon: 'fas fa-play-circle',
+      title: '快速入门指南',
+      description: '了解系统基本功能和操作流程'
+    },
+    {
+      icon: 'fas fa-chart-bar',
+      title: '数据分析教程',
+      description: '学习如何使用数据分析工具进行决策'
+    },
+    {
+      icon: 'fas fa-bell',
+      title: '预警管理指南',
+      description: '掌握预警处理和问题解决流程'
+    },
+    {
+      icon: 'fas fa-cog',
+      title: '系统设置说明',
+      description: '个性化配置系统参数和通知'
+    }
+  ];
+  
   // 核心指标
   indicators = {
     todayRecycle: 45680,
@@ -46,14 +130,36 @@ export class SupervisionOverview {
     }
   };
 
-  // 区域数据
-  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 }
-  ];
+  // 全部区域数据（用于不同视图）
+  allAreasData = {
+    sites: [
+      { name: '朝阳区', status: 'good' as const, recycleVolume: 12500, accuracy: 95 },
+      { name: '海淀区', status: 'warning' as const, recycleVolume: 10200, accuracy: 88 },
+      { name: '西城区', status: 'good' as const, recycleVolume: 8900, accuracy: 93 },
+      { name: '东城区', status: 'critical' as const, recycleVolume: 7800, accuracy: 76 },
+      { name: '丰台区', status: 'good' as const, recycleVolume: 6280, accuracy: 91 }
+    ],
+    compliance: [
+      { name: '朝阳区', status: 'good' as const, recycleVolume: 12500, accuracy: 95 },
+      { name: '海淀区', status: 'good' as const, recycleVolume: 10200, accuracy: 92 },
+      { name: '西城区', status: 'warning' as const, recycleVolume: 8900, accuracy: 85 },
+      { name: '东城区', status: 'critical' as const, recycleVolume: 7800, accuracy: 68 },
+      { name: '丰台区', status: 'warning' as const, recycleVolume: 6280, accuracy: 82 },
+      { name: '石景山区', status: 'good' as const, recycleVolume: 5400, accuracy: 91 }
+    ],
+    policy: [
+      { name: '朝阳区', status: 'good' as const, recycleVolume: 12500, accuracy: 98 },
+      { name: '海淀区', status: 'good' as const, recycleVolume: 10200, accuracy: 96 },
+      { name: '西城区', status: 'good' as const, recycleVolume: 8900, accuracy: 94 },
+      { name: '东城区', status: 'warning' as const, recycleVolume: 7800, accuracy: 88 },
+      { name: '丰台区', status: 'good' as const, recycleVolume: 6280, accuracy: 92 },
+      { name: '石景山区', status: 'warning' as const, recycleVolume: 5400, accuracy: 86 },
+      { name: '通州区', status: 'good' as const, recycleVolume: 4800, accuracy: 90 }
+    ]
+  };
+  
+  // 当前显示的区域数据
+  areas: AreaData[] = [];
 
   // 预警列表
   warnings: Warning[] = [
@@ -105,6 +211,55 @@ export class SupervisionOverview {
 
   switchMapLayer(layer: 'sites' | 'compliance' | 'policy'): void {
     this.mapLayer = layer;
+    // 根据选择的图层切换显示的区域数据
+    this.areas = this.allAreasData[layer];
+  }
+  
+  // 获取当前图层名称
+  getMapLayerName(): string {
+    const names = {
+      'sites': '网点分布',
+      'compliance': '合规状态',
+      'policy': '政策覆盖'
+    };
+    return names[this.mapLayer];
+  }
+  
+  // 获取地图标记点位置（模拟北京各区域位置）
+  getMarkerPosition(index: number): { x: number; y: number } {
+    const positions: { [key: string]: { x: number; y: number }[] } = {
+      'sites': [
+        { x: 65, y: 35 },  // 朝阳区 (东北)
+        { x: 40, y: 25 },  // 海淀区 (西北)
+        { x: 45, y: 50 },  // 西城区 (中西)
+        { x: 60, y: 50 },  // 东城区 (中东)
+        { x: 50, y: 70 }   // 丰台区 (南)
+      ],
+      'compliance': [
+        { x: 65, y: 35 },  // 朝阳区
+        { x: 40, y: 25 },  // 海淀区
+        { x: 45, y: 50 },  // 西城区
+        { x: 60, y: 50 },  // 东城区
+        { x: 50, y: 70 },  // 丰台区
+        { x: 25, y: 55 }   // 石景山区 (西)
+      ],
+      'policy': [
+        { x: 65, y: 35 },  // 朝阳区
+        { x: 40, y: 25 },  // 海淀区
+        { x: 45, y: 50 },  // 西城区
+        { x: 60, y: 50 },  // 东城区
+        { x: 50, y: 70 },  // 丰台区
+        { x: 25, y: 55 },  // 石景山区
+        { x: 75, y: 60 }   // 通州区 (东)
+      ]
+    };
+    
+    return positions[this.mapLayer][index] || { x: 50, y: 50 };
+  }
+  
+  // 初始化时加载默认数据
+  ngOnInit(): void {
+    this.areas = this.allAreasData.sites; // 默认显示网点分布
   }
 
   getWarningIcon(type: string): string {
@@ -183,6 +338,174 @@ export class SupervisionOverview {
   goToAIAssistant(): void {
     this.router.navigate(['/government/ai-decision-assistant']);
   }
+  
+  // ========== 系统设置相关方法 ==========
+  
+  // 切换设置菜单
+  toggleSettingsMenu(): void {
+    this.showSettingsMenu = !this.showSettingsMenu;
+  }
+  
+  // 关闭设置菜单
+  closeSettingsMenu(): void {
+    this.showSettingsMenu = false;
+  }
+  
+  // 打开修改密码弹窗
+  openPasswordModal(): void {
+    this.closeSettingsMenu();
+    this.passwordForm = {
+      oldPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    };
+    this.showPasswordModal = true;
+  }
+  
+  // 关闭修改密码弹窗
+  closePasswordModal(): void {
+    this.showPasswordModal = false;
+    this.showOldPassword = false;
+    this.showNewPassword = false;
+    this.showConfirmPassword = false;
+  }
+  
+  // 获取密码强度
+  getPasswordStrength(): number {
+    const password = this.passwordForm.newPassword;
+    if (!password) return 0;
+    
+    let strength = 0;
+    
+    // 长度
+    if (password.length >= 6) strength += 20;
+    if (password.length >= 8) strength += 20;
+    if (password.length >= 12) strength += 10;
+    
+    // 包含小写字母
+    if (/[a-z]/.test(password)) strength += 15;
+    
+    // 包含大写字母
+    if (/[A-Z]/.test(password)) strength += 15;
+    
+    // 包含数字
+    if (/\d/.test(password)) strength += 10;
+    
+    // 包含特殊字符
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 10;
+    
+    return Math.min(strength, 100);
+  }
+  
+  // 获取密码强度文本
+  getPasswordStrengthText(): string {
+    const strength = this.getPasswordStrength();
+    if (strength < 40) return '弱';
+    if (strength < 70) return '中等';
+    return '强';
+  }
+  
+  // 提交密码修改
+  submitPasswordChange(): void {
+    const { oldPassword, newPassword, confirmPassword } = this.passwordForm;
+    
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      alert('请填写所有字段');
+      return;
+    }
+    
+    if (newPassword.length < 6) {
+      alert('新密码长度至少6位');
+      return;
+    }
+    
+    if (newPassword !== confirmPassword) {
+      alert('两次输入的新密码不一致');
+      return;
+    }
+    
+    if (oldPassword === newPassword) {
+      alert('新密码不能与旧密码相同');
+      return;
+    }
+    
+    // 模拟密码修改
+    alert('密码修改成功！');
+    this.closePasswordModal();
+  }
+  
+  // 打开通知设置弹窗
+  openNotificationModal(): void {
+    this.closeSettingsMenu();
+    this.showNotificationModal = true;
+  }
+  
+  // 关闭通知设置弹窗
+  closeNotificationModal(): void {
+    this.showNotificationModal = false;
+  }
+  
+  // 保存通知设置
+  saveNotificationSettings(): void {
+    if (this.notificationSettings.emailNotifications && !this.notificationSettings.email) {
+      alert('请输入接收邮箱');
+      return;
+    }
+    
+    if (this.notificationSettings.smsNotifications && !this.notificationSettings.phone) {
+      alert('请输入手机号码');
+      return;
+    }
+    
+    // 保存到本地存储
+    localStorage.setItem('notificationSettings', JSON.stringify(this.notificationSettings));
+    alert('通知设置保存成功！');
+    this.closeNotificationModal();
+  }
+  
+  // 打开帮助中心弹窗
+  openHelpModal(): void {
+    this.closeSettingsMenu();
+    this.showHelpModal = true;
+    this.helpActiveTab = 'faq';
+    this.helpSearchQuery = '';
+  }
+  
+  // 关闭帮助中心弹窗
+  closeHelpModal(): void {
+    this.showHelpModal = false;
+  }
+  
+  // 切换FAQ展开状态
+  toggleFaq(faq: any): void {
+    faq.expanded = !faq.expanded;
+  }
+  
+  // 获取过滤后的FAQs
+  get filteredFaqs() {
+    if (!this.helpSearchQuery) return this.faqs;
+    
+    const query = this.helpSearchQuery.toLowerCase();
+    return this.faqs.filter(faq => 
+      faq.question.toLowerCase().includes(query) || 
+      faq.answer.toLowerCase().includes(query)
+    );
+  }
+  
+  // 退出登录
+  logout(): void {
+    this.closeSettingsMenu();
+    if (confirm('确定要退出登录吗？')) {
+      localStorage.removeItem('currentUser');
+      this.router.navigate(['/auth/login']);
+    }
+  }
 
-  constructor(private router: Router) {}
+  constructor(private router: Router) {
+    // 从本地存储加载通知设置
+    const savedSettings = localStorage.getItem('notificationSettings');
+    if (savedSettings) {
+      this.notificationSettings = JSON.parse(savedSettings);
+    }
+  }
 }