industry-monitor/industry-monitor-web/src/app/pages/device-monitor/device-monitor.component.html

<!-- 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>