device-monitor.component.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!-- device-monitor.component.html -->
  2. <div class="monitor-container">
  3. <div class="monitor-header">
  4. <h2><i class="fa fa-microchip"></i> 单设备监测面板</h2>
  5. <div class="header-info">
  6. <div class="device-info">
  7. <div><strong>设备名称:</strong> CNC 铣床 #01</div>
  8. <div><strong>设备编号:</strong> DEV-2023-001</div>
  9. <div><strong>位置:</strong> 车间A - 产线3</div>
  10. <div><strong>设备类型:</strong> CNC加工中心</div>
  11. </div>
  12. <div class="current-time">
  13. <strong>当前时间:</strong> {{ currentTime | date: 'yyyy-MM-dd HH:mm:ss' }}
  14. </div>
  15. </div>
  16. </div>
  17. <div class="monitor-row">
  18. <div class="waveform-card">
  19. <h3><i class="fa fa-wave-square"></i> 振动波形图 (40秒周期)</h3>
  20. <!-- 修改1: 使用 appEchart 指令和 echartOptions 绑定 -->
  21. <div class="waveform-container"
  22. appEchart
  23. [echartOptions]="chartOptions">
  24. </div>
  25. <div class="waveform-controls">
  26. <div class="threshold-control">
  27. <label>阈值上限: {{ upperThreshold }} mm/s</label>
  28. <!-- 修改2: 更新滑块绑定 -->
  29. <input type="range" min="0.1" max="1.5" step="0.05"
  30. [(ngModel)]="upperThreshold"
  31. (input)="updateThreshold()">
  32. </div>
  33. <div class="threshold-control">
  34. <label>阈值下限: {{ lowerThreshold }} mm/s</label>
  35. <input type="range" min="0.1" max="1.5" step="0.05"
  36. [(ngModel)]="lowerThreshold"
  37. (input)="updateThreshold()">
  38. </div>
  39. </div>
  40. </div>
  41. <div class="status-panel">
  42. <h3><i class="fa fa-heartbeat"></i> 实时状态</h3>
  43. <div class="status-grid">
  44. <!-- 修改3: 修复 ngClass 绑定 -->
  45. <div class="status-card" *ngFor="let status of statusValues">
  46. <div class="status-icon" [ngClass]="status.color">
  47. <i class="fa" [ngClass]="status.icon"></i>
  48. </div>
  49. <div class="status-data">
  50. <div class="status-label">{{ status.label }}</div>
  51. <div class="status-value">{{ status.value }} {{ status.unit }}</div>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="progress-container">
  56. <h4>工序进度</h4>
  57. <div class="progress-steps">
  58. <div class="step active">1</div>
  59. <div class="step active">2</div>
  60. <div class="step active">3</div>
  61. <div class="step current">4</div>
  62. <div class="step">5</div>
  63. <div class="step">6</div>
  64. <div class="step">7</div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="history-panel">
  70. <div class="history-header">
  71. <h3><i class="fa fa-history"></i> 警报历史</h3>
  72. <div class="controls">
  73. <button class="btn"><i class="fa fa-power-off"></i> 紧急停机</button>
  74. <button class="btn"><i class="fa fa-download"></i> 数据导出</button>
  75. </div>
  76. </div>
  77. <div class="alert-history">
  78. <!-- 修改4: 修复 ngClass 绑定 -->
  79. <div class="history-item" *ngFor="let alert of alertHistory">
  80. <div class="alert-time">{{ alert.time }}</div>
  81. <div class="alert-desc">{{ alert.desc }}</div>
  82. <div class="alert-level" [ngClass]="alert.level">
  83. {{
  84. alert.level === 'warning' ? '警告' :
  85. alert.level === 'critical' ? '严重' : '注意'
  86. }}
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>