From 157fbedb9037712f7c95b01b99c858afcbb63eba Mon Sep 17 00:00:00 2001 From: huangjinysf Date: Fri, 26 Dec 2025 13:31:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=8C=E6=88=90=E5=BA=A6?= =?UTF-8?q?=E5=92=8C=E6=9C=BA=E5=8F=B0=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8C=89=E8=BF=9B=E5=BA=A6=E5=8C=BA?= =?UTF-8?q?=E9=97=B4=E5=92=8C=E8=AE=BE=E5=A4=87=E4=BB=A3=E7=A0=81=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=E6=98=BE=E7=A4=BA=E8=BD=B4=E4=BF=A1=E6=81=AF=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E6=8E=92=E5=BA=8F=E5=92=8C?= =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=99=A8=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/plan/EnamellingMachineStatus.vue | 194 ++++++++++++++++++++- 1 file changed, 186 insertions(+), 8 deletions(-) diff --git a/src/views/plan/EnamellingMachineStatus.vue b/src/views/plan/EnamellingMachineStatus.vue index 6d16ffa..c71be7e 100644 --- a/src/views/plan/EnamellingMachineStatus.vue +++ b/src/views/plan/EnamellingMachineStatus.vue @@ -7,9 +7,36 @@ + +
+
+ 完成度筛选: + + + + + + + +
+ +
+ 机台筛选: + + + + +
+
+
- 调试信息: 获取到 {{ equipmentData.length }} 条设备数据，表格共 {{ tableData.length }} 行 + 调试信息: 获取到 {{ equipmentData.length }} 条设备数据，筛选后 {{ filteredEquipmentData.length }} 条，表格共 {{ tableData.length }} 行
@@ -122,29 +149,149 @@ const props = defineProps({ const loading = ref(false) const equipmentData = ref([]) +// 机台筛选相关状态 +const selectedEquipment = ref('all') + +// 完成度筛选相关状态 +const selectedCompletionLevel = ref('all') // 默认显示全部 + // 当组件加载时，使用父组件传递的数据 equipmentData.value = props.equipmentData +// 计算属性：获取设备列表（用于筛选器） +const equipmentList = computed(() => { + // 从设备数据中提取唯一的设备代码 + return [...new Set(equipmentData.value.map(equipment => equipment.equipment_code))].sort(); +}); + +// 计算属性：筛选后的设备数据 +const filteredEquipmentData = computed(() => { + // 根据选择的机台筛选数据 + if (selectedEquipment.value === 'all') { + return equipmentData.value; + } else { + return equipmentData.value.filter(equipment => equipment.equipment_code === selectedEquipment.value); + } +}); + +// 设备代码与轴号的映射表 +const equipmentAxlesMap = { + 'QB001': ['左边', '右边'], + 'QB002': ['左边', '右边'], + 'QB003': ['左边', '右边'], + 'QB004': ['左1', '左2', '左3', '左4', '左5', '右1', '右2', '右3', '右4', '右5'], + 'QB0042': ['左1', '左2', '左3', '左4', '左5', '右1', '右2', '右3', '右4', '右5'], + 'QB005': ['左1', '左2', '左3', '左4', '左5', '左6', '右1', '右2', '右3', '右4', '右5', '右6'], + 'QB007': ['左边', '右边'], + 'QB008': ['左边', '右边'], + 'QB009': ['左边', '右边'], + 'QB010': ['左边', '右边'], + 'QB011': ['左边', '右边'], + 'QB012': ['左边', '右边'], + 'QB013': ['左边', '右边'], + 'QB014': ['左边', '右边'], + 'QB015': ['左边', '右边'], + 'QB016': ['左边', '右边'], + 'QB017': ['左边', '右边'], + 'QB018': ['左1', '左2', '右1', '右2'], + 'QB019': ['左1', '左2', '右1', '右2'], + 'QB020': ['左1', '左2', '右1', '右2'], + 'QB024': ['左1', '左2', '左3', '左4', '右1', '右2', '右3', '右4'], + 'QB025': ['左边', '右边'], + 'QB026': ['左边', '右边'], + 'QB027': ['左边', '右边'], + 'QB028': ['左1', '左2', '右1', '右2'], + 'QB029': ['左边', '右边'], + 'QB030': ['左边', '右边'], + 'QB031': ['左边', '右边'], + 'QB032': ['左边', '右边'], + 'QB033': ['左边', '右边'], + 'QB034': ['左边', '右边'] +}; + +// 判断是否应该显示轴 +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 tableData = computed(() => { - if (!equipmentData.value.length) return []; + if (!filteredEquipmentData.value.length) return []; // 展开每个设备的状态记录为表格行 const rows = []; - equipmentData.value.forEach(equipment => { + filteredEquipmentData.value.forEach(equipment => { if (equipment.status_records && equipment.status_records.length > 0) { equipment.status_records.forEach(record => { - rows.push({ - ...record, - equipment_code: equipment.equipment_code - }); + // 检查完成度是否符合筛选条件 + if (shouldShowAxle(record.degree_of_completion)) { + rows.push({ + ...record, + equipment_code: equipment.equipment_code + }); + } }); } }); - return rows; + // 按照设备编号和轴号排序 + return rows.sort((a, b) => { + // 先按设备编号排序 + const equipmentCompare = a.equipment_code.localeCompare(b.equipment_code); + if (equipmentCompare !== 0) { + return equipmentCompare; + } + + // 如果设备编号相同，则按轴号排序 + return sortByAxleNumber(a.axle_number, b.axle_number, a.equipment_code); + }); }); +// 按轴号排序的函数 +const sortByAxleNumber = (axleA, axleB, equipmentCode) => { + // 获取设备对应的预期轴号列表 + const validAxles = equipmentAxlesMap[equipmentCode] || []; + + // 获取两个轴号在有效轴号列表中的索引 + const getIndexInValidAxles = (axleNumber) => { + // 处理复合轴号（如"左1,左2"），取第一个轴号的索引 + const firstAxle = axleNumber ? axleNumber.split(',')[0] : ''; + return validAxles.indexOf(firstAxle); + }; + + const aIndex = getIndexInValidAxles(axleA); + const bIndex = getIndexInValidAxles(axleB); + + // 如果两个轴号都在有效轴号列表中，按索引排序 + if (aIndex !== -1 && bIndex !== -1) { + return aIndex - bIndex; + } + + // 如果只有一个在有效轴号列表中，有效轴号排在前 + if (aIndex !== -1) return -1; + if (bIndex !== -1) return 1; + + // 如果都不在有效轴号列表中，按字符串排序 + return (axleA || '').localeCompare(axleB || ''); +}; + // 方法：获取数据 const fetchData = async () => { loading.value = true; @@ -170,6 +317,16 @@ const refreshData = () => { fetchData(); }; +// 方法：处理机台筛选变化 +const onEquipmentChange = () => { + console.log('选择的机台:', selectedEquipment.value); +}; + +// 方法：处理完成度筛选变化 +const onCompletionLevelChange = () => { + console.log('选择的完成度:', selectedCompletionLevel.value); +}; + // 方法：格式化日期时间 const formatDateTime = (dateTimeStr) => { if (!dateTimeStr) return ''; @@ -237,6 +394,27 @@ onMounted(() => { margin-bottom: 20px; } +/* 筛选器行样式 */ +.filters-row { + display: flex; + gap: 20px; + margin-bottom: 15px; + align-items: center; + flex-wrap: wrap; +} + +/* 筛选器样式 */ +.filter-container { + display: flex; + align-items: center; +} + +.filter-label { + margin-right: 10px; + font-weight: bold; + white-space: nowrap; +} + .table-header h3 { margin: 0; font-size: 18px;