industry-monitor/industry-monitor-web/src/app/pages/historical-data/historical-data.component.html

<!-- historical-data.component.html -->
<div class="history-container">
  <div class="history-header">
    <div class="header-content">
      <h2><i class="fas fa-chart-line"></i> 历史数据分析</h2>
      <p class="subtitle">深入洞察设备运行状况与性能趋势</p>
    </div>
    <div class="header-actions">
      <button class="btn btn-icon"><i class="fas fa-question-circle"></i></button>
      <button class="btn btn-icon"><i class="fas fa-cog"></i></button>
    </div>
  </div>

  <div class="filter-row">
    <div class="filter-card">
      <div class="card-header">
        <i class="fas fa-calendar-alt"></i>
        <h3>时间范围</h3>
      </div>
      <div class="date-controls">
        <div class="date-input">
          <label>开始日期</label>
          <div class="input-with-icon">
            <input type="date" value="2023-07-01">
            <i class="fas fa-calendar-day"></i>
          </div>
        </div>
        <div class="date-input">
          <label>结束日期</label>
          <div class="input-with-icon">
            <input type="date" value="2023-07-15">
            <i class="fas fa-calendar-day"></i>
          </div>
        </div>
        <button class="btn btn-primary">
          <i class="fas fa-sync-alt"></i> 应用筛选
        </button>
      </div>
    </div>

    <div class="filter-card">
      <div class="card-header">
        <i class="fas fa-microchip"></i>
        <h3>设备选择</h3>
      </div>
      <div class="device-controls">
        <div class="select-wrapper">
          <select class="styled-select">
            <option>CNC 铣床 #01</option>
            <option>注塑机 #05</option>
            <option>装配机器人 #03</option>
          </select>
          <i class="fas fa-chevron-down"></i>
        </div>
        <label class="checkbox-container">
          <input type="checkbox" id="compare-devices">
          <span class="checkmark"></span>
          <span class="checkbox-label">多设备对比</span>
        </label>
      </div>
    </div>
  </div>

  <div class="chart-container">
    <div class="chart-card">
      <div class="chart-header">
        <h3><i class="fas fa-wave-square"></i> 振动数据趋势</h3>
        <div class="chart-toolbar">
          <div class="chart-legend">
            <div class="legend-item">
              <span class="color-dot primary"></span>
              <span>CNC 铣床 #01</span>
            </div>
            <div class="legend-item">
              <span class="color-dot secondary"></span>
              <span>注塑机 #05</span>
            </div>
          </div>
          <div class="chart-actions">
            <button class="btn btn-icon"><i class="fas fa-expand"></i></button>
            <button class="btn btn-icon"><i class="fas fa-download"></i></button>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <div class="chart-placeholder">
          <!-- 这里实际应用中会替换为真实的图表库如Chart.js或ECharts -->
          <div class="chart-mockup">
            <div class="y-axis">
              <span>1.5</span>
              <span>1.0</span>
              <span>0.5</span>
              <span>0</span>
            </div>
            <div class="grid-lines">
              <div class="grid-line"></div>
              <div class="grid-line"></div>
              <div class="grid-line"></div>
              <div class="grid-line"></div>
            </div>
            <div class="data-line primary animated-line"></div>
            <div class="data-line secondary animated-line"></div>
            <div class="x-axis">
              <span>1日</span>
              <span>3日</span>
              <span>5日</span>
              <span>7日</span>
              <span>9日</span>
              <span>11日</span>
              <span>13日</span>
              <span>15日</span>
            </div>
          </div>
          <div class="chart-hover-info">将鼠标悬停在图表上查看详细数据</div>
        </div>
      </div>
    </div>
  </div>

  <div class="metrics-grid">
    <div class="metric-card">
      <div class="metric-header">
        <i class="fas fa-vibration"></i>
        <h4>平均振幅</h4>
      </div>
      <div class="metric-value">0.68<span class="unit">mm/s</span></div>
      <div class="metric-change positive">
        <i class="fas fa-arrow-up"></i> 5.2% 较上周
      </div>
    </div>
    <div class="metric-card">
      <div class="metric-header">
        <i class="fas fa-temperature-high"></i>
        <h4>平均温度</h4>
      </div>
      <div class="metric-value">71.2<span class="unit">°C</span></div>
      <div class="metric-change negative">
        <i class="fas fa-arrow-down"></i> 2.1% 较上周
      </div>
    </div>
    <div class="metric-card">
      <div class="metric-header">
        <i class="fas fa-tachometer-alt"></i>
        <h4>平均转速</h4>
      </div>
      <div class="metric-value">1,420<span class="unit">RPM</span></div>
      <div class="metric-change neutral">
        <i class="fas fa-minus"></i> 0.3% 较上周
      </div>
    </div>
    <div class="metric-card">
      <div class="metric-header">
        <i class="fas fa-heartbeat"></i>
        <h4>平均健康指数</h4>
      </div>
      <div class="metric-value">82<span class="unit">%</span></div>
      <div class="metric-change negative">
        <i class="fas fa-arrow-down"></i> 3.7% 较上周
      </div>
    </div>
  </div>

  <div class="data-table-card">
    <div class="table-header">
      <h3><i class="fas fa-table"></i> 详细数据记录</h3>
      <div class="table-actions">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="搜索设备或日期...">
        </div>
        <button class="btn btn-icon"><i class="fas fa-filter"></i></button>
      </div>
    </div>
    <div class="table-responsive">
      <table class="data-table">
        <thead>
          <tr>
            <th>日期 <i class="fas fa-sort"></i></th>
            <th>设备名称 <i class="fas fa-sort"></i></th>
            <th>振幅(mm/s) <i class="fas fa-sort"></i></th>
            <th>温度(°C) <i class="fas fa-sort"></i></th>
            <th>转速(RPM) <i class="fas fa-sort"></i></th>
            <th>健康指数 <i class="fas fa-sort"></i></th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2023-07-15</td>
            <td>CNC 铣床 #01</td>
            <td>0.58</td>
            <td>68</td>
            <td>1,420</td>
            <td>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 89%; background: #4CAF50;"></div>
                <span>89%</span>
              </div>
            </td>
            <td><span class="status-badge normal"><i class="fas fa-check-circle"></i> 正常</span></td>
            <td><button class="btn btn-icon btn-sm"><i class="fas fa-ellipsis-v"></i></button></td>
          </tr>
          <tr>
            <td>2023-07-15</td>
            <td>注塑机 #05</td>
            <td>0.72</td>
            <td>71</td>
            <td>920</td>
            <td>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 76%; background: #FFC107;"></div>
                <span>76%</span>
              </div>
            </td>
            <td><span class="status-badge warning"><i class="fas fa-exclamation-triangle"></i> 警告</span></td>
            <td><button class="btn btn-icon btn-sm"><i class="fas fa-ellipsis-v"></i></button></td>
          </tr>
          <tr>
            <td>2023-07-14</td>
            <td>CNC 铣床 #01</td>
            <td>0.62</td>
            <td>70</td>
            <td>1,405</td>
            <td>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 85%; background: #4CAF50;"></div>
                <span>85%</span>
              </div>
            </td>
            <td><span class="status-badge normal"><i class="fas fa-check-circle"></i> 正常</span></td>
            <td><button class="btn btn-icon btn-sm"><i class="fas fa-ellipsis-v"></i></button></td>
          </tr>
          <tr>
            <td>2023-07-14</td>
            <td>装配机器人 #03</td>
            <td>0.48</td>
            <td>65</td>
            <td>1,850</td>
            <td>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 65%; background: #F44336;"></div>
                <span>65%</span>
              </div>
            </td>
            <td><span class="status-badge critical"><i class="fas fa-times-circle"></i> 严重</span></td>
            <td><button class="btn btn-icon btn-sm"><i class="fas fa-ellipsis-v"></i></button></td>
          </tr>
          <tr>
            <td>2023-07-13</td>
            <td>CNC 铣床 #01</td>
            <td>0.92</td>
            <td>75</td>
            <td>1,380</td>
            <td>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 82%; background: #FFC107;"></div>
                <span>82%</span>
              </div>
            </td>
            <td><span class="status-badge warning"><i class="fas fa-exclamation-triangle"></i> 警告</span></td>
            <td><button class="btn btn-icon btn-sm"><i class="fas fa-ellipsis-v"></i></button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="table-footer">
      <div class="pagination-info">
        显示 1-5 条，共 23 条记录
      </div>
      <div class="pagination-controls">
        <button class="btn btn-icon"><i class="fas fa-chevron-left"></i></button>
        <button class="btn active">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
        <button class="btn btn-icon"><i class="fas fa-chevron-right"></i></button>
      </div>
    </div>
  </div>

  <div class="report-section">
    <div class="section-header">
      <h3><i class="fas fa-file-alt"></i> 报表生成</h3>
      <p>导出数据用于进一步分析或分享</p>
    </div>
    <div class="report-options">
      <button class="btn btn-outline">
        <i class="fas fa-file-csv"></i> 导出CSV
      </button>
      <button class="btn btn-outline">
        <i class="fas fa-file-pdf"></i> 导出PDF
      </button>
      <button class="btn btn-primary">
        <i class="fas fa-stethoscope"></i> 生成健康诊断报告
      </button>
    </div>
  </div>
</div>