From b756b3d58c5c4160fc2e0f2f185d2ac5e302fb2e Mon Sep 17 00:00:00 2001
From: haoliang <821644@qq.com>
Date: Tue, 28 Apr 2026 12:22:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=8C=87=E6=A0=87=E6=B7=BB=E5=8A=A0=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E8=AF=B4=E6=98=8Etooltip=EF=BC=8Chover=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=9A=E4=BF=97=E6=98=93=E6=87=82=E7=9A=84=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E5=8F=A3=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/dashboard/DashboardPage.vue     | 91 ++++++++++++++++---
 1 file changed, 77 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/dashboard/DashboardPage.vue b/frontend/src/views/dashboard/DashboardPage.vue
index 27d3468..155d7db 100644
--- a/frontend/src/views/dashboard/DashboardPage.vue
+++ b/frontend/src/views/dashboard/DashboardPage.vue
@@ -5,7 +5,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">在线机床数</div>
+            <div class="stat-label">
+              在线机床数
+              <el-tooltip content="当前网络连通的机床数量占所有已启用机床总数的比例。系统通过Ping检测机床网络，连通即为在线。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">{{ summary.onlineCount }}<span class="stat-unit"> / {{ summary.totalMachines }}</span></div>
           </div>
         </el-card>
@@ -13,7 +18,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">今日总产量</div>
+            <div class="stat-label">
+              今日总产量
+              <el-tooltip content="今日所有机床加工完成的零件总数，包含手工修正后的数值。系统以NC程序名区分零件，切换程序时自动结算上一段产量。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">{{ summary.todayProduction?.toLocaleString() }}</div>
           </div>
         </el-card>
@@ -21,7 +31,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">采集服务</div>
+            <div class="stat-label">
+              采集服务
+              <el-tooltip content="数据采集服务的运行状态。服务每30秒向系统上报一次心跳，超过90秒未上报则判定为停止。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">
               <el-tag :type="collectorStatus.status === 'running' ? 'success' : 'danger'" size="small">
                 {{ collectorStatus.status === 'running' ? '运行中' : '已停止' }}
@@ -39,7 +54,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">活跃告警</div>
+            <div class="stat-label">
+              活跃告警
+              <el-tooltip content="当前未处理的告警总数。包括：采集失败、数据缺失、设备离线、发现未注册设备。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value alert-value" @click="$router.push(isMock ? '/mock/alert' : '/alert')">
               {{ summary.activeAlerts }}
             </div>
@@ -53,7 +73,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">采集成功率</div>
+            <div class="stat-label">
+              采集成功率
+              <el-tooltip content="今日采集成功的次数占总采集次数的百分比。每次采集一个地址算一次，一个地址可能包含多台机床的数据。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">{{ summary.collectSuccessRate }}<span class="stat-unit">%</span></div>
           </div>
         </el-card>
@@ -61,7 +86,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">今日切削总时</div>
+            <div class="stat-label">
+              今日切削总时
+              <el-tooltip content="今日所有机床实际切削加工的时间总和（单位：小时）。仅统计刀具接触工件的切削时间，不含空转和待机时间。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">{{ summary.todayCuttingTime }}<span class="stat-unit"> h</span></div>
           </div>
         </el-card>
@@ -69,7 +99,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">运行机床</div>
+            <div class="stat-label">
+              运行机床
+              <el-tooltip content="当前正在执行加工程序的机床数量。与「在线」的区别：在线表示网络连通，运行表示正在加工零件。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value">{{ summary.runningMachines }}<span class="stat-unit"> 台</span></div>
           </div>
         </el-card>
@@ -77,7 +112,12 @@
       <el-col :span="6">
         <el-card shadow="hover">
           <div class="stat-card">
