|
|
|
@ -1,5 +1,17 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="equipment-status-container">
|
|
|
|
<div class="equipment-status-container">
|
|
|
|
|
|
|
|
<!-- 完成度筛选器 -->
|
|
|
|
|
|
|
|
<div class="filter-container">
|
|
|
|
|
|
|
|
<span class="filter-label">完成度筛选:</span>
|
|
|
|
|
|
|
|
<el-select v-model="selectedCompletionLevel" @change="onCompletionLevelChange" placeholder="请选择完成度" style="width: 150px">
|
|
|
|
|
|
|
|
<el-option label="全部显示" value="all" />
|
|
|
|
|
|
|
|
<el-option label="0% - 25%" value="low" />
|
|
|
|
|
|
|
|
<el-option label="25% - 75%" value="medium" />
|
|
|
|
|
|
|
|
<el-option label="75% - 100%" value="high" />
|
|
|
|
|
|
|
|
<el-option label="100%" value="full" />
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="equipment-grid">
|
|
|
|
<div class="equipment-grid">
|
|
|
|
<div v-for="equipment in sortedEquipmentData" :key="equipment.equipment_code" class="equipment-item">
|
|
|
|
<div v-for="equipment in sortedEquipmentData" :key="equipment.equipment_code" class="equipment-item">
|
|
|
|
<div class="equipment-header">
|
|
|
|
<div class="equipment-header">
|
|
|
|
@ -12,6 +24,7 @@
|
|
|
|
<div class="axle-container">
|
|
|
|
<div class="axle-container">
|
|
|
|
<div class="axle-side left">
|
|
|
|
<div class="axle-side left">
|
|
|
|
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
|
|
|
|
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
|
|
|
|
|
|
|
|
v-show="shouldShowAxle(record.degree_of_completion)"
|
|
|
|
class="axle-item"
|
|
|
|
class="axle-item"
|
|
|
|
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
|
|
|
|
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
|
|
|
|
@dblclick="showAxleDetails(record, equipment.equipment_code)">
|
|
|
|
@dblclick="showAxleDetails(record, equipment.equipment_code)">
|
|
|
|
@ -29,6 +42,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="axle-side right">
|
|
|
|
<div class="axle-side right">
|
|
|
|
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
|
|
|
|
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.specification || 'no-spec'}-${record.model || 'no-model'}-${record.update_time || 'no-data'}`"
|
|
|
|
|
|
|
|
v-show="shouldShowAxle(record.degree_of_completion)"
|
|
|
|
class="axle-item"
|
|
|
|
class="axle-item"
|
|
|
|
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
|
|
|
|
:class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
|
|
|
|
@dblclick="showAxleDetails(record, equipment.equipment_code)">
|
|
|
|
@dblclick="showAxleDetails(record, equipment.equipment_code)">
|
|
|
|
@ -505,6 +519,9 @@ const salesDataLoading = ref(false);
|
|
|
|
const salesData = ref([]);
|
|
|
|
const salesData = ref([]);
|
|
|
|
const hasSalesData = ref(false);
|
|
|
|
const hasSalesData = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 完成度筛选相关状态
|
|
|
|
|
|
|
|
const selectedCompletionLevel = ref('all'); // 默认显示全部
|
|
|
|
|
|
|
|
|
|
|
|
// 排产信息相关状态
|
|
|
|
// 排产信息相关状态
|
|
|
|
const productionScheduleData = ref(null);
|
|
|
|
const productionScheduleData = ref(null);
|
|
|
|
const productionScheduleLoading = ref(false);
|
|
|
|
const productionScheduleLoading = ref(false);
|
|
|
|
@ -837,6 +854,33 @@ watch(selectedAxle, (newVal) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, { immediate: true });
|
|
|
|
}, { immediate: true });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 完成度筛选变化处理函数
|
|
|
|
|
|
|
|
const onCompletionLevelChange = () => {
|
|
|
|
|
|
|
|
// 筛选逻辑通过shouldShowAxle函数处理,这里不需要额外操作
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 判断是否应该显示轴
|
|
|
|
|
|
|
|
const shouldShowAxle = (degree) => {
|
|
|
|
|
|
|
|
if (!degree) return false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const percentage = degree * 100;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
switch (selectedCompletionLevel.value) {
|
|
|
|
|
|
|
|
case 'all':
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
case 'low':
|
|
|
|
|
|
|
|
return percentage >= 0 && percentage < 25;
|
|
|
|
|
|
|
|
case 'medium':
|
|
|
|
|
|
|
|
return percentage >= 25 && percentage < 75;
|
|
|
|
|
|
|
|
case 'high':
|
|
|
|
|
|
|
|
return percentage >= 75 && percentage < 100;
|
|
|
|
|
|
|
|
case 'full':
|
|
|
|
|
|
|
|
return percentage >= 100;
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
// 初始化图表
|
|
|
|
const initCharts = () => {
|
|
|
|
const initCharts = () => {
|
|
|
|
// 销毁已有图表实例
|
|
|
|
// 销毁已有图表实例
|
|
|
|
@ -1482,6 +1526,19 @@ const updateCharts = () => {
|
|
|
|
font-weight: normal;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 筛选器样式 */
|
|
|
|
|
|
|
|
.filter-container {
|
|
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.filter-label {
|
|
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
color: #606266;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 对话框样式 */
|
|
|
|
/* 对话框样式 */
|
|
|
|
.axle-details-container {
|
|
|
|
.axle-details-container {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
|