每个机台的轴的左右进行了排序

src/views/plan/EquipmentStatus.vue

@@ -3,7 +3,10 @@
     <div class="equipment-grid">
       <div v-for="equipment in sortedEquipmentData" :key="equipment.equipment_code" class="equipment-item">
         <div class="equipment-header">
-          {{ equipment.equipment_code }}
+          <span class="equipment-name">{{ equipment.equipment_code }}</span>
+          <span class="equipment-health" v-if="equipment.status_records && equipment.status_records.length > 0">
+            健康度: {{ equipment.status_records[0].health_score }}%
+          </span>
         </div>
         <div class="equipment-body">
           <div class="axle-container">
@@ -70,20 +73,55 @@ const sortedEquipmentData = computed(() => {
 const getLeftAxles = (equipment) => {
   if (!equipment.status_records || equipment.status_records.length === 0) return [];
   
-  return equipment.status_records.filter(record => {
+  // 获取所有左侧轴记录
+  const leftAxles = equipment.status_records.filter(record => {
     const axle = record.axle_number;
     return axle.includes('左') || axle.includes('left');
   });
+  
+  // 按照左1, 左2, 左3...的顺序排序
+  return leftAxles.sort((a, b) => {
+    // 提取轴号中的数字，如"左1"提取出1
+    const aNum = extractAxleNumber(a.axle_number);
+    const bNum = extractAxleNumber(b.axle_number);
+    return aNum - bNum;
+  });
 };
 
 // 获取右侧轴信息
 const getRightAxles = (equipment) => {
   if (!equipment.status_records || equipment.status_records.length === 0) return [];
   
-  return equipment.status_records.filter(record => {
+  // 获取所有右侧轴记录
+  const rightAxles = equipment.status_records.filter(record => {
     const axle = record.axle_number;
     return axle.includes('右') || axle.includes('right');
   });
+  
+  // 按照右1, 右2, 右3...的顺序排序
+  return rightAxles.sort((a, b) => {
+    // 提取轴号中的数字，如"右1"提取出1
+    const aNum = extractAxleNumber(a.axle_number);
+    const bNum = extractAxleNumber(b.axle_number);
+    return aNum - bNum;
+  });
+};
+
+// 提取轴号中的数字
+const extractAxleNumber = (axleStr) => {
+  if (!axleStr) return Infinity;
+  
+  // 使用正则表达式提取数字，如从"左1"中提取出1
+  const match = axleStr.match(/(\d+)/);
+  if (match) {
+    return parseInt(match[0], 10);
+  }
+  
+  // 如果没有数字，例如只有"左边"或"右边"，则使用默认值
+  if (axleStr.includes('左') || axleStr.includes('left')) return 0;
+  if (axleStr.includes('右') || axleStr.includes('right')) return 0;
+  
+  return Infinity;
 };
 
 // 根据完成度返回对应的CSS类名
@@ -117,10 +155,20 @@ const getCompletionClass = (degree) => {
 .equipment-header {
   background-color: #f5f7fa;
   padding: 10px 15px;
-  font-weight: bold;
   font-size: 16px;
-  text-align: center;
   border-bottom: 1px solid #dcdfe6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.equipment-name {
+  font-weight: bold;
+}
+
+.equipment-health {
+  font-size: 14px;
+  color: #67c23a;
 }
 
 .equipment-body {
@@ -235,6 +283,8 @@ const getCompletionClass = (degree) => {
   font-weight: bold;
 }
 
+
+
 .no-records {
   text-align: center;
   color: #909399;