123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <!-- device-monitor.component.html -->
- <div class="monitor-container">
- <div class="monitor-header">
- <h2><i class="fa fa-microchip"></i> 单设备监测面板</h2>
- <div class="header-info">
- <div class="device-info">
- <div><strong>设备名称:</strong> CNC 铣床 #01</div>
- <div><strong>设备编号:</strong> DEV-2023-001</div>
- <div><strong>位置:</strong> 车间A - 产线3</div>
- <div><strong>设备类型:</strong> CNC加工中心</div>
- </div>
- <div class="current-time">
- <strong>当前时间:</strong> {{ currentTime | date: 'yyyy-MM-dd HH:mm:ss' }}
- </div>
- </div>
- </div>
- <div class="monitor-row">
- <div class="waveform-card">
- <h3><i class="fa fa-wave-square"></i> 振动波形图 (40秒周期)</h3>
- <!-- 修改1: 使用 appEchart 指令和 echartOptions 绑定 -->
- <div class="waveform-container"
- appEchart
- [echartOptions]="chartOptions">
- </div>
- <div class="waveform-controls">
- <div class="threshold-control">
- <label>阈值上限: {{ upperThreshold }} mm/s</label>
- <!-- 修改2: 更新滑块绑定 -->
- <input type="range" min="0.1" max="1.5" step="0.05"
- [(ngModel)]="upperThreshold"
- (input)="updateThreshold()">
- </div>
- <div class="threshold-control">
- <label>阈值下限: {{ lowerThreshold }} mm/s</label>
- <input type="range" min="0.1" max="1.5" step="0.05"
- [(ngModel)]="lowerThreshold"
- (input)="updateThreshold()">
- </div>
- </div>
- </div>
- <div class="status-panel">
- <h3><i class="fa fa-heartbeat"></i> 实时状态</h3>
- <div class="status-grid">
- <!-- 修改3: 修复 ngClass 绑定 -->
- <div class="status-card" *ngFor="let status of statusValues">
- <div class="status-icon" [ngClass]="status.color">
- <i class="fa" [ngClass]="status.icon"></i>
- </div>
- <div class="status-data">
- <div class="status-label">{{ status.label }}</div>
- <div class="status-value">{{ status.value }} {{ status.unit }}</div>
- </div>
- </div>
- </div>
- <div class="progress-container">
- <h4>工序进度</h4>
- <div class="progress-steps">
- <div class="step active">1</div>
- <div class="step active">2</div>
- <div class="step active">3</div>
- <div class="step current">4</div>
- <div class="step">5</div>
- <div class="step">6</div>
- <div class="step">7</div>
- </div>
- </div>
- </div>
- </div>
- <div class="history-panel">
- <div class="history-header">
- <h3><i class="fa fa-history"></i> 警报历史</h3>
- <div class="controls">
- <button class="btn"><i class="fa fa-power-off"></i> 紧急停机</button>
- <button class="btn"><i class="fa fa-download"></i> 数据导出</button>
- </div>
- </div>
- <div class="alert-history">
- <!-- 修改4: 修复 ngClass 绑定 -->
- <div class="history-item" *ngFor="let alert of alertHistory">
- <div class="alert-time">{{ alert.time }}</div>
- <div class="alert-desc">{{ alert.desc }}</div>
- <div class="alert-level" [ngClass]="alert.level">
- {{
- alert.level === 'warning' ? '警告' :
- alert.level === 'critical' ? '严重' : '注意'
- }}
- </div>
- </div>
- </div>
- </div>
- </div>
|