data-reports.ts 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import { Component } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { RouterModule } from '@angular/router';
  4. import { FormsModule } from '@angular/forms';
  5. interface LocationData {
  6. id: string;
  7. name: string;
  8. type: 'community' | 'mall' | 'school' | 'office';
  9. wasteVolume: number;
  10. recycleVolume: number;
  11. capacity: number;
  12. status: 'normal' | 'warning' | 'critical';
  13. lastUpdate: string;
  14. }
  15. interface ChartData {
  16. label: string;
  17. value: number;
  18. color?: string;
  19. }
  20. @Component({
  21. selector: 'app-data-reports',
  22. standalone: true,
  23. imports: [CommonModule, RouterModule, FormsModule],
  24. templateUrl: './data-reports.html',
  25. styleUrl: './data-reports.scss'
  26. })
  27. export class DataReports {
  28. reportType: 'business' | 'environmental' | 'government' = 'business';
  29. timeRange: 'today' | 'week' | 'month' | 'year' = 'month';
  30. showMonitorModal = false;
  31. // 地点监控数据
  32. locations: LocationData[] = [
  33. {
  34. id: 'LOC-001',
  35. name: '望京社区A区',
  36. type: 'community',
  37. wasteVolume: 850,
  38. recycleVolume: 680,
  39. capacity: 1000,
  40. status: 'warning',
  41. lastUpdate: '2分钟前'
  42. },
  43. {
  44. id: 'LOC-002',
  45. name: '朝阳大悦城',
  46. type: 'mall',
  47. wasteVolume: 920,
  48. recycleVolume: 750,
  49. capacity: 1000,
  50. status: 'critical',
  51. lastUpdate: '5分钟前'
  52. },
  53. {
  54. id: 'LOC-003',
  55. name: '中关村创业大街',
  56. type: 'office',
  57. wasteVolume: 450,
  58. recycleVolume: 380,
  59. capacity: 1000,
  60. status: 'normal',
  61. lastUpdate: '10分钟前'
  62. },
  63. {
  64. id: 'LOC-004',
  65. name: '北京实验学校',
  66. type: 'school',
  67. wasteVolume: 680,
  68. recycleVolume: 580,
  69. capacity: 1000,
  70. status: 'normal',
  71. lastUpdate: '15分钟前'
  72. },
  73. {
  74. id: 'LOC-005',
  75. name: '国贸CBD商圈',
  76. type: 'mall',
  77. wasteVolume: 950,
  78. recycleVolume: 820,
  79. capacity: 1000,
  80. status: 'critical',
  81. lastUpdate: '3分钟前'
  82. },
  83. {
  84. id: 'LOC-006',
  85. name: '海淀区社区B区',
  86. type: 'community',
  87. wasteVolume: 720,
  88. recycleVolume: 600,
  89. capacity: 1000,
  90. status: 'normal',
  91. lastUpdate: '8分钟前'
  92. }
  93. ];
  94. // 报表数据
  95. get businessData(): ChartData[] {
  96. return [
  97. { label: '纸类', value: 35, color: '#3498db' },
  98. { label: '塑料', value: 28, color: '#2ecc71' },
  99. { label: '金属', value: 18, color: '#f39c12' },
  100. { label: '玻璃', value: 12, color: '#9b59b6' },
  101. { label: '其他', value: 7, color: '#95a5a6' }
  102. ];
  103. }
  104. get environmentalData(): ChartData[] {
  105. return [
  106. { label: '碳减排', value: 1250, color: '#2ecc71' },
  107. { label: '节水量', value: 3200, color: '#3498db' },
  108. { label: '节电量', value: 5800, color: '#f39c12' }
  109. ];
  110. }
  111. get criticalLocations(): LocationData[] {
  112. return this.locations.filter(loc => loc.status === 'critical');
  113. }
  114. get warningLocations(): LocationData[] {
  115. return this.locations.filter(loc => loc.status === 'warning');
  116. }
  117. getLocationIcon(type: string): string {
  118. const icons: {[key: string]: string} = {
  119. 'community': '🏘️',
  120. 'mall': '🏬',
  121. 'school': '🏫',
  122. 'office': '🏢'
  123. };
  124. return icons[type] || '📍';
  125. }
  126. getStatusText(status: string): string {
  127. const statusMap: {[key: string]: string} = {
  128. 'normal': '正常',
  129. 'warning': '预警',
  130. 'critical': '严重'
  131. };
  132. return statusMap[status] || status;
  133. }
  134. getStatusClass(status: string): string {
  135. return `status-${status}`;
  136. }
  137. getCapacityPercent(location: LocationData): number {
  138. return Math.round((location.wasteVolume / location.capacity) * 100);
  139. }
  140. openMonitorView(): void {
  141. this.showMonitorModal = true;
  142. }
  143. closeMonitorView(): void {
  144. this.showMonitorModal = false;
  145. }
  146. dispatchWorkers(location: LocationData): void {
  147. alert(`正在为 ${location.name} 派遣回收人员...\n当前垃圾量: ${location.wasteVolume}kg`);
  148. }
  149. exportReport(format: string): void {
  150. alert(`正在导出${format.toUpperCase()}格式报表...`);
  151. }
  152. submitToGov(): void {
  153. if (confirm('确定要提交政府申报报表吗?')) {
  154. alert('报表已成功提交!');
  155. }
  156. }
  157. constructor() {}
  158. }