supervision-overview.ts 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import { Component } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { RouterModule, Router } from '@angular/router';
  4. import { FormsModule } from '@angular/forms';
  5. interface Warning {
  6. id: string;
  7. type: 'violation' | 'anomaly' | 'complaint';
  8. title: string;
  9. area: string;
  10. time: string;
  11. level: 'high' | 'medium' | 'low';
  12. status: 'pending' | 'processing' | 'resolved';
  13. }
  14. interface AreaData {
  15. name: string;
  16. status: 'good' | 'warning' | 'critical';
  17. recycleVolume: number;
  18. accuracy: number;
  19. }
  20. @Component({
  21. selector: 'app-supervision-overview',
  22. standalone: true,
  23. imports: [CommonModule, RouterModule, FormsModule],
  24. templateUrl: './supervision-overview.html',
  25. styleUrl: './supervision-overview.scss'
  26. })
  27. export class SupervisionOverview {
  28. mapLayer: 'sites' | 'compliance' | 'policy' = 'sites';
  29. showWarningDetailModal = false;
  30. showAreaDetailModal = false;
  31. selectedWarning: Warning | null = null;
  32. selectedArea: AreaData | null = null;
  33. // 核心指标
  34. indicators = {
  35. todayRecycle: 45680,
  36. accuracyRate: 92.5,
  37. carbonReduction: 1250,
  38. trend: {
  39. recycle: '+12%',
  40. accuracy: '+2.5%',
  41. carbon: '+8%'
  42. }
  43. };
  44. // 区域数据
  45. areas: AreaData[] = [
  46. { name: '朝阳区', status: 'good', recycleVolume: 12500, accuracy: 95 },
  47. { name: '海淀区', status: 'warning', recycleVolume: 10200, accuracy: 88 },
  48. { name: '西城区', status: 'good', recycleVolume: 8900, accuracy: 93 },
  49. { name: '东城区', status: 'critical', recycleVolume: 7800, accuracy: 76 },
  50. { name: '丰台区', status: 'good', recycleVolume: 6280, accuracy: 91 }
  51. ];
  52. // 预警列表
  53. warnings: Warning[] = [
  54. {
  55. id: 'W001',
  56. type: 'violation',
  57. title: '某企业未按规定分类处理',
  58. area: '朝阳区',
  59. time: '10分钟前',
  60. level: 'high',
  61. status: 'pending'
  62. },
  63. {
  64. id: 'W002',
  65. type: 'anomaly',
  66. title: '海淀区回收量异常下降',
  67. area: '海淀区',
  68. time: '30分钟前',
  69. level: 'medium',
  70. status: 'processing'
  71. },
  72. {
  73. id: 'W003',
  74. type: 'complaint',
  75. title: '居民投诉回收点脏乱',
  76. area: '西城区',
  77. time: '1小时前',
  78. level: 'low',
  79. status: 'processing'
  80. },
  81. {
  82. id: 'W004',
  83. type: 'violation',
  84. title: '东城区企业超标排放',
  85. area: '东城区',
  86. time: '2小时前',
  87. level: 'high',
  88. status: 'pending'
  89. }
  90. ];
  91. get pendingWarnings(): number {
  92. return this.warnings.filter(w => w.status === 'pending').length;
  93. }
  94. get highLevelWarnings(): number {
  95. return this.warnings.filter(w => w.level === 'high').length;
  96. }
  97. switchMapLayer(layer: 'sites' | 'compliance' | 'policy'): void {
  98. this.mapLayer = layer;
  99. }
  100. getWarningIcon(type: string): string {
  101. const icons: {[key: string]: string} = {
  102. 'violation': 'fa-exclamation-circle',
  103. 'anomaly': 'fa-chart-line',
  104. 'complaint': 'fa-comment-alt'
  105. };
  106. return icons[type] || 'fa-bell';
  107. }
  108. getWarningTypeText(type: string): string {
  109. const types: {[key: string]: string} = {
  110. 'violation': '违规事件',
  111. 'anomaly': '异常波动',
  112. 'complaint': '公众投诉'
  113. };
  114. return types[type] || type;
  115. }
  116. getStatusText(status: string): string {
  117. const statusMap: {[key: string]: string} = {
  118. 'pending': '待处理',
  119. 'processing': '处理中',
  120. 'resolved': '已解决'
  121. };
  122. return statusMap[status] || status;
  123. }
  124. getLevelClass(level: string): string {
  125. return `level-${level}`;
  126. }
  127. getStatusClass(status: string): string {
  128. return `status-${status}`;
  129. }
  130. getAreaStatusClass(status: string): string {
  131. return `area-${status}`;
  132. }
  133. viewWarningDetail(warning: Warning): void {
  134. this.selectedWarning = warning;
  135. this.showWarningDetailModal = true;
  136. }
  137. closeWarningDetail(): void {
  138. this.showWarningDetailModal = false;
  139. this.selectedWarning = null;
  140. }
  141. viewAreaDetail(area: AreaData): void {
  142. this.selectedArea = area;
  143. this.showAreaDetailModal = true;
  144. }
  145. closeAreaDetail(): void {
  146. this.showAreaDetailModal = false;
  147. this.selectedArea = null;
  148. }
  149. handleWarning(warning: Warning): void {
  150. if (confirm(`确定要处理预警 "${warning.title}" 吗?`)) {
  151. warning.status = 'processing';
  152. alert('预警已标记为处理中');
  153. }
  154. }
  155. resolveWarning(warning: Warning): void {
  156. if (confirm(`确定要解决预警 "${warning.title}" 吗?`)) {
  157. warning.status = 'resolved';
  158. alert('预警已标记为已解决');
  159. }
  160. }
  161. goToAIAssistant(): void {
  162. this.router.navigate(['/government/ai-decision-assistant']);
  163. }
  164. constructor(private router: Router) {}
  165. }