From 6b36deecfea4b93a35d95dccf3bebfa1c55d48ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 5 Nov 2025 19:11:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(track):=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80=E5=92=8C=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化设备卡片的模板结构，提高代码可读性
- 调整操作按钮布局为水平排列并设置固定尺寸
- 移除冗余的CSS样式
---
 apps/l2/src/views/l2/track/rect.vue | 164 ++++++++++++++--------------
 1 file changed, 81 insertions(+), 83 deletions(-)

diff --git a/apps/l2/src/views/l2/track/rect.vue b/apps/l2/src/views/l2/track/rect.vue
index 70cb845..6c030e2 100644
--- a/apps/l2/src/views/l2/track/rect.vue
+++ b/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 
-                v-for="device in entryDevicesList" 
-                :key="device.positionNameEn"
-                class="device-card"
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
+              <div v-for="device in entryDevicesList" :key="device.positionNameEn" class="device-card" :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 
-                v-for="device in furnaceDevicesList" 
-                :key="device.positionNameEn"
-                class="device-card"
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
+              <div v-for="device in furnaceDevicesList" :key="device.positionNameEn" class="device-card" :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 
-                v-for="device in coatDevicesList" 
-                :key="device.positionNameEn"
-                class="device-card"
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
+              <div v-for="device in coatDevicesList" :key="device.positionNameEn" class="device-card" :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 
-                v-for="device in exitDevicesList" 
-                :key="device.positionNameEn"
-                class="device-card"
-                :class="{ 
-                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                  'has-data': hasRealtimeData(device.positionNameEn)
-                }"
-                @click="selectDevice(device.positionNameEn)"
-              >
+              <div v-for="device in exitDevicesList" :key="device.positionNameEn" class="device-card" :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">
@@ -121,7 +97,7 @@
           </div>
         </div>
       </el-col>
-      
+
       <!-- 右侧：信息面板 -->
       <el-col :span="8">
         <div class="info-panels">
@@ -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 size="small" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')" style="width: 100%; margin-bottom: 8px;">手动卸卷</el-button>
-              <el-button size="small" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')" style="width: 100%; margin-bottom: 8px;">整卷回退</el-button>
-              <el-button size="small" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')" style="width: 100%; margin-bottom: 8px;">半卷回退</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, 'ONLINE')">钢卷上线</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">手动卸卷</el-button>
+              <el-button class="action-btn" size="small"
+                @click="handleOperate(selectedCard, 'ALL_RETURN')">整卷回退</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>
 
