refactor(track): 优化设备卡片布局和操作按钮样式

- 简化设备卡片的模板结构，提高代码可读性
- 调整操作按钮布局为水平排列并设置固定尺寸
- 移除冗余的CSS样式

apps/l2/src/views/l2/track/rect.vue

@@ -8,16 +8,10 @@
           <div class="section-area">
             <div class="section-header">入口段</div>
             <div class="device-grid">
-              <div 
+              <div v-for="device in entryDevicesList" :key="device.positionNameEn" class="device-card" :class="{
-                v-for="device in entryDevicesList" 
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                :key="device.positionNameEn"
+                'has-data': hasRealtimeData(device.positionNameEn)
-                class="device-card"
+              }" @click="selectDevice(device.positionNameEn)">
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
@@ -37,16 +31,10 @@
           <div class="section-area">
             <div class="section-header">熔炉段</div>
             <div class="device-grid">
-              <div 
+              <div v-for="device in furnaceDevicesList" :key="device.positionNameEn" class="device-card" :class="{
-                v-for="device in furnaceDevicesList" 
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                :key="device.positionNameEn"
+                'has-data': hasRealtimeData(device.positionNameEn)
-                class="device-card"
+              }" @click="selectDevice(device.positionNameEn)">
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
@@ -66,16 +54,10 @@
           <div class="section-area">
             <div class="section-header">涂层段</div>
             <div class="device-grid">
-              <div 
+              <div v-for="device in coatDevicesList" :key="device.positionNameEn" class="device-card" :class="{
-                v-for="device in coatDevicesList" 
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                :key="device.positionNameEn"
+                'has-data': hasRealtimeData(device.positionNameEn)
-                class="device-card"
+              }" @click="selectDevice(device.positionNameEn)">
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
@@ -95,16 +77,10 @@
           <div class="section-area">
             <div class="section-header">出口段</div>
             <div class="device-grid">
-              <div 
+              <div v-for="device in exitDevicesList" :key="device.positionNameEn" class="device-card" :class="{
-                v-for="device in exitDevicesList" 
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                :key="device.positionNameEn"
+                'has-data': hasRealtimeData(device.positionNameEn)
-                class="device-card"
+              }" @click="selectDevice(device.positionNameEn)">
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
@@ -169,14 +145,38 @@
           <div class="panel" v-if="selectedCard">
             <div class="panel-title">操作</div>
             <div class="btn-list">
-              <el-button size="small" type="primary" @click="handleOperate(selectedCard, 'ONLINE')" style="width: 100%; margin-bottom: 8px;">钢卷上线</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">钢卷上线</el-button>
-              <el-button size="small" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')" style="width: 100%; margin-bottom: 8px;">手动卸卷</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">手动卸卷</el-button>
-              <el-button size="small" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')" style="width: 100%; margin-bottom: 8px;">整卷回退</el-button>
+              <el-button class="action-btn" size="small"
-              <el-button size="small" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')" style="width: 100%; margin-bottom: 8px;">半卷回退</el-button>
+                @click="handleOperate(selectedCard, 'ALL_RETURN')">整卷回退</el-button>
-              <el-button size="small" type="info" @click="handleOperate(selectedCard, 'BLOCK')" style="width: 100%;">卸卷并封闭</el-button>
+              <el-button class="action-btn" size="small"
+                @click="handleOperate(selectedCard, 'HALF_RETURN')">半卷回退</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">卸卷并封闭</el-button>
             </div>
           </div>
+
+          <div class="panel">
+
+            <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
+            <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
+              <el-form-item label="当前位置" prop="current">
+                <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
+                  <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
+                    :value="item.positionNameEn"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="目标位置" prop="target">
+                <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
+                  <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
+                    :value="item.positionNameEn"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target"
+              @click="handleConfirmAdjust">确认调整</el-button>
+          </div>
         </div>
+
       </el-col>
     </el-row>
 
@@ -819,7 +819,6 @@ export default {
       }).then(() => {
         adjustPosition(params).then(() => {
           this.$message.success('调整成功')
-          this.exitAdjustMode()
           this.fetchData()
         }).catch(err => {
           console.error('调整失败：', err)
@@ -880,11 +879,6 @@ export default {
 </script>
 
 <style scoped>
-.track-container {
-  padding: 20px;
-  background: #fff;
-}
-
 .device-layout {
   background: #f5f5f5;
   border-radius: 4px;
@@ -1064,8 +1058,6 @@ export default {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
-  max-height: 500px;
-  overflow-y: auto;
 }
 
 .data-item {
@@ -1085,7 +1077,7 @@ export default {
 .data-value {
   font-size: 24px;
   font-weight: 600;
-    color: #333;
+  color: #333;
   margin-bottom: 4px;
   font-family: 'Arial', sans-serif;
 }
@@ -1097,6 +1089,12 @@ export default {
 
 .btn-list {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  margin-bottom: 8px;
+  width: 80px;
+  height: 40px;
 }
 </style>