ai-decision-assistant.html 4.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <div class="ai-assistant-container">
  2. <header class="header">
  3. <div class="header-content">
  4. <div class="logo"><span class="logo-icon">🏛️</span><span>智回监管</span></div>
  5. <div class="user-info"><span>政府管理员</span><div class="avatar"><span>政</span></div></div>
  6. </div>
  7. </header>
  8. <main class="content">
  9. <div class="container">
  10. <h2 class="section-title">AI决策助手</h2>
  11. <div class="tab-navigation">
  12. <div class="tab-item" [class.active]="activeTab === 'simulator'" (click)="switchTab('simulator')">政策模拟</div>
  13. <div class="tab-item" [class.active]="activeTab === 'qa'" (click)="switchTab('qa')">数据问答</div>
  14. <div class="tab-item" [class.active]="activeTab === 'compliance'" (click)="switchTab('compliance')">合规洞察</div>
  15. <div class="tab-item" [class.active]="activeTab === 'report'" (click)="switchTab('report')">报告生成</div>
  16. </div>
  17. <!-- 政策模拟器 -->
  18. <div *ngIf="activeTab === 'simulator'" class="simulator-panel">
  19. <div class="input-group">
  20. <label>补贴金额(元/kg)</label>
  21. <input type="number" [(ngModel)]="subsidyAmount" class="input-field">
  22. </div>
  23. <div class="input-group">
  24. <label>模拟时间(月)</label>
  25. <select [(ngModel)]="timeRange" class="input-field">
  26. <option value="3">3个月</option>
  27. <option value="6">6个月</option>
  28. <option value="12">12个月</option>
  29. </select>
  30. </div>
  31. <button class="run-btn" (click)="runSimulation()">运行模拟</button>
  32. <div *ngIf="simulationResult" class="result-panel">
  33. <h4>预测结果</h4>
  34. <div class="result-grid">
  35. <div class="result-item"><span>回收量增长</span><span class="result-value">+{{ simulationResult.recycleIncrease }}%</span></div>
  36. <div class="result-item"><span>财政支出</span><span class="result-value">¥{{ simulationResult.budgetCost.toLocaleString() }}</span></div>
  37. <div class="result-item"><span>碳减排</span><span class="result-value">{{ simulationResult.carbonReduction }}kg</span></div>
  38. <div class="result-item"><span>企业参与度</span><span class="result-value">{{ simulationResult.participation }}%</span></div>
  39. </div>
  40. </div>
  41. </div>
  42. <!-- 数据问答 -->
  43. <div *ngIf="activeTab === 'qa'" class="qa-panel">
  44. <div class="qa-input">
  45. <textarea [(ngModel)]="question" placeholder="请输入您的问题,例如:展示各区准确率排名" class="qa-textarea"></textarea>
  46. <button class="ask-btn" (click)="askQuestion()">提问</button>
  47. </div>
  48. <div *ngIf="qaResult" class="qa-result">
  49. <h4>AI回答</h4>
  50. <p>{{ qaResult }}</p>
  51. </div>
  52. </div>
  53. <!-- 合规监管洞察 -->
  54. <div *ngIf="activeTab === 'compliance'" class="compliance-panel">
  55. <div *ngFor="let item of complianceResults" class="compliance-item" [ngClass]="getRiskClass(item.risk)">
  56. <div class="compliance-header">
  57. <span>{{ item.company }}</span>
  58. <span class="risk-badge">{{ item.risk === 'high' ? '高风险' : '中风险' }}</span>
  59. </div>
  60. <div class="compliance-pattern">识别模式: {{ item.pattern }}</div>
  61. <div class="compliance-suggestion">建议: {{ item.suggestion }}</div>
  62. </div>
  63. </div>
  64. <!-- 报告生成 -->
  65. <div *ngIf="activeTab === 'report'" class="report-panel">
  66. <div class="report-template">
  67. <div class="template-item" (click)="generateReport()">
  68. <i class="fas fa-file-alt"></i>
  69. <span>月度监管分析报告</span>
  70. </div>
  71. <div class="template-item" (click)="generateReport()">
  72. <i class="fas fa-chart-bar"></i>
  73. <span>产业发展评估报告</span>
  74. </div>
  75. <div class="template-item" (click)="generateReport()">
  76. <i class="fas fa-clipboard-check"></i>
  77. <span>政策效果评估报告</span>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </main>
  83. <nav class="bottom-nav">
  84. <div class="nav-item" routerLink="/government/supervision-overview"><div class="nav-icon">📊</div><div>监管</div></div>
  85. <div class="nav-item" routerLink="/government/subsidy-management"><div class="nav-icon">💰</div><div>补贴</div></div>
  86. <div class="nav-item" routerLink="/government/industry-analysis"><div class="nav-icon">📈</div><div>分析</div></div>
  87. <div class="nav-item active"><div class="nav-icon">🤖</div><div>AI助手</div></div>
  88. <div class="nav-item" routerLink="/government/government-center"><div class="nav-icon">⚙️</div><div>政务</div></div>
  89. </nav>
  90. </div>