@@ -319,40 +319,40 @@ export default {
     },
     // 入口段设备列表
     entryDevicesList() {
-      return this.matMapList.filter(device => 
+      return this.matMapList.filter(device =>
         ['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(device.positionNameEn)
       )
     },
     // 熔炉段设备列表
     furnaceDevicesList() {
-      return this.matMapList.filter(device => 
+      return this.matMapList.filter(device =>
         ['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(device.positionNameEn)
       )
     },
     // 涂层段设备列表
     coatDevicesList() {
-      return this.matMapList.filter(device => 
+      return this.matMapList.filter(device =>
         ['TM', 'TL', 'COAT'].includes(device.positionNameEn)
       )
     },
     // 出口段设备列表
     exitDevicesList() {
-      return this.matMapList.filter(device => 
+      return this.matMapList.filter(device =>
         ['CXL1', 'CXL2', 'TR', 'WEIT'].includes(device.positionNameEn)
       )
     },
     // 根据选中设备获取详细数据
     currentDeviceData() {
       if (!this.selectedCard) return []
-      
+
       const deviceId = this.selectedCard.positionNameEn
       const data = []
-      
+
       // 开卷机数据
       if ((deviceId === 'POR1' || deviceId === 'POR2') && this.realtimeData.entry) {
         const entry = this.realtimeData.entry
         const reelNumber = entry.payOffReelNumber
-        
+
         if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
           data.push(
             { label: '入口钢卷ID', value: entry.entryCoilId || '--', unit: '' },
@@ -376,7 +376,7 @@ export default {
       else if ((deviceId === 'ENL1' || deviceId === 'ENL2') && this.realtimeData.entry) {
         const entry = this.realtimeData.entry
         const reelNumber = entry.payOffReelNumber
-        
+
         if ((deviceId === 'ENL1' && reelNumber === 1) || (deviceId === 'ENL2' && reelNumber === 2)) {
           data.push(
             { label: '入口活套位置', value: this.formatValue(entry.celLength), unit: 'm' },
@@ -481,7 +481,7 @@ export default {
       else if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
         const exit = this.realtimeData.exit
         const reelNumber = this.realtimeData.entry.payOffReelNumber
-        
+
         // CXL1对应开卷机1，CXL2对应开卷机2
         if ((deviceId === 'CXL1' && reelNumber === 1) || (deviceId === 'CXL2' && reelNumber === 2)) {
           data.push(
@@ -512,7 +512,7 @@ export default {
           { label: '出口段速度', value: this.formatValue(exit.speedExitSection), unit: 'm/min' }
         )
       }
-      
+
       return data
     }
   },
@@ -549,7 +549,7 @@ export default {
     // 判断设备是否有实时数据
     hasRealtimeData(deviceId) {
       if (!this.realtimeData) return false
-      
+
       // 入口段设备
       if (['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(deviceId) && this.realtimeData.entry) {
         if (deviceId === 'POR1' && this.realtimeData.entry.payOffReelNumber === 1) return true
@@ -570,14 +570,14 @@ export default {
         if (deviceId === 'CXL1' && reelNumber === 1) return true
         if (deviceId === 'CXL2' && reelNumber === 2) return true
       }
-      
+
       return false
     },
 
     // 获取设备钢卷号
     getDeviceCoilId(deviceId) {
       const deviceInfo = this.getDeviceInfo(deviceId)
-      
+
       // 开卷机特殊处理
       if (deviceId === 'POR1' || deviceId === 'POR2') {
         if (this.realtimeData.entry) {
@@ -588,18 +588,18 @@ export default {
           return '空闲'
         }
       }
-      
+
       return deviceInfo?.matId || '空闲'
     },
 
     // 获取设备卡片上显示的迷你实时数据
     getMiniRealtimeData(deviceId) {
       const data = []
-      
+
       if ((deviceId === 'POR1' || deviceId === 'POR2') && this.realtimeData.entry) {
         const entry = this.realtimeData.entry
         const reelNumber = entry.payOffReelNumber
-        
+
         if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
           data.push(
             { label: '速度', value: this.formatValue(entry.stripSpeed) + ' m/min' },
@@ -613,7 +613,7 @@ export default {
       } else if ((deviceId === 'ENL1' || deviceId === 'ENL2') && this.realtimeData.entry) {
         const entry = this.realtimeData.entry
         const reelNumber = entry.payOffReelNumber
-        
+
         if ((deviceId === 'ENL1' && reelNumber === 1) || (deviceId === 'ENL2' && reelNumber === 2)) {
           data.push(
             { label: '位置', value: this.formatValue(entry.celLength) + ' m' },
@@ -658,7 +658,7 @@ export default {
         )
       } else if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
         const reelNumber = this.realtimeData.entry.payOffReelNumber
-        
+
         // CXL1对应开卷机1，CXL2对应开卷机2
         if ((deviceId === 'CXL1' && reelNumber === 1) || (deviceId === 'CXL2' && reelNumber === 2)) {
           data.push(
@@ -676,7 +676,7 @@ export default {
           { label: '长度', value: this.formatValue(this.realtimeData.exit.coilLength) + ' m' }
         )
       }
-      
+
       return data
     },
 
@@ -734,17 +734,17 @@ export default {
     // WebSocket连接
     connectWebSocket() {
       if (this.socket) return
-      
+
       const url = 'ws://140.143.206.120:18081/websocket?type=track_measure'
-      
+
       try {
         this.socket = new WebSocket(url)
-        
+
         this.socket.onopen = () => {
           console.log('WebSocket已连接')
           this.isConnected = true
         }
-        
+
         this.socket.onmessage = (event) => {
           try {
             const data = JSON.parse(event.data)
@@ -754,12 +754,12 @@ export default {
             console.error('数据解析错误:', error)
           }
         }
-        
+
         this.socket.onerror = (error) => {
           console.error('WebSocket错误:', error)
           this.isConnected = false
         }
-        
+
         this.socket.onclose = () => {
           console.log('WebSocket已关闭')
           this.isConnected = false
@@ -786,7 +786,7 @@ export default {
       if (data.appMeasureExitMessage) {
         this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
       }
-      
+
       // 强制更新视图
       this.$forceUpdate()
     },
@@ -819,7 +819,6 @@ export default {
       }).then(() => {
         adjustPosition(params).then(() => {
           this.$message.success('调整成功')
-          this.exitAdjustMode()
           this.fetchData()
         }).catch(err => {
           console.error('调整失败：', err)
@@ -872,7 +871,7 @@ export default {
     this.fetchData()
     this.connectWebSocket()
   },
-  
+
   beforeDestroy() {
     this.disconnectWebSocket()
   }
@@ -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>