优化设备状态详情布局，使用网格布局重构基本信息展示，调整标签和值的样式对齐方式

src/views/plan/EquipmentStatus.vue

@@ -92,28 +92,38 @@
         <!-- 左侧：轴基本信息 -->
         <div class="axle-info-panel">
           <div class="detail-title">基本信息</div>
-          <div class="detail-row">
+          <div class="info-grid-container">
+            <div class="info-item">
               <span class="detail-label">设备编号:</span>
               <span class="detail-value">{{ selectedEquipmentCode }}</span>
+            </div>
+            <div class="info-item">
               <span class="detail-label">轴号:</span>
               <span class="detail-value">{{ selectedAxle.axle_number }}</span>
+            </div>
+            <div class="info-item">
               <span class="detail-label">运行状态:</span>
               <span class="detail-value" :class="{ 'status-running': selectedAxle.update_time, 'status-stopped': !selectedAxle.update_time }">
                 {{ selectedAxle.update_time ? '运行中' : '不在运行' }}
               </span>
             </div>
-          <div v-if="selectedAxle.update_time" class="detail-row specification-row">
+            <div v-if="selectedAxle.update_time" class="info-item">
               <span class="detail-label">规格:</span>
               <span class="detail-value spec-item">{{ selectedAxle.specification || '无' }}</span>
-            <span class="detail-label model-label">型号:</span>
+            </div>
+            <div v-if="selectedAxle.update_time" class="info-item">
+              <span class="detail-label">型号:</span>
               <span class="detail-value model-item">{{ selectedAxle.model || '无' }}</span>
-            <span class="detail-label disc-label">线盘:</span>
+            </div>
+            <div v-if="selectedAxle.update_time" class="info-item">
+              <span class="detail-label">线盘:</span>
               <span class="detail-value disc-item">{{ selectedAxle.raw_wire_disc || '无' }}</span>
             </div>
-          <div v-if="selectedAxle.update_time" class="detail-row">
+            <div v-if="selectedAxle.update_time" class="info-item">
               <span class="detail-label">完成度:</span>
               <span class="detail-value">{{ (selectedAxle.degree_of_completion * 100).toFixed(1) }}%</span>
             </div>
+          </div>
           <div v-if="selectedAxle.update_time && (selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight)" class="stock-details">
             <div class="detail-title">库存信息</div>
             <div v-if="selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight" class="detail-row stock-row">
@@ -1680,6 +1690,21 @@ const updateCharts = () => {
   line-height: 1.5;
 }
 
+/* 3列网格布局容器 */
+.info-grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 15px;
+}
+
+/* 网格项样式 */
+.info-item {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+
 /* 规格、型号、线盘在同一行显示的特殊样式 */
 .specification-row {
   flex-wrap: wrap;
@@ -1690,11 +1715,7 @@ const updateCharts = () => {
   padding: 2px 6px;
   border-radius: 3px;
   margin-right: 10px;
-}
-
-.model-label {
-  min-width: auto;
-  margin-left: 5px;
+  display: inline-block;
 }
 
 .model-item {
@@ -1702,17 +1723,15 @@ const updateCharts = () => {
   padding: 2px 6px;
   border-radius: 3px;
   margin-right: 10px;
-}
-
-.disc-label {
-  min-width: auto;
-  margin-left: 5px;
+  display: inline-block;
 }
 
 .disc-item {
   background-color: rgba(230, 162, 60, 0.1);
   padding: 2px 6px;
   border-radius: 3px;
+  margin-right: 10px;
+  display: inline-block;
 }
 
 /* 库存信息在同一行显示的特殊样式 */
@@ -1768,14 +1787,15 @@ const updateCharts = () => {
 }
 
 .detail-label {
-  min-width: 100px;
+  min-width: 80px;
   font-weight: bold;
   color: #606266;
+  text-align: left;
 }
 
 .detail-value {
-  flex: 1;
   color: #303133;
+  text-align: left;
 }
 
 .detail-title {