添加漆包机台运行状态表功能，支持查看设备运行状态、完成度和更新时间，优化表格布局和状态标签显示

src/views/plan/EnamellingMachineStatus.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="enamelling-machine-container">
+    <div class="table-header">
+      <h3>漆包机台运行状态表</h3>
+      <div class="table-actions">
+        <el-button @click="refreshData" type="primary" size="small">刷新数据</el-button>
+      </div>
+    </div>
+    
+    <!-- 调试信息 -->
+    <div v-if="!loading" style="margin-bottom: 10px; font-size: 12px; color: #666;">
+      调试信息: 获取到 {{ equipmentData.length }} 条设备数据，表格共 {{ tableData.length }} 行
+    </div>
+    
+    <div v-loading="loading" class="table-wrapper">
+      <el-table 
+        :data="tableData" 
+        style="width: 100%" 
+        border
+        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
+        empty-text="暂无数据"
+        :scrollbar-always-on="true"
+      >
+        <el-table-column 
+          prop="equipment_code" 
+          label="设备编号" 
+          width="120" 
+          fixed="left"
+        />
+        
+        <el-table-column 
+          prop="axle_number" 
+          label="轴号" 
+          width="100" 
+        />
+        
+        
+        <el-table-column 
+          prop="specification" 
+          label="规格" 
+          width="100" 
+        />
+        
+        <el-table-column 
+          prop="model" 
+          label="型号" 
+          width="100" 
+        />
+        
+        <el-table-column 
+          prop="raw_wire_disc" 
+          label="原料线盘" 
+          width="120" 
+        />
+        
+        <el-table-column 
+          prop="wire_disc" 
+          label="线盘" 
+          width="100" 
+        />
+        
+        <el-table-column 
+          prop="wight_completion" 
+          label="重量完成(kg)" 
+          width="120" 
+        >
+          <template #default="scope">
+            {{ scope.row.wight_completion }}
+          </template>
+        </el-table-column>
+        
+        <el-table-column 
+          prop="degree_of_completion" 
+          label="完成度(%)" 
+          width="100" 
+        >
+          <template #default="scope">
+            {{ (scope.row.degree_of_completion * 100).toFixed(2)}}%
+          </template>
+        </el-table-column>
+
+        <el-table-column 
+          prop="update_time" 
+          label="更新时间" 
+          width="180" 
+        >
+          <template #default="scope">
+            {{ formatDateTime(scope.row.update_time) }}
+          </template>
+        </el-table-column>
+        
+        <el-table-column 
+          prop="status" 
+          label="状态" 
+          width="100" 
+          fixed="right"
+        >
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">
+              {{ getStatusText(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { API_CONFIG } from "@/config/api"
+
+// 接收从父组件传递的数据
+const props = defineProps({
+  equipmentData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 响应式数据
+const loading = ref(false)
+const equipmentData = ref([])
+
+// 当组件加载时，使用父组件传递的数据
+equipmentData.value = props.equipmentData
+
+// 计算属性：展开状态记录为表格行数据
+const tableData = computed(() => {
+  if (!equipmentData.value.length) return [];
+  
+  // 展开每个设备的状态记录为表格行
+  const rows = [];
+  equipmentData.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
+        });
+      });
+    }
+  });
+  
+  return rows;
+});
+
+// 方法：获取数据
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.EQUIPMENT_STATUS}`);
+    const result = await response.json();
+    
+    if (result.code === 200 && result.data && result.data.equipment_status_list) {
+      equipmentData.value = result.data.equipment_status_list;
+      console.log('API返回数据:', result.data.equipment_status_list);
+    } else {
+      console.error('获取设备状态数据失败:', result.message);
+    }
+  } catch (error) {
+    console.error('API调用失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 方法：刷新数据
+const refreshData = () => {
+  fetchData();
+};
+
+// 方法：格式化日期时间
+const formatDateTime = (dateTimeStr) => {
+  if (!dateTimeStr) return '';
+  try {
+    const date = new Date(dateTimeStr);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  } catch (error) {
+    return dateTimeStr;
+  }
+};
+
+// 方法：获取状态类型
+const getStatusType = (status) => {
+  switch (status) {
+    case '1':
+      return 'success';
+    case '2':
+      return 'warning';
+    case '3':
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+// 方法：获取状态文本
+const getStatusText = (status) => {
+  switch (status) {
+    case '1':
+      return '运行中';
+    case '2':
+      return '待机';
+    case '3':
+      return '故障';
+    default:
+      return '未知';
+  }
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  // 如果组件是通过按钮点击加载的，则不需要在挂载时获取数据
+  // 因为数据已经通过父组件的 handleEnamellingMachineStatus 方法获取了
+});
+</script>
+
+<style scoped>
+.enamelling-machine-container {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.table-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+}
+
+.table-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+:deep(.el-table) {
+  font-size: 14px;
+}
+
+:deep(.el-table th) {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+:deep(.el-table td) {
+  padding: 8px 0;
+  white-space: nowrap;
+}
+</style>

src/views/plan/index.vue

@@ -3,6 +3,12 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          @click="handleEnamellingMachineStatus"
+          v-hasPermi="['warehouse:WmsImportResult:query']"
+        >漆包机台运行状态表</el-button>
         <el-button
           type="info"
           plain
@@ -59,6 +65,7 @@ import { getDateRangeByTimeRange } from "@/utils/dateFormat"
 import ParetoAnalysis from './ParetoAnalysis.vue'
 import ItemAnalysis from './ItemAnalysis.vue'
 import EquipmentStatus from './EquipmentStatus.vue'
+import EnamellingMachineStatus from './EnamellingMachineStatus.vue'
 import RealTimeInventory from './RealTimeInventory.vue'
 import EmptyContent from './EmptyContent.vue'
 
@@ -142,6 +149,27 @@ function handleItemAnalysis() {
   currentComponent.value = ItemAnalysis;
 }
 
+// 漆包机台运行状态表按钮点击事件
+function handleEnamellingMachineStatus() {
+  // 调用设备状态API
+  fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.EQUIPMENT_STATUS}`)
+    .then(response => response.json())
+    .then(data => {
+      if (data.code === 200 && data.data && data.data.equipment_status_list) {
+        equipmentData.value = data.data.equipment_status_list;
+        message.value = data.message || '设备状态数据获取成功';
+        // 切换到漆包机台状态组件
+        currentComponent.value = EnamellingMachineStatus;
+      } else {
+        message.value = '设备状态数据获取失败';
+      }
+    })
+    .catch(error => {
+      console.error('设备状态API调用失败:', error);
+      message.value = '设备状态API调用失败';
+    });
+}
+
 // 设备状态按钮点击事件
 function handleEquipmentStatus() {
   // 调用设备状态API
@@ -170,6 +198,22 @@ function handleRealTimeInventory() {
   currentComponent.value = RealTimeInventory;
 }
 
+// 处理查询表格事件
+function getList() {
+  // 根据当前组件状态执行相应的刷新操作
+  if (currentComponent.value === EnamellingMachineStatus) {
+    // 刷新漆包机台运行状态表
+    handleEnamellingMachineStatus();
+  } else if (currentComponent.value === EquipmentStatus) {
+    // 刷新设备状态
+    handleEquipmentStatus();
+  } else if (currentComponent.value === RealTimeInventory) {
+    // 刷新实时库存表
+    message.value = '正在获取实时库存数据...';
+    currentComponent.value = RealTimeInventory;
+  }
+}
+
 </script>
 
 <style>