feat(dashboard): 仪表盘所有指标添加统计说明tooltip,hover显示通俗易懂的计算口径

main
haoliang 1 week ago
parent f93b57365f
commit b756b3d58c

@ -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 {

Loading…
Cancel
Save