优化设备状态显示，添加不在运行轴的处理和样式

src/views/plan/EquipmentStatus.vue

@@ -11,15 +11,15 @@
         <div class="equipment-body">
           <div class="axle-container">
             <div class="axle-side left">
-              <div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`" 
+              <div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`" 
                    class="axle-item" 
-                   :class="getCompletionClass(record.degree_of_completion)">
+                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
-                <div class="axle-number">{{ record.axle_number }}</div>
+                <div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
-                <div class="axle-spec">{{ record.specification }}</div>
+                <div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
-                <div class="axle-model">{{ record.model }}</div>
+                <div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
-                <div class="axle-disc">线盘: {{ record.raw_wire_disc || '无' }}</div>
+                <div class="axle-disc" v-if="record.update_time">线盘: {{ record.raw_wire_disc || '无' }}</div>
-                <div class="axle-progress">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
+                <div class="axle-progress" v-if="record.update_time">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
-                <div class="axle-stock" v-if="record.total_number || record.total_net_weight || record.total_gross_weight">
+                <div class="axle-stock" v-if="record.update_time && (record.total_number || record.total_net_weight || record.total_gross_weight)">
                   <div class="stock-item" v-if="record.total_number">总箱数: {{ record.total_number }}</div>
                   <div class="stock-item" v-if="record.total_net_weight">总净重: {{ record.total_net_weight }}kg</div>
                   <div class="stock-item" v-if="record.total_gross_weight">总毛重: {{ record.total_gross_weight }}kg</div>
@@ -27,15 +27,15 @@
               </div>
             </div>
             <div class="axle-side right">
-              <div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`" 
+              <div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`" 
                    class="axle-item" 
-                   :class="getCompletionClass(record.degree_of_completion)">
+                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
-                <div class="axle-number">{{ record.axle_number }}</div>
+                <div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
-                <div class="axle-spec">{{ record.specification }}</div>
+                <div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
-                <div class="axle-model">{{ record.model }}</div>
+                <div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
-                <div class="axle-disc">线盘: {{ record.raw_wire_disc || '无' }}</div>
+                <div class="axle-disc" v-if="record.update_time">线盘: {{ record.raw_wire_disc || '无' }}</div>
-                <div class="axle-progress">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
+                <div class="axle-progress" v-if="record.update_time">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
-                <div class="axle-stock" v-if="record.total_number || record.total_net_weight || record.total_gross_weight">
+                <div class="axle-stock" v-if="record.update_time && (record.total_number || record.total_net_weight || record.total_gross_weight)">
                   <div class="stock-item" v-if="record.total_number">总箱数: {{ record.total_number }}</div>
                   <div class="stock-item" v-if="record.total_net_weight">总净重: {{ record.total_net_weight }}kg</div>
                   <div class="stock-item" v-if="record.total_gross_weight">总毛重: {{ record.total_gross_weight }}kg</div>
@@ -43,7 +43,7 @@
               </div>
             </div>
           </div>
-          <div v-if="!equipment.status_records || equipment.status_records.length === 0" class="no-records">
+          <div v-if="!isEquipmentRunning(equipment)" class="no-records">
             设备当前未运行
           </div>
         </div>
@@ -62,15 +62,50 @@ const props = defineProps({
   }
 });
 
