You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
613 lines
20 KiB
Vue
613 lines
20 KiB
Vue
<template>
|
|
<div class="dashboard-container">
|
|
<!-- 顶部筛选栏 -->
|
|
<el-card class="filter-card" shadow="never">
|
|
<el-form :inline="true" size="small">
|
|
<el-form-item label="产线">
|
|
<el-select v-model="productLineCode" placeholder="全部产线" clearable @change="loadData">
|
|
<el-option
|
|
v-for="item in productLineList"
|
|
:key="item.productLineCode"
|
|
:label="item.productLineName"
|
|
:value="item.productLineCode"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-refresh" @click="loadData">刷新数据</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<span class="update-time">更新时间：{{ updateTime }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- 顶部统计卡片 -->
|
|
<el-row :gutter="16" class="stat-row">
|
|
<el-col :span="6">
|
|
<el-card class="stat-card device-card" shadow="hover">
|
|
<div class="stat-icon">
|
|
<i class="el-icon-cpu"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">设备状态</div>
|
|
<div class="stat-value">{{ safe(deviceStatus.runningDevices) }} / {{ safe(deviceStatus.totalDevices) }}</div>
|
|
<div class="stat-desc">
|
|
<span class="running">运行 {{ safe(deviceStatus.runningDevices) }}</span>
|
|
<span class="fault">故障 {{ safe(deviceStatus.faultDevices) }}</span>
|
|
<span class="stopped">停机 {{ safe(deviceStatus.stoppedDevices) }}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="stat-card task-card" shadow="hover">
|
|
<div class="stat-icon">
|
|
<i class="el-icon-document-checked"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">今日完成率</div>
|
|
<div class="stat-value">{{ formatPercent(taskCompletion.todayCompletionRate) }}%</div>
|
|
<div class="stat-desc">
|
|
完成 {{ safe(taskCompletion.todayCompleteAmount) }} / 计划 {{ safe(taskCompletion.todayPlanAmount) }}
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="stat-card oee-card" shadow="hover">
|
|
<div class="stat-icon">
|
|
<i class="el-icon-data-analysis"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">OEE</div>
|
|
<div class="stat-value">{{ formatPercent(oeeSummary.overallOee) }}%</div>
|
|
<div class="stat-desc">
|
|
可用率 {{ formatPercent(oeeSummary.availability) }}% | 性能 {{ formatPercent(oeeSummary.performance) }}%
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="stat-card quality-card" shadow="hover">
|
|
<div class="stat-icon">
|
|
<i class="el-icon-trophy"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">良品率</div>
|
|
<div class="stat-value">{{ formatPercent(qualitySummary.todayYieldRate) }}%</div>
|
|
<div class="stat-desc">
|
|
良品 {{ safe(qualitySummary.todayGoodCount) }} | 不良 {{ safe(qualitySummary.todayDefectCount) }}
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 安灯事件统计 -->
|
|
<el-row :gutter="16" class="stat-row">
|
|
<el-col :span="24">
|
|
<el-card class="andon-stat-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-bell"></i> 安灯事件统计</span>
|
|
</div>
|
|
<el-row :gutter="16">
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">今日事件</div>
|
|
<div class="andon-stat-value total">{{ andonEvents.todayTotal }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">待处理</div>
|
|
<div class="andon-stat-value pending">{{ andonEvents.pendingCount }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">处理中</div>
|
|
<div class="andon-stat-value processing">{{ andonEvents.processingCount }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">已解决</div>
|
|
<div class="andon-stat-value resolved">{{ andonEvents.resolvedCount }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">平均响应</div>
|
|
<div class="andon-stat-value">{{ andonEvents.avgResponseMinutes }} 分钟</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="andon-stat-item">
|
|
<div class="andon-stat-label">平均解决</div>
|
|
<div class="andon-stat-value">{{ andonEvents.avgResolveMinutes }} 分钟</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 详细数据区域 -->
|
|
<el-row :gutter="16">
|
|
<!-- 设备状态详情 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-cpu"></i> 设备状态详情</span>
|
|
</div>
|
|
<el-table :data="deviceStatus.deviceDetails" size="small" max-height="300" stripe>
|
|
<el-table-column prop="deviceCode" label="设备编码" width="120" />
|
|
<el-table-column prop="deviceName" label="设备名称" min-width="150" show-overflow-tooltip />
|
|
<el-table-column prop="productLineName" label="产线" width="100" show-overflow-tooltip />
|
|
<el-table-column prop="statusName" label="状态" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="getDeviceStatusType(scope.row.status)" size="small">
|
|
{{ scope.row.statusName }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- OEE详情 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-data-analysis"></i> 设备OEE详情</span>
|
|
</div>
|
|
<el-table :data="oeeSummary.deviceOeeDetails" size="small" max-height="300" stripe>
|
|
<el-table-column prop="deviceCode" label="设备编码" width="120" />
|
|
<el-table-column prop="deviceName" label="设备名称" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="oee" label="OEE%" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<span :class="getOeeClass(scope.row.oee)">{{ scope.row.oee }}%</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="availability" label="可用率%" width="80" align="center" />
|
|
<el-table-column prop="performance" label="性能%" width="70" align="center" />
|
|
<el-table-column prop="quality" label="良率%" width="70" align="center" />
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" style="margin-top: 16px;">
|
|
<!-- 产线任务完成情况 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-document-checked"></i> 产线任务完成情况</span>
|
|
</div>
|
|
<el-table :data="taskCompletion.lineCompletions" size="small" max-height="300" stripe>
|
|
<el-table-column prop="productLineName" label="产线" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="planAmount" label="计划数" width="90" align="center" />
|
|
<el-table-column prop="completeAmount" label="完成数" width="90" align="center" />
|
|
<el-table-column prop="completionRate" label="完成率" width="120" align="center">
|
|
<template slot-scope="scope">
|
|
<el-progress
|
|
:percentage="Math.min(scope.row.completionRate, 100)"
|
|
:color="getProgressColor(scope.row.completionRate)"
|
|
:stroke-width="16"
|
|
:text-inside="true"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- 产线利用率 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-odometer"></i> 产线利用率</span>
|
|
<span class="header-extra">整体利用率：{{ utilizationSummary.overallUtilization }}%</span>
|
|
</div>
|
|
<el-table :data="utilizationSummary.lineUtilizations" size="small" max-height="300" stripe>
|
|
<el-table-column prop="productLineName" label="产线" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="runningMinutes" label="运行(分钟)" width="100" align="center" />
|
|
<el-table-column prop="plannedMinutes" label="计划(分钟)" width="100" align="center" />
|
|
<el-table-column prop="utilization" label="利用率" width="120" align="center">
|
|
<template slot-scope="scope">
|
|
<el-progress
|
|
:percentage="Math.min(scope.row.utilization, 100)"
|
|
:color="getUtilizationColor(scope.row.utilization)"
|
|
:stroke-width="16"
|
|
:text-inside="true"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="16" style="margin-top: 16px;">
|
|
<!-- 产线品质数据 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-trophy"></i> 产线品质数据</span>
|
|
<span class="header-extra">本月良品率：{{ qualitySummary.monthYieldRate }}%</span>
|
|
</div>
|
|
<el-table :data="qualitySummary.lineQualities" size="small" max-height="300" stripe>
|
|
<el-table-column prop="productLineName" label="产线" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="output" label="产量" width="80" align="center" />
|
|
<el-table-column prop="goodCount" label="良品" width="80" align="center" />
|
|
<el-table-column prop="defectCount" label="不良" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<span :class="{ 'defect-highlight': scope.row.defectCount > 0 }">
|
|
{{ scope.row.defectCount }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="yieldRate" label="良品率" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<span :class="getYieldClass(scope.row.yieldRate)">{{ scope.row.yieldRate }}%</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- 安灯事件类型统计 -->
|
|
<el-col :span="12">
|
|
<el-card class="detail-card" shadow="hover">
|
|
<div slot="header" class="card-header">
|
|
<span><i class="el-icon-pie-chart"></i> 安灯事件类型统计</span>
|
|
</div>
|
|
<el-table :data="andonEvents.eventTypeStats" size="small" max-height="300" stripe>
|
|
<el-table-column prop="callTypeCode" label="类型编码" width="120" />
|
|
<el-table-column prop="callTypeName" label="类型名称" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="count" label="总数" width="80" align="center" />
|
|
<el-table-column prop="pendingCount" label="待处理" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<span :class="{ 'pending-highlight': scope.row.pendingCount > 0 }">
|
|
{{ scope.row.pendingCount }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="resolvedCount" label="已解决" width="80" align="center" />
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDashboardData } from "@/api/production/andonDashboard";
|
|
import { findProductLineList } from "@/api/base/productLine";
|
|
|
|
export default {
|
|
name: "AndonDashboard",
|
|
data() {
|
|
return {
|
|
productLineCode: '',
|
|
productLineList: [],
|
|
updateTime: '',
|
|
loading: false,
|
|
refreshTimer: null,
|
|
// 设备状态
|
|
deviceStatus: {
|
|
totalDevices: 0,
|
|
runningDevices: 0,
|
|
stoppedDevices: 0,
|
|
faultDevices: 0,
|
|
idleDevices: 0,
|
|
deviceDetails: []
|
|
},
|
|
// 任务完成情况
|
|
taskCompletion: {
|
|
todayPlanAmount: 0,
|
|
todayCompleteAmount: 0,
|
|
todayCompletionRate: 0,
|
|
monthPlanAmount: 0,
|
|
monthCompleteAmount: 0,
|
|
monthCompletionRate: 0,
|
|
lineCompletions: []
|
|
},
|
|
// OEE数据
|
|
oeeSummary: {
|
|
overallOee: 0,
|
|
availability: 0,
|
|
performance: 0,
|
|
quality: 0,
|
|
plannedTimeMinutes: 0,
|
|
downtimeMinutes: 0,
|
|
deviceOeeDetails: []
|
|
},
|
|
// 利用率
|
|
utilizationSummary: {
|
|
overallUtilization: 0,
|
|
lineUtilizations: []
|
|
},
|
|
// 品质数据
|
|
qualitySummary: {
|
|
todayOutput: 0,
|
|
todayGoodCount: 0,
|
|
todayDefectCount: 0,
|
|
todayYieldRate: 0,
|
|
monthYieldRate: 0,
|
|
lineQualities: []
|
|
},
|
|
// 安灯事件统计
|
|
andonEvents: {
|
|
todayTotal: 0,
|
|
pendingCount: 0,
|
|
processingCount: 0,
|
|
resolvedCount: 0,
|
|
avgResponseMinutes: 0,
|
|
avgResolveMinutes: 0,
|
|
eventTypeStats: []
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.loadProductLines();
|
|
this.loadData();
|
|
// 每60秒自动刷新
|
|
this.refreshTimer = setInterval(() => {
|
|
this.loadData();
|
|
}, 60000);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.refreshTimer) {
|
|
clearInterval(this.refreshTimer);
|
|
}
|
|
},
|
|
methods: {
|
|
loadProductLines() {
|
|
findProductLineList().then(res => {
|
|
this.productLineList = res.data || res.rows || [];
|
|
});
|
|
},
|
|
loadData() {
|
|
this.loading = true;
|
|
getDashboardData(this.productLineCode).then(res => {
|
|
if (res.data) {
|
|
const data = res.data;
|
|
if (data.deviceStatusSummary) {
|
|
this.deviceStatus = data.deviceStatusSummary;
|
|
}
|
|
if (data.taskCompletionSummary) {
|
|
this.taskCompletion = data.taskCompletionSummary;
|
|
}
|
|
if (data.oeeSummary) {
|
|
this.oeeSummary = data.oeeSummary;
|
|
}
|
|
if (data.utilizationSummary) {
|
|
this.utilizationSummary = data.utilizationSummary;
|
|
}
|
|
if (data.qualitySummary) {
|
|
this.qualitySummary = data.qualitySummary;
|
|
}
|
|
if (data.andonEventSummary) {
|
|
this.andonEvents = data.andonEventSummary;
|
|
}
|
|
}
|
|
this.updateTime = this.formatTime(new Date());
|
|
this.loading = false;
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
formatTime(date) {
|
|
const y = date.getFullYear();
|
|
const m = String(date.getMonth() + 1).padStart(2, '0');
|
|
const d = String(date.getDate()).padStart(2, '0');
|
|
const h = String(date.getHours()).padStart(2, '0');
|
|
const min = String(date.getMinutes()).padStart(2, '0');
|
|
const s = String(date.getSeconds()).padStart(2, '0');
|
|
return `${y}-${m}-${d} ${h}:${min}:${s}`;
|
|
},
|
|
getDeviceStatusType(status) {
|
|
switch (status) {
|
|
case 1: return 'success';
|
|
case 0: return 'info';
|
|
case 2: return 'danger';
|
|
case 3: return 'warning';
|
|
default: return 'info';
|
|
}
|
|
},
|
|
getOeeClass(oee) {
|
|
if (oee >= 85) return 'oee-excellent';
|
|
if (oee >= 70) return 'oee-good';
|
|
if (oee >= 50) return 'oee-normal';
|
|
return 'oee-low';
|
|
},
|
|
getYieldClass(rate) {
|
|
if (rate >= 98) return 'yield-excellent';
|
|
if (rate >= 95) return 'yield-good';
|
|
if (rate >= 90) return 'yield-normal';
|
|
return 'yield-low';
|
|
},
|
|
getProgressColor(rate) {
|
|
if (rate >= 100) return '#67C23A';
|
|
if (rate >= 80) return '#409EFF';
|
|
if (rate >= 60) return '#E6A23C';
|
|
return '#F56C6C';
|
|
},
|
|
getUtilizationColor(rate) {
|
|
if (rate >= 85) return '#67C23A';
|
|
if (rate >= 70) return '#409EFF';
|
|
if (rate >= 50) return '#E6A23C';
|
|
return '#F56C6C';
|
|
},
|
|
// 兜底处理空值，避免显示空白
|
|
safe(val) {
|
|
if (val === null || val === undefined || val === '') return 0;
|
|
// 保留数字，否则返回原值
|
|
return isNaN(Number(val)) ? val : Number(val);
|
|
},
|
|
// 百分比格式化，保留两位
|
|
formatPercent(val) {
|
|
const num = Number(val);
|
|
if (isNaN(num)) return 0;
|
|
return Number(num.toFixed(2));
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-container {
|
|
padding: 16px;
|
|
background: #f0f2f5;
|
|
min-height: calc(100vh - 84px);
|
|
}
|
|
|
|
.filter-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.update-time {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stat-row {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.stat-card {
|
|
min-height: 140px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 16px 20px;
|
|
border-radius: 8px;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-icon i {
|
|
font-size: 28px;
|
|
color: #fff;
|
|
}
|
|
|
|
.device-card .stat-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|
.task-card .stat-icon { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
|
|
.oee-card .stat-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
|
.quality-card .stat-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stat-desc {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
line-height: 1.4;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.stat-desc .running { color: #67C23A; margin-right: 8px; }
|
|
.stat-desc .fault { color: #F56C6C; margin-right: 8px; }
|
|
.stat-desc .stopped { color: #909399; }
|
|
|
|
.andon-stat-card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-header i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.header-extra {
|
|
font-size: 14px;
|
|
color: #409EFF;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.andon-stat-item {
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.andon-stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.andon-stat-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
|
|
.andon-stat-value.total { color: #409EFF; }
|
|
.andon-stat-value.pending { color: #F56C6C; }
|
|
.andon-stat-value.processing { color: #E6A23C; }
|
|
.andon-stat-value.resolved { color: #67C23A; }
|
|
|
|
.detail-card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.oee-excellent { color: #67C23A; font-weight: bold; }
|
|
.oee-good { color: #409EFF; font-weight: bold; }
|
|
.oee-normal { color: #E6A23C; font-weight: bold; }
|
|
.oee-low { color: #F56C6C; font-weight: bold; }
|
|
|
|
.yield-excellent { color: #67C23A; font-weight: bold; }
|
|
.yield-good { color: #409EFF; font-weight: bold; }
|
|
.yield-normal { color: #E6A23C; font-weight: bold; }
|
|
.yield-low { color: #F56C6C; font-weight: bold; }
|
|
|
|
.defect-highlight {
|
|
color: #F56C6C;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pending-highlight {
|
|
color: #F56C6C;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|