feat: historical-data.css

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

@@ -1,37 +1,61 @@
-
 <!-- historical-data.component.html -->
 <div class="history-container">
   <div class="history-header">
-    <h2><i class="fa fa-chart-bar"></i> 历史数据分析</h2>
+    <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">
-      <h3><i class="fa fa-calendar-alt"></i> 时间范围</h3>
+      <div class="card-header">
+        <i class="fas fa-calendar-alt"></i>
+        <h3>时间范围</h3>
+      </div>
       <div class="date-controls">
         <div class="date-input">
-          <label>开始日期：</label>
-          <input type="date" value="2023-07-01">
+          <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>
-          <input type="date" value="2023-07-15">
+          <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"><i class="fa fa-sync"></i> 应用</button>
+        <button class="btn btn-primary">
+          <i class="fas fa-sync-alt"></i> 应用筛选
+        </button>
       </div>
     </div>
 
-    <div class="device-selector">
-      <h3><i class="fa fa-microchip"></i> 设备选择</h3>
+    <div class="filter-card">
+      <div class="card-header">
+        <i class="fas fa-microchip"></i>
+        <h3>设备选择</h3>
+      </div>
       <div class="device-controls">
-        <select>
-          <option>CNC 铣床 #01</option>
-          <option>注塑机 #05</option>
-          <option>装配机器人 #03</option>
-        </select>
-        <label class="checkbox-container">多设备对比
-          <input type="checkbox">
+        <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>
@@ -40,104 +64,236 @@
   <div class="chart-container">
     <div class="chart-card">
       <div class="chart-header">
-        <h3><i class="fa fa-wave-square"></i> 振动数据趋势 (2023-07-01 - 2023-07-15)</h3>
-        <div class="chart-legend">
-          <div><span class="color-dot primary"></span> CNC 铣床 #01</div>
-          <div><span class="color-dot secondary"></span> 注塑机 #05</div>
+        <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="trend-chart">
-          <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 class="grid-line"></div>
-          </div>
-          <div class="data-line primary"></div>
-          <div class="data-line secondary"></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 class="y-axis">
-            <span>1.5</span><span>1.0</span><span>0.5</span><span>0</span>
+        <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">
-    <h3><i class="fa fa-table"></i> 详细数据记录</h3>
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th>日期</th>
-          <th>设备名称</th>
-          <th>振幅(mm/s)</th>
-          <th>温度(°C)</th>
-          <th>转速(RPM)</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>1420</td>
-          <td>89%</td>
-          <td><span class="status-badge normal">正常</span></td>
-        </tr>
-        <tr>
-          <td>2023-07-15</td>
-          <td>注塑机 #05</td>
-          <td>0.72</td>
-          <td>71</td>
-          <td>920</td>
-          <td>76%</td>
-          <td><span class="status-badge warning">警告</span></td>
-        </tr>
-        <tr>
-          <td>2023-07-14</td>
-          <td>CNC 铣床 #01</td>
-          <td>0.62</td>
-          <td>70</td>
-          <td>1405</td>
-          <td>85%</td>
-          <td><span class="status-badge normal">正常</span></td>
-        </tr>
-        <tr>
-          <td>2023-07-14</td>
-          <td>装配机器人 #03</td>
-          <td>0.48</td>
-          <td>65</td>
-          <td>1850</td>
-          <td>65%</td>
-          <td><span class="status-badge critical">严重</span></td>
-        </tr>
-        <tr>
-          <td>2023-07-13</td>
-          <td>CNC 铣床 #01</td>
-          <td>0.92</td>
-          <td>75</td>
-          <td>1380</td>
-          <td>82%</td>
-          <td><span class="status-badge warning">警告</span></td>
-        </tr>
-      </tbody>
-    </table>
+    <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">
-    <h3><i class="fa fa-file-alt"></i> 报表生成</h3>
+    <div class="section-header">
+      <h3><i class="fas fa-file-alt"></i> 报表生成</h3>
+      <p>导出数据用于进一步分析或分享</p>
+    </div>
     <div class="report-options">
-      <button class="btn"><i class="fa fa-file-csv"></i> 导出CSV</button>
-      <button class="btn"><i class="fa fa-file-pdf"></i> 导出PDF</button>
-      <button class="btn primary"><i class="fa fa-stethoscope"></i> 生成健康诊断报告</button>
+      <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>

industry-monitor-web/src/app/pages/historical-data/historical-data.css