-            <div class="stat-label">数据缺失</div>
+            <div class="stat-label">
+              数据缺失
+              <el-tooltip content="网络连通但未能成功采集到数据的机床数量。这些机床的产量在报表中显示为「-」而不是0，不计入日产量汇总。" placement="top">
+                <span class="info-icon">ⓘ</span>
+              </el-tooltip>
+            </div>
             <div class="stat-value" :class="{ 'alert-value': summary.dataMissingMachines > 0 }">{{ summary.dataMissingMachines }}<span class="stat-unit"> 台</span></div>
           </div>
         </el-card>
@@ -88,13 +128,13 @@
     <el-row :gutter="16" class="chart-row">
       <el-col :span="12">
         <el-card shadow="hover">
-          <template #header><span class="card-title">产量趋势（近7天）</span></template>
+          <template #header><span class="card-title">产量趋势（近7天）<el-tooltip content="最近7天每天的零件总产量变化趋势。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span></template>
           <div ref="trendChartRef" style="height: 260px"></div>
         </el-card>
       </el-col>
       <el-col :span="12">
         <el-card shadow="hover">
-          <template #header><span class="card-title">车间平均单机产量（今日）</span></template>
+          <template #header><span class="card-title">车间平均单机产量（今日）<el-tooltip content="各车间今日总产量除以机床数量，反映每台机床的平均产出效率，消除车间规模差异。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span></template>
           <div ref="workshopChartRef" style="height: 260px"></div>
         </el-card>
       </el-col>
@@ -104,7 +144,7 @@
     <el-row :gutter="16" class="info-row">
       <el-col :span="8">
         <el-card shadow="hover">
-          <template #header><span class="card-title">机床状态分布</span></template>
+          <template #header><span class="card-title">机床状态分布<el-tooltip content="在线：网络Ping检测通过；离线：网络Ping检测不通；停用：已手动关闭的机床。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span></template>
           <div ref="statusPieRef" style="height: 260px"></div>
         </el-card>
       </el-col>
@@ -112,7 +152,7 @@
         <el-card shadow="hover">
           <template #header>
             <div class="card-header">
-              <span class="card-title">最新告警</span>
+              <span class="card-title">最新告警<el-tooltip content="最近5条未处理的告警记录，按时间倒序排列。类型包括：采集失败、数据缺失、设备离线、发现未注册设备。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span>
               <el-button link type="primary" @click="$router.push(isMock ? '/mock/alert' : '/alert')">查看全部</el-button>
             </div>
           </template>
@@ -141,7 +181,7 @@
         <el-card shadow="hover">
           <template #header>
             <div class="card-header">
-              <span class="card-title">机床产量排行 TOP10</span>
+              <span class="card-title">机床产量排行 TOP10<el-tooltip content="今日单台机床加工零件数由高到低排列，同时显示当前正在执行的程序名。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span>
               <span class="card-sub">今日</span>
             </div>
           </template>
@@ -166,7 +206,7 @@
         <el-card shadow="hover">
           <template #header>
             <div class="card-header">
-              <span class="card-title">工人产量排行 TOP10</span>
+              <span class="card-title">工人产量排行 TOP10<el-tooltip content="今日工人所绑定的所有机床产量合计，由高到低排列。" placement="top"><span class="info-icon">ⓘ</span></el-tooltip></span>
               <span class="card-sub">今日</span>
             </div>
           </template>
@@ -377,6 +417,18 @@ onUnmounted(() => {
         font-size: 14px;
         color: #909399;
         margin-bottom: 8px;
+
+        .info-icon {
+          margin-left: 2px;
+          font-size: 13px;
+          color: #c0c4cc;
+          cursor: help;
+          vertical-align: middle;
+
+          &:hover {
+            color: #409EFF;
+          }
+        }
       }
 
       .stat-value {
@@ -421,6 +473,17 @@ onUnmounted(() => {
   .card-title {
     font-size: 15px;
     font-weight: 500;
+
+    .info-icon {
+      margin-left: 4px;
+      font-size: 14px;
+      color: #b0b5bd;
+      cursor: help;
+
+      &:hover {
+        color: #409EFF;
+      }
+    }
   }
 
   .card-header {