添加机台筛选功能，支持按设备代码过滤显示，优化筛选器布局为水平排列并增加间距

src/views/plan/EquipmentStatus.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="equipment-status-container">
-    <!-- 完成度筛选器 -->
+    <!-- 筛选器容器 -->
-    <div class="filter-container">
+    <div class="filters-row">
-      <span class="filter-label">完成度筛选:</span>
+      <div class="filter-container">
-      <el-select v-model="selectedCompletionLevel" @change="onCompletionLevelChange" placeholder="请选择完成度" style="width: 150px">
+        <span class="filter-label">完成度筛选:</span>
-        <el-option label="全部显示" value="all" />
+        <el-select v-model="selectedCompletionLevel" @change="onCompletionLevelChange" placeholder="请选择完成度" style="width: 150px">
-        <el-option label="0% - 25%" value="low" />
+          <el-option label="全部显示" value="all" />
-        <el-option label="25% - 75%" value="medium" />
+          <el-option label="0% - 25%" value="low" />
-        <el-option label="75% - 100%" value="high" />
+          <el-option label="25% - 75%" value="medium" />
-        <el-option label="100%" value="full" />
+          <el-option label="75% - 100%" value="high" />
-      </el-select>
+          <el-option label="100%" value="full" />
+        </el-select>
+      </div>
+      
+      <div class="filter-container">
+        <span class="filter-label">机台筛选:</span>
+        <el-select v-model="selectedEquipment" @change="onEquipmentChange" placeholder="请选择机台" style="width: 200px">
+          <el-option label="全部机台" value="all" />
+          <el-option 
+            v-for="equipment in equipmentList" 
+            :key="equipment.equipment_code" 
+            :label="equipment.equipment_code" 
+            :value="equipment.equipment_code" 
+          />
+        </el-select>
+      </div>
     </div>
     
     <div class="equipment-grid">
@@ -260,10 +275,45 @@ const equipmentAxlesMap = {
   'QB034': ['左边', '右边']
 };
 
+// 机台筛选相关状态
+const selectedEquipment = ref('all');
+
+// 获取设备列表（用于筛选器）
+const equipmentList = computed(() => {
+  // 根据完成度筛选条件，只显示开机且满足完成度条件的机台
+  const filteredEquipment = props.equipmentData.filter(equipment => {
+    // 首先检查设备是否在运行
+    if (!isEquipmentRunning(equipment)) return false;
+    
+    // 然后检查是否有满足完成度条件的轴
+    if (selectedCompletionLevel.value === 'all') {
+      return true; // 如果是全部显示，只要开机即可
+    }
+    
+    // 获取所有轴信息
+    const leftAxles = getLeftAxles(equipment);
+    const rightAxles = getRightAxles(equipment);
+    const allAxles = [...leftAxles, ...rightAxles];
+    
+    // 检查是否有轴满足完成度条件
+    return allAxles.some(axle => shouldShowAxle(axle.degree_of_completion));
+  });
+  
+  // 创建设备列表，只包含设备代码
+  return filteredEquipment.map(equipment => ({
+    equipment_code: equipment.equipment_code
+  }));
+});
+
 // 对设备数据进行排序，将不在生产中的设备移到最后
 const sortedEquipmentData = computed(() => {
   // 创建一个副本以避免修改原始数组
-  const equipmentCopy = [...props.equipmentData];
+  let equipmentCopy = [...props.equipmentData];
+  
+  // 根据选择的机台筛选数据
+  if (selectedEquipment.value !== 'all') {
+    equipmentCopy = equipmentCopy.filter(equipment => equipment.equipment_code === selectedEquipment.value);
+  }
   
   return equipmentCopy.sort((a, b) => {
     // 使用新的判断函数检查设备是否在运行
@@ -908,6 +958,11 @@ const onCompletionLevelChange = () => {
   // 筛选逻辑通过shouldShowAxle函数处理，这里不需要额外操作
 };
 
+// 机台筛选变化处理函数
+const onEquipmentChange = () => {
+  // 筛选逻辑通过sortedEquipmentData计算属性处理，这里不需要额外操作
+};
+
 // 判断是否应该显示轴
 const shouldShowAxle = (degree) => {
   if (!degree) return false;
@@ -1575,9 +1630,17 @@ const updateCharts = () => {
   font-weight: normal;
 }
 
+/* 筛选器行样式 */
+.filters-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 /* 筛选器样式 */
 .filter-container {
-  margin-bottom: 20px;
   display: flex;
   align-items: center;
 }