fix:factory-overview

industry-monitor-web/src/app/pages/factory-overview/factory-overview.component.html

@@ -1,14 +1,32 @@
-
+<!-- factory-overview.component.html -->
 <div class="dashboard">
   <div class="dashboard-header">
-    <h2><i class="fa fa-industry"></i> 工厂总览看板</h2>
-    <div class="time-display">
-      <i class="fa fa-clock"></i> {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
+    <div class="header-left">
+      <h2><i class="fa fa-industry"></i> 工厂总览看板</h2>
+      <div class="quick-nav">
+        <button class="nav-btn active">总览</button>
+        <button class="nav-btn">设备管理</button>
+        <button class="nav-btn">生产监控</button>
+        <button class="nav-btn">数据分析</button>
+      </div>
+    </div>
+    
+    <div class="header-right">
+      <div class="user-info">
+        <i class="fa fa-user-circle"></i>
+        <span>管理员</span>
+      </div>
+      <div class="time-display">
+        <i class="fa fa-clock"></i> {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
+      </div>
+      <button class="refresh-btn" (click)="refreshData()">
+        <i class="fa fa-sync-alt"></i> 刷新数据
+      </button>
     </div>
   </div>
 
   <div class="metric-grid">
-    <div class="metric-card">
+    <div class="metric-card" (mouseenter)="cardHover(0)" [class.hover]="hoverIndex === 0">
       <div class="metric-icon blue">
         <i class="fa fa-cogs"></i>
       </div>
@@ -16,10 +34,16 @@
         <h3>设备运行状态</h3>
         <p class="metric-value">45/50</p>
         <p class="metric-label">运行设备数/总设备数</p>
+        <div class="metric-progress">
+          <div class="progress-bar" [style.width.%]="90"></div>
+        </div>
+      </div>
+      <div class="metric-hover">
+        <i class="fa fa-arrow-right"></i> 查看详情
       </div>
     </div>
-
-    <div class="metric-card">
+    
+    <div class="metric-card" (mouseenter)="cardHover(1)" [class.hover]="hoverIndex === 1">
       <div class="metric-icon orange">
         <i class="fa fa-exclamation-triangle"></i>
       </div>
@@ -27,10 +51,16 @@
         <h3>今日预警</h3>
         <p class="metric-value">12</p>
         <p class="metric-label">预警总数</p>
+        <div class="metric-progress">
+          <div class="progress-bar" [style.width.%]="24"></div>
+        </div>
+      </div>
+      <div class="metric-hover">
+        <i class="fa fa-arrow-right"></i> 查看详情
       </div>
     </div>
-
-    <div class="metric-card">
+    
+    <div class="metric-card" (mouseenter)="cardHover(2)" [class.hover]="hoverIndex === 2">
       <div class="metric-icon green">
         <i class="fa fa-heartbeat"></i>
       </div>
@@ -38,10 +68,16 @@
         <h3>设备健康指数</h3>
         <p class="metric-value">92%</p>
         <p class="metric-label">整体设备健康</p>
+        <div class="metric-progress">
+          <div class="progress-bar" [style.width.%]="92"></div>
+        </div>
+      </div>
+      <div class="metric-hover">
+        <i class="fa fa-arrow-right"></i> 查看详情
       </div>
     </div>
-
-    <div class="metric-card">
+    
+    <div class="metric-card" (mouseenter)="cardHover(3)" [class.hover]="hoverIndex === 3">
       <div class="metric-icon purple">
         <i class="fa fa-tachometer-alt"></i>
       </div>
@@ -49,98 +85,153 @@
         <h3>运行参数</h3>
         <p class="metric-value">65°C / 1450 RPM</p>
         <p class="metric-label">平均温度/转速</p>
+        <div class="metric-progress">
+          <div class="progress-bar" [style.width.%]="75"></div>
+        </div>
+      </div>
+      <div class="metric-hover">
+        <i class="fa fa-arrow-right"></i> 查看详情
       </div>
     </div>
   </div>
 
   <div class="dashboard-row">
-    <div class="chart-card">
-      <h3><i class="fa fa-chart-pie"></i> 设备状态分布</h3>
-      <div class="pie-chart">
-        <div class="chart-container">
-          <div class="chart-slice normal" style="--value: 80;"></div>
-          <div class="chart-slice warning" style="--value: 15;"></div>
-          <div class="chart-slice danger" style="--value: 5;"></div>
-          <div class="chart-center"></div>
+    <div class="chart-card with-tabs">
+      <div class="chart-header">
+        <h3><i class="fa fa-chart-pie"></i> 设备状态分析</h3>
+        <div class="chart-tabs">
+          <button class="tab-btn active">实时状态</button>
+          <button class="tab-btn">历史趋势</button>
+          <button class="tab-btn">对比分析</button>
         </div>
-        <div class="chart-legend">
-          <div><span class="dot normal"></span> 正常 80%</div>
-          <div><span class="dot warning"></span> 警告 15%</div>
-          <div><span class="dot danger"></span> 危险 5%</div>
+      </div>
+      
+      <div class="chart-container-wrapper">
+        <div class="pie-chart">
+          <div class="chart-container">
+            <div class="chart-slice normal" style="--value: 80;"></div>
+            <div class="chart-slice warning" style="--value: 15;"></div>
+            <div class="chart-slice danger" style="--value: 5;"></div>
+            <div class="chart-center">
+              <div class="chart-center-text">92%</div>
+            </div>
+          </div>
+          <div class="chart-legend">
+            <div><span class="dot normal"></span> 正常 80%</div>
+            <div><span class="dot warning"></span> 警告 15%</div>
+            <div><span class="dot danger"></span> 危险 5%</div>
+          </div>
+        </div>
+        <div class="chart-details">
+          <div class="detail-item">
+            <div class="detail-label">设备总数</div>
+            <div class="detail-value">50台</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">在线设备</div>
+            <div class="detail-value">45台</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">离线设备</div>
+            <div class="detail-value">5台</div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">平均在线率</div>
+            <div class="detail-value">92.5%</div>
+          </div>
         </div>
       </div>
     </div>
-
-    <div class="alert-card">
-      <h3><i class="fa fa-bell"></i> 实时警报</h3>
+    
+    <div class="alert-card with-filter">
+      <div class="alert-header">
+        <h3><i class="fa fa-bell"></i> 实时警报 (12)</h3>
+        <div class="alert-filter">
+          <select>
+            <option>全部警报</option>
+            <option>严重警报</option>
+            <option>警告</option>
+            <option>通知</option>
+          </select>
+        </div>
+      </div>
+      
       <div class="alert-list">
         <div class="alert-item critical">
           <i class="fa fa-exclamation-circle"></i>
           <div class="alert-content">
             <strong>设备 #A23 温度过高</strong>
             <span>车间B - 产线2 | 15:23:45</span>
-            <comp-star-rating
-              [star]="rating"
-              (onStarChange)="ratingChange($event)"
-            ></comp-star-rating>
-            <p>当前评分: {{rating}}</p>
           </div>
+          <div class="alert-status">未处理</div>
         </div>
         <div class="alert-item warning">
           <i class="fa fa-exclamation-triangle"></i>
           <div class="alert-content">
             <strong>设备 #B07 振动异常</strong>
             <span>车间A - 产线4 | 15:20:12</span>
-            <p>{{ 125006 | tok}}</p>
-            <p>{{ 100 | tok}}</p>
-            <p>{{ 99987565 | tok}}</p>
           </div>
+          <div class="alert-status">处理中</div>
         </div>
         <div class="alert-item info">
           <i class="fa fa-info-circle"></i>
-            <div class="alert-content">
+          <div class="alert-content">
             <strong>设备 #C15 转速过低</strong>
             <span>车间C - 产线1 | 14:58:33</span>
           </div>
+          <div class="alert-status">已处理</div>
+        </div>
+        <div class="alert-item critical">
+          <i class="fa fa-exclamation-circle"></i>
+          <div class="alert-content">
+            <strong>设备 #D42 电压异常</strong>
+            <span>车间A - 产线3 | 14:45:21</span>
+          </div>
+          <div class="alert-status">未处理</div>
         </div>
       </div>
+      <div class="alert-footer">
+        <button class="view-all-btn">
+          <i class="fa fa-list"></i> 查看所有警报
+        </button>
+      </div>
     </div>
   </div>
-
+  
   <div class="trend-card">
-  <h3><i class="fa fa-chart-line"></i> 健康指数趋势 (24小时)</h3>
-
-  <div class="trend-description">
-    过去24小时内设备健康指数变化趋势，当前平均健康指数为82，较昨日上升5.2%。
-  </div>
-
-  <div class="trend-graph">
-    <div class="graph-bar" style="--height: 60;" data-value="60"></div>
-    <div class="graph-bar" style="--height: 65;" data-value="65"></div>
-    <div class="graph-bar" style="--height: 70;" data-value="70"></div>
-    <div class="graph-bar" style="--height: 82;" data-value="82"></div>
-    <div class="graph-bar" style="--height: 88;" data-value="88"></div>
-    <div class="graph-bar" style="--height: 92;" data-value="92"></div>
-    <div class="graph-bar" style="--height: 90;" data-value="90"></div>
-  </div>
-
-  <div class="time-labels">
-    <span>00:00</span>
-    <span>04:00</span>
-    <span>08:00</span>
-    <span>12:00</span>
-    <span>16:00</span>
-    <span>20:00</span>
-    <span>24:00</span>
-  </div>
-
-  <div class="trend-footer">
-    <div class="trend-summary">
-      数据更新时间: {{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
+    <div class="trend-header">
+      <h3><i class="fa fa-chart-line"></i> 健康指数趋势</h3>
+     
+      <div class="time-range-selector">
+        <button class="time-btn active">24小时</button>
+        <button class="time-btn">7天</button>
+        <button class="time-btn">30天</button>
+        <button class="time-btn">自定义</button>
+      </div>
+      
     </div>
-    <div class="trend-change positive">
-      <i class="fa fa-arrow-up"></i> 5.2%
+
+    
+    
+    <div class="trend-graph">
+      <div class="graph-labels">
+        <span>04:00</span>
+        <span>08:00</span>
+        <span>12:00</span>
+        <span>16:00</span>
+        <span>20:00</span>
+        <span>00:00</span>
+        <span>当前</span>
+      </div>
+      <div class="graph-bars">
+        <div class="graph-bar" [style.height.%]="60"></div>
+        <div class="graph-bar" [style.height.%]="65"></div>
+        <div class="graph-bar" [style.height.%]="70"></div>
+        <div class="graph-bar" [style.height.%]="82"></div>
+        <div class="graph-bar" [style.height.%]="88"></div>
+        <div class="graph-bar" [style.height.%]="92"></div>
+        <div class="graph-bar" [style.height.%]="90"></div>
+      </div>
     </div>
   </div>
-</div>
-</div>
+</div>

industry-monitor-web/src/app/pages/factory-overview/factory-overview.component.ts

@@ -1,8 +1,6 @@
-
+// factory-overview.component.ts
 import { DatePipe } from '@angular/common';
 import { Component, ViewEncapsulation } from '@angular/core';
-import { CompStarRatingComponent } from '../../componets/star-rating/comp-star-rating.component';
-import { TokPipe } from '../../pipes/tok-pipe/tok.pipe';
 
 @Component({
   standalone: true,
@@ -10,57 +8,28 @@ import { TokPipe } from '../../pipes/tok-pipe/tok.pipe';
   styleUrls: ['./factory-overview.css'],
   templateUrl: './factory-overview.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [
-    DatePipe,TokPipe,
-    CompStarRatingComponent
-  ]
-
+  imports: [DatePipe]
 })
 export class FactoryOverviewComponent {
-  // 在组件类中添加以下属性
-
-  // 设备状态数据
-  deviceStatus = {
-    total: 24,
-    normal: { count: 19, percentage: 80 },
-    warning: { count: 4, percentage: 15 },
-    danger: { count: 1, percentage: 5 }
-  };
-
-  // 饼图角度计算
-  get pieChartStyle() {
-    return {
-      'background': `conic-gradient(
-        #27ae60 0% ${this.deviceStatus.normal.percentage}%,
-        #f39c12 ${this.deviceStatus.normal.percentage}% ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}%,
-        #e74c3c ${this.deviceStatus.normal.percentage + this.deviceStatus.warning.percentage}% 100%
-      )`
-    };
-
-}
-  rating:number = 0
-  ratingChange(rating: number) {
-    this.rating = rating;
-  }
   currentTime: Date = new Date();
-   ngOnInit(): void {
+  hoverIndex: number = -1;
+
+  constructor() {
     // 更新时间，每秒更新一次
     setInterval(() => {
       this.currentTime = new Date();
     }, 1000);
+  }
 
+  // 修复：添加 cardHover 方法
+  cardHover(index: number) {
+    this.hoverIndex = index;
   }
 
-    tok(value:number){
-      if(value<=1000){
-        return value
-      }
-      if(value<=999999){
-        return (value/1000).toFixed(0) + 'k'
-      }
-      if(value<=999999999){
-        return (value/10000).toFixed(0) + '万'
-      }
-      return value
-    }
-}
+  // 添加刷新数据方法
+  refreshData() {
+    // 这里可以添加实际的数据刷新逻辑
+    console.log('刷新数据...');
+    this.currentTime = new Date();
+  }
+}

industry-monitor-web/src/app/pages/factory-overview/factory-overview.css

@@ -1,8 +1,9 @@
-/* 组件容器样式 */
+/* factory-overview.css */
 :host {
   display: block;
   width: 100%;
   padding: 15px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .dashboard {
@@ -24,12 +25,53 @@
   border-bottom: 1px solid #eee;
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
 .dashboard-header h2 {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 24px;
   color: #2c3e50;
+  margin: 0;
+}
+
+.quick-nav {
+  display: flex;
+  gap: 10px;
+}
+
+.nav-btn {
+  padding: 8px 16px;
+  background: #f1f2f6;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.nav-btn.active, .nav-btn:hover {
+  background: #2c3e50;
+  color: white;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #2c3e50;
 }
 
 .time-display {
@@ -43,6 +85,24 @@
   gap: 8px;
 }
 
+.refresh-btn {
+  background: #27ae60;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.3s ease;
+}
+
+.refresh-btn:hover {
+  background: #219653;
+}
+
 /* 指标网格样式 */
 .metric-grid {
   display: grid;
@@ -59,6 +119,15 @@
   display: flex;
   align-items: center;
   gap: 15px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
 }
 
 .metric-icon {
@@ -77,6 +146,10 @@
 .metric-icon.orange { background: #f39c12; }
 .metric-icon.purple { background: #9b59b6; }
 
+.metric-data {
+  flex: 1;
+}
+
 .metric-data h3 {
   font-size: 16px;
   font-weight: 600;
@@ -88,19 +161,115 @@
   font-size: 24px;
   font-weight: 700;
   color: #2c3e50;
+  margin: 5px 0;
 }
 
 .metric-label {
   font-size: 14px;
   color: #95a5a6;
+  margin: 0;
+}
+
+/* 进度条样式 */
+.metric-progress {
+  height: 6px;
+  background: #e0e0e0;
+  border-radius: 3px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
+
+.metric-card:nth-child(1) .progress-bar { background: #3498db; }
+.metric-card:nth-child(2) .progress-bar { background: #f39c12; }
+.metric-card:nth-child(3) .progress-bar { background: #27ae60; }
+.metric-card:nth-child(4) .progress-bar { background: #9b59b6; }
+
+/* 悬停效果 */
+.metric-hover {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 10px;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(100%);
+  transition: all 0.3s ease;
+}
+
+.metric-card.hover .metric-hover {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 仪表板行布局 */
+.dashboard-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.chart-card, .alert-card {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.trend-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
 /* 饼图样式 */
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.chart-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.tab-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 15px;
+  background: #f1f1f1;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.tab-btn.active, .tab-btn:hover {
+  background: #2c3e50;
+  color: white;
+}
+
+.chart-container-wrapper {
+  display: flex;
+  gap: 30px;
+}
+
 .pie-chart {
   display: flex;
   align-items: center;
   gap: 30px;
-  padding: 20px 0;
+  padding: 10px 0;
 }
 
 .chart-container {
@@ -124,6 +293,15 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-center-text {
+  font-size: 20px;
+  font-weight: bold;
+  color: #2c3e50;
 }
 
 .chart-legend div {
@@ -145,9 +323,58 @@
 .dot.warning { background: #f39c12; }
 .dot.danger { background: #e74c3c; }
 
+/* 图表详情 */
+.chart-details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  flex: 1;
+}
+
+.detail-item {
+  background: #f8fafc;
+  border-radius: 6px;
+  padding: 12px;
+  transition: transform 0.3s ease;
+}
+
+.detail-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+.detail-label {
+  font-size: 13px;
+  color: #7f8c8d;
+  margin-bottom: 5px;
+}
+
+.detail-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
 /* 警报样式 */
+.alert-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.alert-filter select {
+  padding: 6px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+}
+
 .alert-list {
   margin-top: 15px;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .alert-item {
@@ -159,6 +386,12 @@
   margin-bottom: 10px;
   background: #f9f9f9;
   border-left: 4px solid;
+  transition: all 0.3s ease;
+}
+
+.alert-item:hover {
+  transform: translateX(5px);
+  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
 }
 
 .alert-item.critical {
@@ -199,126 +432,126 @@
   color: #95a5a6;
 }
 
-/* 趋势图样式 */
-.trend-graph {
-  display: flex;
-  align-items: flex-end;
-  gap: 10px;
-  height: 200px;
-  padding: 20px;
-  background: #f8fafc;
-  border-radius: 6px;
-  margin-top: 15px;
+.alert-status {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: bold;
 }
 
-.graph-bar {
-  flex: 1;
-  background: #3498db;
-  height: calc(var(--height) * 2px);
-  border-radius: 4px 4px 0 0;
-  position: relative;
+.alert-item.critical .alert-status {
+  background: #e74c3c;
+  color: white;
 }
 
-/* 仪表板行布局 */
-.dashboard-row {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
+.alert-item.warning .alert-status {
+  background: #f39c12;
+  color: white;
 }
 
-.chart-card, .alert-card {
-  flex: 1;
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+.alert-item.info .alert-status {
+  background: #3498db;
+  color: white;
 }
 
-.trend-card {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+.alert-footer {
+  margin-top: 15px;
+  text-align: center;
 }
-/* 健康指数趋势卡片样式 */
-.trend-card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  transition: all 0.3s ease;
-  border: 1px solid #eaeef2;
-  position: relative;
-  overflow: hidden;
+
+.view-all-btn {
+  background: #3498db;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.3s ease;
 }
 
-.trend-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
-  border-color: #3498db;
+.view-all-btn:hover {
+  background: #2980b9;
 }
 
-.trend-card h3 {
-  margin: 0 0 15px 0;
-  font-size: 18px;
-  color: #2c3e50;
+/* 趋势图样式 */
+.trend-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 10px;
+  margin-bottom: 15px;
 }
 
-.trend-card h3 i {
-  color: #3498db;
-  font-size: 20px;
+.time-range-selector {
+  display: flex;
+  gap: 8px;
 }
 
-.trend-description {
-  font-size: 14px;
-  color: #718096;
-  margin-bottom: 20px;
-  line-height: 1.5;
+.time-btn {
+  padding: 6px 12px;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  background: white;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.time-btn.active, .time-btn:hover {
+  border-color: #3498db;
+  background: #3498db;
+  color: white;
 }
 
 .trend-graph {
   display: flex;
-  align-items: flex-end;
-  gap: 12px;
+  flex-direction: column;
   height: 200px;
   padding: 20px;
   background: #f8fafc;
-  border-radius: 8px;
+  border-radius: 6px;
   margin-top: 15px;
   position: relative;
 }
 
+.graph-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+  color: #7f8c8d;
+  font-size: 12px;
+}
+
+.graph-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  height: 100%;
+  width: 100%;
+}
+
 .graph-bar {
   flex: 1;
-  background: linear-gradient(to top, #3498db, #67b7f5);
-  height: calc(var(--height) * 1.8px);
-  border-radius: 6px 6px 0 0;
+  background: #3498db;
+  border-radius: 4px 4px 0 0;
   position: relative;
-  transition: all 0.4s ease;
-  cursor: pointer;
-  min-width: 30px;
-}
-
-.graph-bar:hover {
-  transform: scaleY(1.05);
-  box-shadow: 0 -4px 8px rgba(52, 152, 219, 0.3);
+  transition: height 0.5s ease;
 }
 
 .graph-bar::after {
-  content: attr(data-value);
+  content: attr(style);
   position: absolute;
   top: -25px;
   left: 50%;
   transform: translateX(-50%);
-  background: #2c3e50;
+  background: rgba(0,0,0,0.7);
   color: white;
   padding: 3px 8px;
-  border-radius: 12px;
+  border-radius: 4px;
   font-size: 12px;
-  font-weight: 600;
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -327,60 +560,30 @@
   opacity: 1;
 }
 
-.time-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #95a5a6;
-  padding: 0 10px;
-}
-
-.trend-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid #eaeef2;
-}
-
-.trend-summary {
-  font-size: 14px;
-  color: #718096;
-}
-
-.trend-change {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.trend-change.positive {
-  color: #27ae60;
-}
-
-.trend-change.negative {
-  color: #e74c3c;
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .dashboard-row {
+    flex-direction: column;
+  }
 }
 
-/* 响应式设计 */
 @media (max-width: 768px) {
-  .trend-card {
-    padding: 15px;
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
   }
-
-  .trend-graph {
-    height: 160px;
-    padding: 15px;
-    gap: 8px;
+  
+  .header-left, .header-right {
+    width: 100%;
   }
-
-  .graph-bar {
-    min-width: 20px;
+  
+  .quick-nav {
+    overflow-x: auto;
+    padding-bottom: 10px;
   }
-}
-
-
+  
+  .chart-container-wrapper {
+    flex-direction: column;
+  }
+}