+// 设备代码与轴号的映射表
+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 sortedEquipmentData = computed(() => {
   // 创建一个副本以避免修改原始数组
   const equipmentCopy = [...props.equipmentData];
   
   return equipmentCopy.sort((a, b) => {
-    // 判断设备是否在运行：status_records不为空数组
+    // 使用新的判断函数检查设备是否在运行
-    const aIsRunning = a.status_records && a.status_records.length > 0;
+    const aIsRunning = isEquipmentRunning(a);
-    const bIsRunning = b.status_records && b.status_records.length > 0;
+    const bIsRunning = isEquipmentRunning(b);
     
     // 如果a在运行而b不在运行，a排在前面
     if (aIsRunning && !bIsRunning) return -1;
@@ -83,42 +118,155 @@ const sortedEquipmentData = computed(() => {
 
 // 获取左侧轴信息
 const getLeftAxles = (equipment) => {
-  if (!equipment.status_records || equipment.status_records.length === 0) return [];
+  if (!equipment.status_records || equipment.status_records.length === 0) {
+    // 如果没有运行记录，返回所有左侧轴的未运行状态
+    const validAxles = equipmentAxlesMap[equipment.equipment_code] || [];
+    return validAxles.filter(axle => axle.includes('左') || axle.includes('left')).map(axleNumber => ({
+      axle_number: axleNumber,
+      specification: '',
+      model: '',
+      raw_wire_disc: '',
+      degree_of_completion: 0,
+      total_number: null,
+      total_net_weight: null,
+      total_gross_weight: null,
+      isRunning: false
+    }));
+  }
   
-  // 获取所有左侧轴记录
+  // 获取设备对应的预期轴号列表
-  const leftAxles = equipment.status_records.filter(record => {
+  const validAxles = equipmentAxlesMap[equipment.equipment_code] || [];
-    const axle = record.axle_number;
+  const validLeftAxles = validAxles.filter(axle => 
-    return axle.includes('左') || axle.includes('left');
+    axle.includes('左') || axle.includes('left')
-  });
+  );
+  
+  // 记录已经处理的轴号，避免重复显示
+  const processedAxles = new Set();
+  const resultAxles = [];
+  
+  // 处理运行中的记录
+  for (const record of equipment.status_records) {
+    if (!record.axle_number) continue;
+    
+    // 检查记录中包含哪些左侧轴
+    for (const axleNumber of validLeftAxles) {
+      if (record.axle_number.includes(axleNumber) && !processedAxles.has(axleNumber)) {
+        processedAxles.add(axleNumber);
+        resultAxles.push({
+          ...record,
+          axle_number: axleNumber // 使用实际的轴号而不是复合轴号
+        });
+      }
+    }
+  }
+  
+  // 添加未运行的左侧轴
+  for (const axleNumber of validLeftAxles) {
+    if (!processedAxles.has(axleNumber)) {
+      resultAxles.push({
+        axle_number: axleNumber,
+        specification: '',
+        model: '',
+        raw_wire_disc: '',
+        degree_of_completion: 0,
+        total_number: null,
+        total_net_weight: null,
+        total_gross_weight: null,
+        isRunning: false
+      });
+    }
+  }
   
-  // 按照左1, 左2, 左3...的顺序排序
+  // 按照有效轴号列表的顺序排序
-  return leftAxles.sort((a, b) => {
+  return resultAxles.sort((a, b) => {
-    // 提取轴号中的数字，如"左1"提取出1
+    const aIndex = validLeftAxles.indexOf(a.axle_number);
-    const aNum = extractAxleNumber(a.axle_number);
+    const bIndex = validLeftAxles.indexOf(b.axle_number);
-    const bNum = extractAxleNumber(b.axle_number);
+    return aIndex - bIndex;
-    return aNum - bNum;
   });
 };
 
 // 获取右侧轴信息
 const getRightAxles = (equipment) => {
-  if (!equipment.status_records || equipment.status_records.length === 0) return [];
+  if (!equipment.status_records || equipment.status_records.length === 0) {
+    // 如果没有运行记录，返回所有右侧轴的未运行状态
+    const validAxles = equipmentAxlesMap[equipment.equipment_code] || [];
+    return validAxles.filter(axle => axle.includes('右') || axle.includes('right')).map(axleNumber => ({
+      axle_number: axleNumber,
+      specification: '',
+      model: '',
+      raw_wire_disc: '',
+      degree_of_completion: 0,
+      total_number: null,
+      total_net_weight: null,
+      total_gross_weight: null,
+      isRunning: false
+    }));
+  }
   
-  // 获取所有右侧轴记录
+  // 获取设备对应的预期轴号列表
-  const rightAxles = equipment.status_records.filter(record => {
+  const validAxles = equipmentAxlesMap[equipment.equipment_code] || [];
-    const axle = record.axle_number;
+  const validRightAxles = validAxles.filter(axle => 
-    return axle.includes('右') || axle.includes('right');
+    axle.includes('右') || axle.includes('right')
-  });
+  );
+  
+  // 记录已经处理的轴号，避免重复显示
+  const processedAxles = new Set();
+  const resultAxles = [];
+  
+  // 处理运行中的记录
+  for (const record of equipment.status_records) {
+    if (!record.axle_number) continue;
+    
+    // 检查记录中包含哪些右侧轴
+    for (const axleNumber of validRightAxles) {
+      if (record.axle_number.includes(axleNumber) && !processedAxles.has(axleNumber)) {
+        processedAxles.add(axleNumber);
+        resultAxles.push({
+          ...record,
+          axle_number: axleNumber // 使用实际的轴号而不是复合轴号
+        });
+      }
+    }
+  }
+  
+  // 添加未运行的右侧轴
+  for (const axleNumber of validRightAxles) {
+    if (!processedAxles.has(axleNumber)) {
+      resultAxles.push({
+        axle_number: axleNumber,
+        specification: '',
+        model: '',
+        raw_wire_disc: '',
+        degree_of_completion: 0,
+        total_number: null,
+        total_net_weight: null,
+        total_gross_weight: null,
+        isRunning: false
+      });
+    }
+  }
   
-  // 按照右1, 右2, 右3...的顺序排序
+  // 按照有效轴号列表的顺序排序
-  return rightAxles.sort((a, b) => {
+  return resultAxles.sort((a, b) => {
-    // 提取轴号中的数字，如"右1"提取出1
+    const aIndex = validRightAxles.indexOf(a.axle_number);
-    const aNum = extractAxleNumber(a.axle_number);
+    const bIndex = validRightAxles.indexOf(b.axle_number);
-    const bNum = extractAxleNumber(b.axle_number);
+    return aIndex - bIndex;
-    return aNum - bNum;
   });
 };
 
+// 检查设备是否在运行
+const isEquipmentRunning = (equipment) => {
+  if (!equipment.status_records || equipment.status_records.length === 0) return false;
+  
+  // 获取设备对应的预期轴号列表
+  const validAxles = equipmentAxlesMap[equipment.equipment_code] || [];
+  
+  // 检查是否有至少一个有效轴号在status_records中
+  return equipment.status_records.some(record => 
+    record.axle_number && validAxles.some(axle => record.axle_number.includes(axle))
+  );
+};
+
 // 提取轴号中的数字
 const extractAxleNumber = (axleStr) => {
   if (!axleStr) return Infinity;
@@ -318,4 +466,21 @@ const getCompletionClass = (degree) => {
   color: #909399;
   padding: 20px 0;
 }
+
+/* 不在运行的轴样式 */
+.axle-item.not-running {
+  background-color: #f5f7fa;
+  opacity: 0.7;
+  border-color: #c0c4cc;
+}
+
+.axle-item.not-running::before {
+  background-color: #c0c4cc;
+}
+
+.not-running-label {
+  font-size: 12px;
+  color: #f56c6c;
+  font-weight: normal;
+}
 </style>