|
|
|
@ -5,7 +5,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value">{{ summary.onlineCount }}<span class="stat-unit"> / {{ summary.totalMachines }}</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -13,7 +18,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value">{{ summary.todayProduction?.toLocaleString() }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -21,7 +31,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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">
|
|
|
|
<div class="stat-value">
|
|
|
|
<el-tag :type="collectorStatus.status === 'running' ? 'success' : 'danger'" size="small">
|
|
|
|
<el-tag :type="collectorStatus.status === 'running' ? 'success' : 'danger'" size="small">
|
|
|
|
{{ collectorStatus.status === 'running' ? '运行中' : '已停止' }}
|
|
|
|
{{ collectorStatus.status === 'running' ? '运行中' : '已停止' }}
|
|
|
|
@ -39,7 +54,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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')">
|
|
|
|
<div class="stat-value alert-value" @click="$router.push(isMock ? '/mock/alert' : '/alert')">
|
|
|
|
{{ summary.activeAlerts }}
|
|
|
|
{{ summary.activeAlerts }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -53,7 +73,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value">{{ summary.collectSuccessRate }}<span class="stat-unit">%</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -61,7 +86,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value">{{ summary.todayCuttingTime }}<span class="stat-unit"> h</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -69,7 +99,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value">{{ summary.runningMachines }}<span class="stat-unit"> 台</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -77,7 +112,12 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="stat-card">
|
|
|
|
<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 class="stat-value" :class="{ 'alert-value': summary.dataMissingMachines > 0 }">{{ summary.dataMissingMachines }}<span class="stat-unit"> 台</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
@ -88,13 +128,13 @@
|
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<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>
|
|
|
|
<div ref="trendChartRef" style="height: 260px"></div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<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>
|
|
|
|
<div ref="workshopChartRef" style="height: 260px"></div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
@ -104,7 +144,7 @@
|
|
|
|
<el-row :gutter="16" class="info-row">
|
|
|
|
<el-row :gutter="16" class="info-row">
|
|
|
|
<el-col :span="8">
|
|
|
|
<el-col :span="8">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<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>
|
|
|
|
<div ref="statusPieRef" style="height: 260px"></div>
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
@ -112,7 +152,7 @@
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
<div class="card-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>
|
|
|
|
<el-button link type="primary" @click="$router.push(isMock ? '/mock/alert' : '/alert')">查看全部</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -141,7 +181,7 @@
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
<div class="card-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>
|
|
|
|
<span class="card-sub">今日</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -166,7 +206,7 @@
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
<div class="card-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>
|
|
|
|
<span class="card-sub">今日</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -377,6 +417,18 @@ onUnmounted(() => {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #909399;
|
|
|
|
color: #909399;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-icon {
|
|
|
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
|
|
|
cursor: help;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
|
|
|
.stat-value {
|
|
|
|
@ -421,6 +473,17 @@ onUnmounted(() => {
|
|
|
|
.card-title {
|
|
|
|
.card-title {
|
|
|
|
font-size: 15px;
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: 500;
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-icon {
|
|
|
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #b0b5bd;
|
|
|
|
|
|
|
|
cursor: help;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card-header {
|
|
|
|
.card-header {
|
|
|
|
|