@@ -2,81 +2,217 @@
 :host {
   display: block;
   width: 100%;
-  padding: 15px;
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .history-container {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 20px;
   background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
 }
 
 .history-header {
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 30px;
+  background: linear-gradient(135deg, #3498db, #2c3e50);
+  color: white;
 }
 
-.history-header h2 {
+.header-content h2 {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-size: 24px;
-  color: #2c3e50;
+  gap: 12px;
+}
+
+.header-content .subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  opacity: 0.9;
+  font-weight: 400;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+.btn-icon:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary {
+  background-color: #3498db;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #2980b9;
+}
+
+.btn-outline {
+  border: 1px solid #ddd;
+  background: white;
+  color: #555;
+}
+
+.btn-outline:hover {
+  background: #f5f5f5;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
 }
 
 .filter-row {
   display: flex;
   gap: 20px;
-  margin-bottom: 20px;
+  padding: 20px;
+  background: white;
+  border-bottom: 1px solid #eee;
 }
 
-.filter-card,
-.device-selector {
+.filter-card {
   flex: 1;
   background: white;
   border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 16px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.card-header i {
+  color: #3498db;
+  font-size: 18px;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
 }
 
 .date-controls {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
-  gap: 15px;
+  gap: 12px;
   align-items: flex-end;
 }
 
 .date-input label {
   display: block;
   margin-bottom: 6px;
-  font-size: 14px;
-  color: #2c3e50;
+  font-size: 13px;
+  color: #666;
+  font-weight: 500;
+}
+
+.input-with-icon {
+  position: relative;
+}
+
+.input-with-icon i {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  pointer-events: none;
 }
 
-.date-input input {
+.input-with-icon input {
   width: 100%;
-  padding: 8px 12px;
-  border-radius: 4px;
+  padding: 10px 12px;
+  border-radius: 6px;
   border: 1px solid #ddd;
   font-size: 14px;
+  transition: border 0.2s;
+  padding-right: 36px;
+}
+
+.input-with-icon input:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
 }
 
 .device-controls {
   display: flex;
-  gap: 15px;
+  gap: 16px;
   align-items: center;
 }
 
-.device-controls select {
+.select-wrapper {
+  position: relative;
   flex: 1;
-  padding: 8px 12px;
-  border-radius: 4px;
+}
+
+.select-wrapper i {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  pointer-events: none;
+}
+
+.styled-select {
+  width: 100%;
+  padding: 10px 36px 10px 12px;
+  border-radius: 6px;
   border: 1px solid #ddd;
   font-size: 14px;
+  appearance: none;
+  background: white;
+  cursor: pointer;
+  transition: border 0.2s;
+}
+
+.styled-select:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
 }
 
 .checkbox-container {
@@ -85,6 +221,7 @@
   cursor: pointer;
   font-size: 14px;
   user-select: none;
+  gap: 8px;
 }
 
 .checkbox-container input {
@@ -94,81 +231,129 @@
 }
 
 .checkmark {
-  height: 20px;
-  width: 20px;
-  background-color: #eee;
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  border: 1px solid #ddd;
   border-radius: 4px;
-  margin-left: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
+}
+
+.checkbox-container:hover .checkmark {
+  border-color: #3498db;
 }
 
 .checkbox-container input:checked ~ .checkmark {
   background-color: #3498db;
+  border-color: #3498db;
 }
 
 .checkmark:after {
   content: "";
   display: none;
-  width: 5px;
-  height: 10px;
+  width: 4px;
+  height: 8px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
+  margin-top: -2px;
 }
 
 .checkbox-container input:checked ~ .checkmark:after {
   display: block;
 }
 
+.checkbox-label {
+  color: #555;
+}
+
 .chart-container {
-  margin-bottom: 20px;
+  padding: 0 20px;
 }
 
 .chart-card {
   background: white;
   border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
 }
 
 .chart-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
 }
 
-.chart-legend {
+.chart-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
   display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.chart-header i {
+  color: #3498db;
+}
+
+.chart-toolbar {
+  display: flex;
+  align-items: center;
   gap: 20px;
-  font-size: 14px;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 16px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #666;
 }
 
 .color-dot {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  margin-right: 8px;
+  display: inline-block;
 }
 
 .color-dot.primary { background: #3498db; }
 .color-dot.secondary { background: #9b59b6; }
 
+.chart-actions {
+  display: flex;
+  gap: 8px;
+}
+
 .chart-content {
+  padding: 20px;
+}
+
+.chart-placeholder {
   height: 400px;
   background: #f8fafc;
   border-radius: 6px;
   position: relative;
-  padding: 30px 40px;
+  overflow: hidden;
 }
 
-.trend-chart {
+.chart-mockup {
   width: 100%;
   height: 100%;
   position: relative;
+  padding: 30px 40px;
 }
 
 .grid-lines {
@@ -186,36 +371,401 @@
   background: rgba(0, 0, 0, 0.05);
 }
 
-.grid-line:nth-child(1) { top: 0%; }
-.grid-line:nth-child(2) { top: 25%; }
-.grid-line:nth-child(3) { top: 50%; }
-.grid-line:nth-child(4) { top: 75%; }
-.grid-line:nth-child(5) { top: 100%; }
+.grid-line:nth-child(1) { top: 25%; }
+.grid-line:nth-child(2) { top: 50%; }
+.grid-line:nth-child(3) { top: 75%; }
+.grid-line:nth-child(4) { bottom: 0; }
 
 .data-line {
   position: absolute;
   height: 3px;
   border-radius: 3px;
-  bottom: 0;
+  bottom: 30px;
+  left: 40px;
+  right: 40px;
+  transform-origin: left;
 }
 
 .data-line.primary {
   background: #3498db;
-  width: 70%;
+  animation: drawLine 1.5s ease-out forwards;
 }
 
 .data-line.secondary {
   background: #9b59b6;
-  width: 60%;
+  animation: drawLine 1.5s ease-out 0.3s forwards;
+  opacity: 0;
+}
+
+@keyframes drawLine {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
 }
 
 .x-axis {
   position: absolute;
-  bottom: -30px;
+  bottom: 10px;
+  left: 40px;
+  right: 40px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+}
+
+.y-axis {
+  position: absolute;
+  left: 20px;
+  top: 30px;
+  bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #666;
+}
+
+.chart-hover-info {
+  position: absolute;
+  bottom: 10px;
   left: 0;
   right: 0;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.metric-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.metric-header i {
+  font-size: 20px;
+  color: #3498db;
+  width: 36px;
+  height: 36px;
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.metric-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+.metric-value .unit {
+  font-size: 14px;
+  color: #999;
+  margin-left: 4px;
+  font-weight: 400;
+}
+
+.metric-change {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.metric-change.positive {
+  color: #27ae60;
+}
+
+.metric-change.negative {
+  color: #e74c3c;
+}
+
+.metric-change.neutral {
+  color: #7f8c8d;
+}
+
+.data-table-card {
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+
+.table-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.table-header i {
+  color: #3498db;
+}
+
+.table-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-box i {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+}
+
+.search-box input {
+  padding: 8px 12px 8px 36px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  width: 200px;
+  transition: all 0.2s;
+}
+
+.search-box input:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.table-responsive {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.data-table th {
+  background: #f5f7fa;
+  padding: 12px 16px;
+  text-align: left;
+  font-weight: 600;
+  color: #2c3e50;
+  position: relative;
+  white-space: nowrap;
+}
+
+.data-table th i {
+  margin-left: 6px;
+  color: #999;
   font-size: 12px;
+}
+
+.data-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #eee;
+  color: #555;
+}
+
+.data-table tr:hover td {
+  background: #f8fafc;
+}
+
+.progress-bar {
+  height: 24px;
+  background: #f0f0f0;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.progress-bar span {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  line-height: 24px;
+  font-size: 12px;
+  color: white;
+  z-index: 1;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-badge i {
+  font-size: 10px;
+}
+
+.status-badge.normal {
+  background: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+}
+
+.status-badge.warning {
+  background: rgba(241, 196, 15, 0.1);
+  color: #f1c40f;
+}
+
+.status-badge.critical {
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.pagination-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.pagination-controls .btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  background: white;
+}
+
+.pagination-controls .btn.active {
+  background: #3498db;
   color: white;
+  border-color: #3498db;
+}
+
+.report-section {
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  margin: 0 20px 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.section-header h3 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-header i {
+  color: #3498db;
+}
+
+.section-header p {
+  margin: 0;
+  font-size: 13px;
+  color: #666;
+}
+
+.report-options {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-row {
+    flex-direction: column;
+  }
+  
+  .date-controls {
+    grid-template-columns: 1fr;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .table-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .search-box input {
+    width: 100%;
+  }
+  
+  .table-footer {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
 }