From bd1a6f64deba8d876388f5dd8fefc9fdffb22e74 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Wed, 5 Nov 2025 18:48:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E8=BF=87=E7=A8=8B=E8=B7=9F?=
 =?UTF-8?q?=E8=B8=AA=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/l2/src/views/l2/track/index.vue | 2024 ++++++++++++++++----------
 apps/l2/src/views/l2/track/rect.vue  | 1021 ++++++++++---
 2 files changed, 2077 insertions(+), 968 deletions(-)

diff --git a/apps/l2/src/views/l2/track/index.vue b/apps/l2/src/views/l2/track/index.vue
index b59b844..3e69906 100644
--- a/apps/l2/src/views/l2/track/index.vue
+++ b/apps/l2/src/views/l2/track/index.vue
@@ -1,862 +1,1332 @@
 <template>
-  <div class="coil-management">
-    <!-- 1. 钢卷卡片区域 -->
-    <div class="card-list">
-      <div 
-        class="coil-card"
-        v-for="(item, index) in matMapList"
-        :key="index"
-        :class="getCardClass(item)"
-        @click="selectCard(item)"
-      >
-        <!-- 顶部位置区域 -->
-        <div class="card-top">
-          <span class="pos-name">{{ item.positionNameCn }}({{ item.positionNameEn }})</span>
+  <div class="industrial-monitor">
+    <!-- 顶部标题栏 -->
+    <div class="monitor-header">
+      <div class="header-left">
+        <div class="status-indicator" :class="{ active: isConnected }"></div>
+        <h1 class="main-title">过程跟踪实时监控系统</h1>
         </div>
-        <!-- 中间钢卷号区域 -->
-        <div class="card-middle">
-          <span class="coil-id">{{ item.matId || '-' }}</span>
-        </div>
-        <!-- 底部标签区域（调整模式下显示角色） -->
-        <div class="card-bottom" v-if="adjustMode">
-          <span class="card-tag" :class="getTagClass(item)">
-            {{ getCardRole(item) }}
+      <div class="header-right">
+        <div class="connection-info">
+          <span class="label">连接状态：</span>
+          <span class="value" :class="{ connected: isConnected }">
+            {{ isConnected ? '已连接' : '连接中...' }}
           </span>
         </div>
+        <div class="time-display">{{ currentTime }}</div>
       </div>
     </div>
 
-    <!-- 2. 下方操作查看区（左：详情 右：操作） -->
-    <div class="operate-view">
-      <!-- 左侧：详情查看区 -->
-      <div class="view-panel">
+    <!-- 数据类型选择器 -->
+    <div class="type-selector-panel">
+      <div class="selector-wrapper">
+        <label class="selector-label">数据类型</label>
+        <el-select v-model="currentType" @change="handleTypeChange" size="small" class="type-select">
+          <el-option
+            v-for="type in types"
+            :key="type.value"
+            :label="type.label"
+            :value="type.value"
+          >
+            <span class="option-text">{{ type.label }}</span>
+            <span class="option-desc">{{ type.desc }}</span>
+          </el-option>
+        </el-select>
+        </div>
+      <div class="stats-info">
+        <div class="stat-item">
+          <span class="stat-label">数据包</span>
+          <span class="stat-value">{{ messageCount }}</span>
+                  </div>
+        <div class="stat-item">
+          <span class="stat-label">刷新率</span>
+          <span class="stat-value">{{ refreshRate }} Hz</span>
+                  </div>
+                  </div>
+              </div>
+
+    <!-- 主数据区域 - 仅在track_measure类型时显示图表 -->
+    <div v-if="currentType === 'track_measure'" class="data-panels">
+      <!-- 入口数据监控 -->
+      <div class="data-panel">
         <div class="panel-header">
-          <span class="panel-title">{{ adjustMode ? '位置调整详情' : '钢卷详情' }}</span>
+          <div class="header-title">
+            <i class="el-icon-s-data"></i>
+            <span>入口段数据监控</span>
+              </div>
+          <div class="panel-badges">
+            <span class="badge success" v-if="chartData.entry.time.length > 0">实时</span>
+            <span class="badge info">{{ chartData.entry.time.length }}/{{ maxDataPoints }}</span>
+                  </div>
+                  </div>
+        <div class="panel-content">
+          <!-- 实时数据卡片 -->
+          <div class="data-cards">
+            <div class="data-card">
+              <div class="card-label">入口张力1</div>
+              <div class="card-value">{{ getLatestValue('entry', 'tensionPorBr1') }}</div>
+              <div class="card-unit">kN</div>
+                  </div>
+            <div class="data-card">
+              <div class="card-label">入口张力2</div>
+              <div class="card-value">{{ getLatestValue('entry', 'tensionBr1Br2') }}</div>
+              <div class="card-unit">kN</div>
+                </div>
+            <div class="data-card">
+              <div class="card-label">入口张力3</div>
+              <div class="card-value">{{ getLatestValue('entry', 'tensionBr2Br3') }}</div>
+              <div class="card-unit">kN</div>
+              </div>
+            <div class="data-card highlight">
+              <div class="card-label">带钢速度</div>
+              <div class="card-value">{{ getLatestValue('entry', 'stripSpeed') }}</div>
+              <div class="card-unit">m/min</div>
+            </div>
+          </div>
+          <!-- 趋势图表 -->
+          <div ref="entryChart" class="chart-container"></div>
+            </div>
+          </div>
+
+      <!-- 炉温数据监控 -->
+      <div class="data-panel">
+        <div class="panel-header">
+          <div class="header-title">
+            <i class="el-icon-sunny"></i>
+            <span>炉温数据监控</span>
+              </div>
+          <div class="panel-badges">
+            <span class="badge success" v-if="chartData.furnace.time.length > 0">实时</span>
+            <span class="badge info">{{ chartData.furnace.time.length }}/{{ maxDataPoints }}</span>
+              </div>
+              </div>
+        <div class="panel-content">
+          <!-- 实时数据卡片 -->
+          <div class="data-cards">
+            <div class="data-card temperature">
+              <div class="card-label">PH炉实际温度</div>
+              <div class="card-value">{{ getLatestValue('furnace', 'phFurnaceTemperatureActual') }}</div>
+              <div class="card-unit">°C</div>
+              </div>
+            <div class="data-card temperature">
+              <div class="card-label">NOF1炉实际温度</div>
+              <div class="card-value">{{ getLatestValue('furnace', 'nof1FurnaceTemperatureActual') }}</div>
+              <div class="card-unit">°C</div>
+              </div>
+            <div class="data-card">
+              <div class="card-label">NOF1炉设定温度</div>
+              <div class="card-value">{{ getLatestValue('furnace', 'nof1FurnaceTemperatureSet') }}</div>
+              <div class="card-unit">°C</div>
+              </div>
+              </div>
+          <!-- 趋势图表 -->
+          <div ref="furnaceChart" class="chart-container"></div>
+            </div>
+              </div>
+              
+      <!-- 涂层数据监控 -->
+      <div class="data-panel">
+        <div class="panel-header">
+          <div class="header-title">
+            <i class="el-icon-brush"></i>
+            <span>涂层段数据监控</span>
+                </div>
+          <div class="panel-badges">
+            <span class="badge success" v-if="chartData.coat.time.length > 0">实时</span>
+            <span class="badge info">{{ chartData.coat.time.length }}/{{ maxDataPoints }}</span>
+                </div>
+                </div>
+        <div class="panel-content">
+          <!-- 实时数据卡片 -->
+          <div class="data-cards">
+            <div class="data-card">
+              <div class="card-label">顶部涂层重量</div>
+              <div class="card-value">{{ getLatestValue('coat', 'avrCoatingWeightTop') }}</div>
+              <div class="card-unit">g/m²</div>
+                </div>
+            <div class="data-card">
+              <div class="card-label">底部涂层重量</div>
+              <div class="card-value">{{ getLatestValue('coat', 'avrCoatingWeightBottom') }}</div>
+              <div class="card-unit">g/m²</div>
+                </div>
+            <div class="data-card">
+              <div class="card-label">气刀压力</div>
+              <div class="card-value">{{ getLatestValue('coat', 'airKnifePressure') }}</div>
+              <div class="card-unit">kPa</div>
+              </div>
+            <div class="data-card highlight">
+              <div class="card-label">出口速度</div>
+              <div class="card-value">{{ getLatestValue('coat', 'stripSpeedTmExit') }}</div>
+              <div class="card-unit">m/min</div>
+            </div>
+          </div>
+          <!-- 趋势图表 -->
+          <div ref="coatChart" class="chart-container"></div>
+        </div>
+      </div>
+
+      <!-- 出口数据监控 -->
+      <div class="data-panel">
+        <div class="panel-header">
+          <div class="header-title">
+            <i class="el-icon-document-checked"></i>
+            <span>出口段数据监控</span>
+          </div>
+          <div class="panel-badges">
+            <span class="badge success" v-if="chartData.exit.time.length > 0">实时</span>
+            <span class="badge info">{{ chartData.exit.time.length }}/{{ maxDataPoints }}</span>
+          </div>
         </div>
         <div class="panel-content">
-          <!-- 调整模式：显示两个选中位置对比 -->
-          <div class="adjust-compare" v-if="adjustMode">
-            <div v-if="selectedPositions.length > 0" class="compare-wrap">
-              <!-- 当前位置 -->
-              <div class="position-panel current-pos">
-                <div class="panel-title">当前位置</div>
-                <div class="position-detail" v-if="selectedPositions[0]">
-                  <div class="detail-item">
-                    <span class="detail-label">位置名称：</span>
-                    <span class="detail-value">{{ selectedPositions[0].positionNameCn || '-' }}</span>
-                  </div>
-                  <div class="detail-item">
-                    <span class="detail-label">位置代号：</span>
-                    <span class="detail-value">{{ selectedPositions[0].positionNameEn || '-' }}</span>
-                  </div>
-                  <div class="detail-item">
-                    <span class="detail-label">钢卷号：</span>
-                    <span class="detail-value">{{ selectedPositions[0].matId || '-' }}</span>
-                  </div>
-                </div>
-                <div class="empty-tip" v-else>未选择当前位置</div>
-              </div>
-
-              <!-- 箭头图标 -->
-              <div class="exchange-icon">
-                <i class="el-icon-refresh-right"></i>
-              </div>
-
-              <!-- 目标位置 -->
-              <div class="position-panel target-pos">
-                <div class="panel-title">目标位置</div>
-                <div class="position-detail" v-if="selectedPositions[1]">
-                  <div class="detail-item">
-                    <span class="detail-label">位置名称：</span>
-                    <span class="detail-value">{{ selectedPositions[1].positionNameCn || '-' }}</span>
-                  </div>
-                  <div class="detail-item">
-                    <span class="detail-label">位置代号：</span>
-                    <span class="detail-value">{{ selectedPositions[1].positionNameEn || '-' }}</span>
-                  </div>
-                  <div class="detail-item">
-                    <span class="detail-label">钢卷号：</span>
-                    <span class="detail-value">{{ selectedPositions[1].matId || '-' }}</span>
-                  </div>
-                </div>
-                <div class="empty-tip" v-else>未选择目标位置</div>
-              </div>
+          <!-- 实时数据卡片 -->
+          <div class="data-cards">
+            <div class="data-card">
+              <div class="card-label">出口张力1</div>
+              <div class="card-value">{{ getLatestValue('exit', 'tensionBr8Br9') }}</div>
+              <div class="card-unit">kN</div>
             </div>
-            <div class="empty-tip" v-else>请选择2个位置进行调整</div>
-
-            <!-- 调整模式操作按钮 -->
-            <div class="adjust-btns" v-if="adjustMode">
-              <el-button type="success" @click="handleConfirmAdjust" :disabled="selectedPositions.length !== 2">
-                确认调整
-              </el-button>
-              <el-button type="info" @click="exitAdjustMode" class="ml-2">
-                取消调整
-              </el-button>
+            <div class="data-card">
+              <div class="card-label">出口张力2</div>
+              <div class="card-value">{{ getLatestValue('exit', 'tensionBr9Tr') }}</div>
+              <div class="card-unit">kN</div>
+          </div>
+            <div class="data-card highlight">
+              <div class="card-label">出口速度</div>
+              <div class="card-value">{{ getLatestValue('exit', 'speedExitSection') }}</div>
+              <div class="card-unit">m/min</div>
+            </div>
+              </div>
+          <!-- 趋势图表 -->
+          <div ref="exitChart" class="chart-container"></div>
+              </div>
             </div>
           </div>
 
-          <!-- 非调整模式：显示单个卡片详情 -->
-          <div class="single-detail" v-else>
-            <div v-if="selectedCard" class="detail-list">
-              <div class="detail-item">
-                <span class="detail-label">位置名称：</span>
-                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">位置代号：</span>
-                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">钢卷号：</span>
-                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划ID：</span>
-                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划号：</span>
-                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">开卷机编号：</span>
-                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">卷取机编号：</span>
-                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
-              </div>
-            </div>
-
-            <!-- 新增：回退信息展示区 -->
-            <div v-if="selectedCard" class="return-info-section">
-              <!-- 回退信息标题 -->
-              <div class="panel-title" style="margin: 24px 0 12px;">回退信息</div>
-              
-              <!-- 加载状态 -->
-              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
-              
-              <!-- 错误状态 -->
-              <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
-                {{ returnError }}
-              </div>
-              
-              <!-- 回退信息内容 -->
-              <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
-                <div class="detail-item">
-                  <span class="detail-label">回退钢卷号：</span>
-                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划ID：</span>
-                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划号：</span>
-                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退类型：</span>
-                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退重量：</span>
-                  <span class="detail-value">
-                    {{ returnInfo.returnWeight || '-' }} 
-                    {{ returnInfo.returnWeight ? 'kg' : '' }}
-                  </span>
-                </div>
-              </div>
-              
-              <!-- 无回退信息 -->
-              <div class="empty-tip" v-else>无回退信息</div>
-            </div>
-
-            <div class="empty-tip" v-else>请选择钢卷卡片查看详情</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧：操作按钮区 -->
-      <div class="operation-panel">
-        <div class="panel-header">
-          <span class="panel-title">钢卷操作</span>
-        </div>
-        <div class="panel-content">
-          <!-- 非调整模式：显示操作按钮 -->
-          <div class="operation-buttons" v-if="!adjustMode">
-            <div class="button-group" v-if="selectedCard">
-              <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')" class="btn-block">
-                钢卷上线
-              </el-button>
-              <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')" class="btn-block mt-2">
-                手动卸卷
-              </el-button>
-              <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')" class="btn-block mt-2">
-                整卷回退
-              </el-button>
-              <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')" class="btn-block mt-2">
-                半卷回退
-              </el-button>
-              <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')" class="btn-block mt-2">
-                卸卷并封闭
-              </el-button>
-              <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
-                甩尾
-              </el-button> -->
-            </div>
-            <div class="empty-tip" v-else>请先选择钢卷卡片</div>
-          </div>
-
-          <!-- 调整模式：显示提示 -->
-          <div class="adjust-tip" v-if="adjustMode">
-            <div class="tip-box">
-              <i class="el-icon-info"></i>
-              <p class="tip-text">当前为调整模式</p>
-              <p class="tip-desc">请在上方选择「当前位置」和「目标位置」，完成后点击确认调整</p>
-            </div>
-            <div class="selected-count" v-if="selectedPositions.length > 0">
-              <div class="count-item current" v-if="selectedPositions[0]">
-                已选当前位置：{{ selectedPositions[0].positionNameEn }}
-              </div>
-              <div class="count-item target" v-if="selectedPositions[1]">
-                已选目标位置：{{ selectedPositions[1].positionNameEn }}
-              </div>
-            </div>
-          </div>
+    <!-- 其他类型数据展示 -->
+    <div v-else class="other-type-display">
+      <div class="other-type-card">
+        <div class="card-icon">
+          <i class="el-icon-view"></i>
         </div>
+        <h3 class="card-title">{{ getCurrentTypeLabel() }}</h3>
+        <p class="card-desc">当前数据类型不支持图表展示，原始数据如下</p>
       </div>
+      <div class="raw-data-display">
+        <div class="raw-data-header">
+          <span class="raw-title">原始数据</span>
+          <el-button size="mini" @click="copyRawData" icon="el-icon-document-copy">复制</el-button>
     </div>
-
-    <!-- 3. 右下侧：调整模式切换按钮 -->
-    <div class="adjust-mode-btn">
-      <el-button type="primary" @click="enterAdjustMode" v-if="!adjustMode">
-        <i class="el-icon-swap"></i> 调整钢卷位置
-      </el-button>
+        <pre class="raw-content">{{ formattedRawData }}</pre>
     </div>
-
-    <!-- 4. 操作对话框 -->
-    <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
-      <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
-        <el-form-item label="开卷机编号" prop="porIdx">
-          <el-input v-model="operateMatForm.porIdx"></el-input>
-        </el-form-item>
-        <el-form-item label="卷取机编号" prop="trIdx">
-          <el-input v-model="operateMatForm.trIdx"></el-input>
-        </el-form-item>
-        <el-form-item label="计划id" prop="planId">
-          <el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></el-input>
-        </el-form-item>
-        <el-form-item label="钢卷号" prop="entryMatId">
-          <el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="计划号" prop="planNo">
-          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
-        </el-form-item> -->
-        <el-form-item label="操作类型" prop="operation">
-          <el-select v-model="operateMatForm.operation" disabled>
-            <el-option label="钢卷上线" value="ONLINE"></el-option>
-            <el-option label="手动卸卷" value="UNLOAD"></el-option>
-            <el-option label="整卷回退" value="ALL_RETURN"></el-option>
-            <el-option label="半卷回退" value="HALF_RETURN"></el-option>
-            <el-option label="卸卷并封闭" value="BLOCK"></el-option>
-            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
-          </el-select>
-        </el-form-item>
-        
-        <!-- 回退相关字段 -->
-        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
-          <el-form-item label="回退卷号" prop="returnMatId">
-            <el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
-          </el-form-item>
-          <el-form-item label="回退重量" prop="returnWeight">
-            <el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
-          </el-form-item>
-          <el-form-item label="回退备注" prop="returnRemark">
-            <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
-          </el-form-item>
-        </template>
-        
-        <!-- 产出长度字段 -->
-        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
-          <el-form-item label="产出钢卷长度" prop="coilLength">
-            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
-          </el-form-item>
-        </template>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="operateMatStatus = false">取消</el-button>
-        <el-button type="primary" @click="submitOperateForm">确定</el-button>
       </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { adjustPosition, getTrackMatPosition, operateMat, getBackData } from '@/api/l2/track'
+import * as echarts from 'echarts';
 
 export default {
+  name: 'IndustrialTrackMonitor',
   data() {
     return {
-      matMapList: [],
-      selectedCard: null, // 非调整模式选中的单个卡片
-      selectedPositions: [], // 调整模式选中的位置：[当前, 目标]
-      adjustMode: false, // 是否为调整模式
-      operateMatForm: {
-        porIdx: null,
-        trIdx: null,
-        planId: '',
-        entryMatId: '',
-        // planNo: '',
-        operation: '',
-        returnMatId: '',
-        returnWeight: null,
-        returnRemark: '',
-        coilLength: null
-      },
-      operateRules: {
-        planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
-        entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
-        operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
-        returnMatId: [
-          { 
-            required: true, 
-            message: '请输入回退卷号', 
-            trigger: 'blur',
-            validator: (rule, val, cb) => {
-              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
-                cb(new Error('请输入回退卷号'))
-              } else cb()
-            }
-          }
-        ],
-        returnWeight: [
-          { 
-            required: true, 
-            message: '请输入回退重量', 
-            trigger: 'blur',
-            validator: (rule, val, cb) => {
-              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
-                cb(new Error('请输入回退重量'))
-              } else cb()
-            }
-          }
-        ]
-      },
-      operateMatStatus: false, // 操作对话框显示状态
-      returnInfo: {}, // 存储回退接口返回的数据
-      isLoadingReturn: false, // 回退信息加载状态
-      returnError: '' // 回退信息获取失败的提示
-    }
-  },
-
-  computed: {
-    // 操作对话框标题
-    getOperateTitle() {
-      const titleMap = {
-        'ONLINE': '钢卷上线',
-        'UNLOAD': '手动卸卷',
-        'ALL_RETURN': '整卷回退',
-        'HALF_RETURN': '半卷回退',
-        'BLOCK': '卸卷并封闭',
-        'THROW_TAIL': '甩尾'
-      }
-      return titleMap[this.operateMatForm.operation] || '钢卷操作'
-    }
-  },
-
-  methods: {
-    // 获取钢卷数据
-    fetchData() {
-      getTrackMatPosition().then(res => {
-        this.matMapList = res.data.matMapList || []
-      }).catch(err => {
-        console.error('获取钢卷数据失败：', err)
-        this.$message.error('获取数据失败，请重试')
-      })
-    },
-
-    /**
-     * 获取回退信息
-     * @param {Number} posIdx - 位置索引（接口必填query参数）
-     */
-    fetchReturnData(posIdx) {
-      // 1. 校验posIdx
-      if (!posIdx && posIdx !== 0) {
-        this.returnInfo = {};
-        this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
-        return;
-      }
-
-      // 2. 加载状态初始化
-      this.isLoadingReturn = true;
-      this.returnError = '';
-
-      // 3. 调用回退接口（posIdx作为query参数传递）
-      getBackData({ posIdx })
-      .then(res => {
-        this.isLoadingReturn = false;
-        // 接口成功且有数据
-        if (res.code === 200 && res.data) {
-          this.returnInfo = res.data;
-        } else {
-          this.returnInfo = {};
-          this.returnError = res.msg || '获取回退信息失败';
+      socket: null,
+      types: [
+        { value: 'alarm', label: '告警信息', desc: '系统告警与异常' },
+        { value: 'track_position', label: '位置跟踪', desc: '钢卷位置信息' },
+        { value: 'calc_setup_result', label: '设定计算', desc: '计算结果数据' },
+        { value: 'track_measure', label: '过程测量', desc: '实时测量数据' },
+        { value: 'track_signal', label: '信号跟踪', desc: '信号状态数据' },
+        { value: 'track_matmap', label: '物料映射', desc: '物料映射关系' }
+      ],
+      currentType: 'track_measure',
+      isConnected: false,
+      rawData: null,
+      currentTime: '',
+      messageCount: 0,
+      refreshRate: 0,
+      lastMessageTime: 0,
+      // 图表实例
+      entryChart: null,
+      furnaceChart: null,
+      coatChart: null,
+      exitChart: null,
+      // 图表数据存储
+      chartData: {
+        entry: {
+          time: [],
+          tensionPorBr1: [],
+          tensionBr1Br2: [],
+          tensionBr2Br3: [],
+          stripSpeed: []
+        },
+        furnace: {
+          time: [],
+          phFurnaceTemperatureActual: [],
+          nof1FurnaceTemperatureActual: [],
+          nof1FurnaceTemperatureSet: []
+        },
+        coat: {
+          time: [],
+          avrCoatingWeightTop: [],
+          avrCoatingWeightBottom: [],
+          airKnifePressure: [],
+          stripSpeedTmExit: []
+        },
+        exit: {
+          time: [],
+          tensionBr8Br9: [],
+          tensionBr9Tr: [],
+          speedExitSection: []
         }
-      })
-      .catch(err => {
-        this.isLoadingReturn = false;
-        this.returnInfo = {};
-        this.returnError = '获取回退信息出错，请重试';
-        console.error('回退信息接口异常：', err);
+      },
+      maxDataPoints: 50
+    };
+  },
+  computed: {
+    formattedRawData() {
+      if (!this.rawData) return '等待接收数据...';
+      try {
+        return JSON.stringify(JSON.parse(this.rawData), null, 2);
+      } catch (e) {
+        return this.rawData;
+      }
+    }
+  },
+  mounted() {
+    this.updateTime();
+    setInterval(this.updateTime, 1000);
+    
+    if (this.currentType === 'track_measure') {
+      this.$nextTick(() => {
+        this.initCharts();
+      });
+    }
+    
+    this.connectWebSocket();
+    window.addEventListener('resize', this.handleWindowResize);
+  },
+  beforeDestroy() {
+    this.disconnectWebSocket();
+    this.destroyCharts();
+    window.removeEventListener('resize', this.handleWindowResize);
+  },
+  methods: {
+    // 更新时间显示
+    updateTime() {
+      const now = new Date();
+      this.currentTime = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
       });
     },
 
-    // 进入调整模式
-    enterAdjustMode() {
-      this.adjustMode = true
-      this.selectedPositions = []
-      this.selectedCard = null
-      this.$message.info('已进入调整模式，请选择当前位置和目标位置')
+    // 获取当前类型标签
+    getCurrentTypeLabel() {
+      const type = this.types.find(t => t.value === this.currentType);
+      return type ? type.label : this.currentType;
     },
 
-    // 退出调整模式
-    exitAdjustMode() {
-      this.adjustMode = false
-      this.selectedPositions = []
-      this.$message.info('已取消调整模式')
-    },
-
-    // 选择卡片（区分调整/非调整模式）
-    selectCard(item) {
-      if (this.adjustMode) {
-        // 调整模式：最多选2个，支持取消
-        const isSelected = this.selectedPositions.includes(item)
-        if (isSelected) {
-          this.selectedPositions = this.selectedPositions.filter(val => val !== item)
-        } else {
-          if (this.selectedPositions.length < 2) {
-            this.selectedPositions.push(item)
-          } else {
-            this.$message.warning('最多只能选择2个位置进行调整')
-          }
-        }
-      } else {
-        // 非调整模式：单选
-        this.selectedCard = this.selectedCard === item ? null : item
-        
-        // 选中卡片时查询回退信息，取消选中时清空
-        if (this.selectedCard) {
-          this.fetchReturnData(this.selectedCard.posIdx);
-        } else {
-          this.returnInfo = {};
-          this.returnError = '';
-        }
-      }
-    },
-
-    // 获取卡片样式
-    getCardClass(item) {
-      if (this.adjustMode) {
-        if (this.selectedPositions[0] === item) return 'coil-card current'
-        if (this.selectedPositions[1] === item) return 'coil-card target'
-        return 'coil-card'
-      } else {
-        return this.selectedCard === item ? 'coil-card selected' : 'coil-card'
-      }
-    },
-
-    // 获取卡片标签样式
-    getTagClass(item) {
-      if (this.adjustMode) {
-        if (this.selectedPositions[0] === item) return 'card-tag current'
-        if (this.selectedPositions[1] === item) return 'card-tag target'
-        return 'card-tag normal'
-      } else {
-        return this.selectedCard === item ? 'card-tag selected' : 'card-tag normal'
-      }
-    },
-
-    // 调整模式下卡片角色文本
-    getCardRole(item) {
-      if (this.selectedPositions[0] === item) return '当前位置'
-      if (this.selectedPositions[1] === item) return '目标位置'
-      return '可选位置'
-    },
-
-    // 确认调整位置
-    handleConfirmAdjust() {
-      if (this.selectedPositions.length !== 2) {
-        this.$message.warning('请选择当前位置和目标位置（共2个）')
-        return
-      }
-
-      const [current, target] = this.selectedPositions
-      const params = {
-        currentPos: current.positionNameEn,
-        targetPos: target.positionNameEn
-      }
-
-      this.$confirm(`确定将 ${current.positionNameEn} 的钢卷调整到 ${target.positionNameEn}？`, '确认调整', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        adjustPosition(params).then(() => {
-          this.$message.success('调整成功')
-          this.exitAdjustMode()
-          this.fetchData()
-        }).catch(err => {
-          console.error('调整失败：', err)
-          this.$message.error('调整失败，请重试')
-        })
+    // 复制原始数据
+    copyRawData() {
+      navigator.clipboard.writeText(this.formattedRawData).then(() => {
+        this.$message.success('已复制到剪贴板');
       }).catch(() => {
-        this.$message.info('已取消调整')
-      })
+        this.$message.error('复制失败');
+      });
     },
 
-    // 打开操作对话框
-    handleOperate(row, operation) {
-      this.$refs.operateForm?.resetFields()
-      this.operateMatForm = {
-        porIdx: row.posIdx || null,
-        trIdx: row.posIdx || null,
-        planId: row.planId || '',
-        entryMatId: row.matId || '',
-        planNo: row.planNo || '',
-        operation: operation,
-        returnMatId: '',
-        returnWeight: null,
-        returnRemark: '',
-        coilLength: null
+    // 获取最新值
+    getLatestValue(chartType, field) {
+      const data = this.chartData[chartType][field];
+      if (!data || data.length === 0) return '--';
+      const value = data[data.length - 1];
+      return typeof value === 'number' ? value.toFixed(2) : value;
+    },
+
+    // 初始化所有图表
+    initCharts() {
+      this.destroyCharts();
+      
+      if (this.$refs.entryChart) {
+        this.entryChart = echarts.init(this.$refs.entryChart, 'dark');
+        this.entryChart.setOption(this.getEntryChartOption());
+      }
+      
+      if (this.$refs.furnaceChart) {
+        this.furnaceChart = echarts.init(this.$refs.furnaceChart, 'dark');
+        this.furnaceChart.setOption(this.getFurnaceChartOption());
+      }
+      
+      if (this.$refs.coatChart) {
+        this.coatChart = echarts.init(this.$refs.coatChart, 'dark');
+        this.coatChart.setOption(this.getCoatChartOption());
+      }
+      
+      if (this.$refs.exitChart) {
+        this.exitChart = echarts.init(this.$refs.exitChart, 'dark');
+        this.exitChart.setOption(this.getExitChartOption());
       }
-      this.operateMatStatus = true
     },
 
-    // 提交操作表单
-    submitOperateForm() {
-      this.$refs.operateForm.validate(valid => {
-        if (valid) {
-          operateMat(this.operateMatForm).then(() => {
-            this.$message.success('操作成功')
-            this.operateMatStatus = false
-            this.fetchData()
-          }).catch(err => {
-            console.error('操作失败：', err)
-            this.$message.error('操作失败，请重试')
-          })
-        } else {
-          this.$message.warning('请完善表单信息')
-        }
-      })
-    }
-  },
+    // 入口数据图表配置
+    getEntryChartOption() {
+      return {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: ['入口张力1', '入口张力2', '入口张力3', '带钢速度'],
+          textStyle: { color: '#b0b0b0', fontSize: 12 },
+          top: 10
+        },
+        grid: { left: '8%', right: '5%', bottom: '10%', top: '15%' },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { lineStyle: { color: '#2d3847', type: 'dashed' } }
+        },
+        series: [
+          {
+            name: '入口张力1',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00d4ff' },
+            itemStyle: { color: '#00d4ff' },
+            areaStyle: { color: 'rgba(0, 212, 255, 0.1)' }
+          },
+          {
+            name: '入口张力2',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00ff9d' },
+            itemStyle: { color: '#00ff9d' }
+          },
+          {
+            name: '入口张力3',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ffa502' },
+            itemStyle: { color: '#ffa502' }
+          },
+          {
+            name: '带钢速度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ff6348' },
+            itemStyle: { color: '#ff6348' }
+          }
+        ]
+      };
+    },
 
-  mounted() {
-    this.fetchData()
+    // 炉温数据图表配置
+    getFurnaceChartOption() {
+      return {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          borderColor: '#ffa502',
+          borderWidth: 1,
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: ['PH炉实际温度', 'NOF1炉实际温度', 'NOF1炉设定温度'],
+          textStyle: { color: '#b0b0b0', fontSize: 12 },
+          top: 10
+        },
+        grid: { left: '8%', right: '5%', bottom: '10%', top: '15%' },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { lineStyle: { color: '#2d3847', type: 'dashed' } }
+        },
+        series: [
+          {
+            name: 'PH炉实际温度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ff6348' },
+            itemStyle: { color: '#ff6348' },
+            areaStyle: { color: 'rgba(255, 99, 72, 0.1)' }
+          },
+          {
+            name: 'NOF1炉实际温度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ffa502' },
+            itemStyle: { color: '#ffa502' }
+          },
+          {
+            name: 'NOF1炉设定温度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, type: 'dashed', color: '#7f8fa6' },
+            itemStyle: { color: '#7f8fa6' }
+          }
+        ]
+      };
+    },
+
+    // 涂层数据图表配置
+    getCoatChartOption() {
+      return {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          borderColor: '#00ff9d',
+          borderWidth: 1,
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', '出口速度'],
+          textStyle: { color: '#b0b0b0', fontSize: 12 },
+          top: 10
+        },
+        grid: { left: '8%', right: '5%', bottom: '10%', top: '15%' },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { lineStyle: { color: '#2d3847', type: 'dashed' } }
+        },
+        series: [
+          {
+            name: '顶部平均涂层重量',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00ff9d' },
+            itemStyle: { color: '#00ff9d' },
+            areaStyle: { color: 'rgba(0, 255, 157, 0.1)' }
+          },
+          {
+            name: '底部平均涂层重量',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00d4ff' },
+            itemStyle: { color: '#00d4ff' }
+          },
+          {
+            name: '气刀压力',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ffa502' },
+            itemStyle: { color: '#ffa502' }
+          },
+          {
+            name: '出口速度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ff6348' },
+            itemStyle: { color: '#ff6348' }
+          }
+        ]
+      };
+    },
+
+    // 出口数据图表配置
+    getExitChartOption() {
+      return {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: ['出口张力1', '出口张力2', '出口速度'],
+          textStyle: { color: '#b0b0b0', fontSize: 12 },
+          top: 10
+        },
+        grid: { left: '8%', right: '5%', bottom: '10%', top: '15%' },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { lineStyle: { color: '#2d3847' } },
+          axisLabel: { color: '#7f8fa6', fontSize: 10 },
+          splitLine: { lineStyle: { color: '#2d3847', type: 'dashed' } }
+        },
+        series: [
+          {
+            name: '出口张力1',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00d4ff' },
+            itemStyle: { color: '#00d4ff' },
+            areaStyle: { color: 'rgba(0, 212, 255, 0.1)' }
+          },
+          {
+            name: '出口张力2',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#00ff9d' },
+            itemStyle: { color: '#00ff9d' }
+          },
+          {
+            name: '出口速度',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2, color: '#ff6348' },
+            itemStyle: { color: '#ff6348' }
+          }
+        ]
+      };
+    },
+
+    handleWindowResize() {
+      if (this.entryChart) this.entryChart.resize();
+      if (this.furnaceChart) this.furnaceChart.resize();
+      if (this.coatChart) this.coatChart.resize();
+      if (this.exitChart) this.exitChart.resize();
+    },
+
+    destroyCharts() {
+      if (this.entryChart) {
+        this.entryChart.dispose();
+        this.entryChart = null;
+      }
+      if (this.furnaceChart) {
+        this.furnaceChart.dispose();
+        this.furnaceChart = null;
+      }
+      if (this.coatChart) {
+        this.coatChart.dispose();
+        this.coatChart = null;
+      }
+      if (this.exitChart) {
+        this.exitChart.dispose();
+        this.exitChart = null;
+      }
+    },
+
+    connectWebSocket() {
+      this.disconnectWebSocket();
+      this.isConnected = false;
+      
+      const url = `ws://140.143.206.120:18081/websocket?type=${this.currentType}`;
+      
+      try {
+        this.socket = new WebSocket(url);
+        
+        this.socket.onopen = () => {
+          console.log('WebSocket连接已建立');
+          this.isConnected = true;
+        };
+        
+        this.socket.onmessage = (event) => {
+          this.rawData = event.data;
+          this.messageCount++;
+          
+          // 计算刷新率
+          const now = Date.now();
+          if (this.lastMessageTime > 0) {
+            const interval = (now - this.lastMessageTime) / 1000;
+            this.refreshRate = interval > 0 ? (1 / interval).toFixed(1) : 0;
+          }
+          this.lastMessageTime = now;
+          
+          this.processData(event.data);
+        };
+        
+        this.socket.onerror = (error) => {
+          console.error('WebSocket错误:', error);
+          this.isConnected = false;
+        };
+        
+        this.socket.onclose = (event) => {
+          console.log(`WebSocket连接已关闭: ${event.code} - ${event.reason}`);
+          this.isConnected = false;
+          
+          if (event.code !== 1000) {
+            setTimeout(() => this.connectWebSocket(), 3000);
+          }
+        };
+      } catch (error) {
+        console.error('建立WebSocket连接失败:', error);
+        setTimeout(() => this.connectWebSocket(), 3000);
+      }
+    },
+
+    disconnectWebSocket() {
+      if (this.socket) {
+        this.socket.close(1000, '主动关闭');
+        this.socket = null;
+      }
+    },
+
+    handleTypeChange() {
+      this.rawData = null;
+      this.messageCount = 0;
+      this.refreshRate = 0;
+      this.resetChartData();
+      
+      if (this.currentType === 'track_measure') {
+        this.$nextTick(() => {
+          this.initCharts();
+        });
+      } else {
+        this.destroyCharts();
+      }
+      
+      this.connectWebSocket();
+    },
+
+    resetChartData() {
+      this.chartData = {
+        entry: { time: [], tensionPorBr1: [], tensionBr1Br2: [], tensionBr2Br3: [], stripSpeed: [] },
+        furnace: { time: [], phFurnaceTemperatureActual: [], nof1FurnaceTemperatureActual: [], nof1FurnaceTemperatureSet: [] },
+        coat: { time: [], avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [] },
+        exit: { time: [], tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [] }
+      };
+      this.updateCharts();
+    },
+
+    processData(data) {
+      try {
+        const parsedData = JSON.parse(data);
+        
+        if (this.currentType === 'track_measure') {
+          this.processTrackMeasureData(parsedData);
+        }
+      } catch (error) {
+        console.error('数据解析错误:', error);
+      }
+    },
+
+    processTrackMeasureData(data) {
+      const now = new Date();
+      const timeLabel = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
+      
+      if (data.appMeasureEntryMessage) {
+        this.addDataPoint('entry', timeLabel, {
+          tensionPorBr1: data.appMeasureEntryMessage.tensionPorBr1,
+          tensionBr1Br2: data.appMeasureEntryMessage.tensionBr1Br2,
+          tensionBr2Br3: data.appMeasureEntryMessage.tensionBr2Br3,
+          stripSpeed: data.appMeasureEntryMessage.stripSpeed
+        });
+      }
+      
+      if (data.appMeasureFurnaceMessage) {
+        this.addDataPoint('furnace', timeLabel, {
+          phFurnaceTemperatureActual: data.appMeasureFurnaceMessage.phFurnaceTemperatureActual,
+          nof1FurnaceTemperatureActual: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureActual,
+          nof1FurnaceTemperatureSet: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureSet
+        });
+      }
+      
+      if (data.appMeasureCoatMessage) {
+        this.addDataPoint('coat', timeLabel, {
+          avrCoatingWeightTop: data.appMeasureCoatMessage.avrCoatingWeightTop,
+          avrCoatingWeightBottom: data.appMeasureCoatMessage.avrCoatingWeightBottom,
+          airKnifePressure: data.appMeasureCoatMessage.airKnifePressure,
+          stripSpeedTmExit: data.appMeasureCoatMessage.stripSpeedTmExit
+        });
+      }
+      
+      if (data.appMeasureExitMessage) {
+        this.addDataPoint('exit', timeLabel, {
+          tensionBr8Br9: data.appMeasureExitMessage.tensionBr8Br9,
+          tensionBr9Tr: data.appMeasureExitMessage.tensionBr9Tr,
+          speedExitSection: data.appMeasureExitMessage.speedExitSection
+        });
+      }
+      
+      this.updateCharts();
+    },
+
+    addDataPoint(chartType, time, values) {
+      this.chartData[chartType].time.push(time);
+      
+      Object.keys(values).forEach(key => {
+        if (this.chartData[chartType][key] !== undefined) {
+          this.chartData[chartType][key].push(values[key]);
+        }
+      });
+      
+      if (this.chartData[chartType].time.length > this.maxDataPoints) {
+        this.chartData[chartType].time.shift();
+        
+        Object.keys(values).forEach(key => {
+          if (this.chartData[chartType][key] !== undefined) {
+            this.chartData[chartType][key].shift();
+          }
+        });
+      }
+    },
+
+    updateCharts() {
+      if (this.entryChart) {
+        this.entryChart.setOption({
+          xAxis: { data: this.chartData.entry.time },
+          series: [
+            { data: this.chartData.entry.tensionPorBr1 },
+            { data: this.chartData.entry.tensionBr1Br2 },
+            { data: this.chartData.entry.tensionBr2Br3 },
+            { data: this.chartData.entry.stripSpeed }
+          ]
+        });
+      }
+      
+      if (this.furnaceChart) {
+        this.furnaceChart.setOption({
+          xAxis: { data: this.chartData.furnace.time },
+          series: [
+            { data: this.chartData.furnace.phFurnaceTemperatureActual },
+            { data: this.chartData.furnace.nof1FurnaceTemperatureActual },
+            { data: this.chartData.furnace.nof1FurnaceTemperatureSet }
+          ]
+        });
+      }
+      
+      if (this.coatChart) {
+        this.coatChart.setOption({
+          xAxis: { data: this.chartData.coat.time },
+          series: [
+            { data: this.chartData.coat.avrCoatingWeightTop },
+            { data: this.chartData.coat.avrCoatingWeightBottom },
+            { data: this.chartData.coat.airKnifePressure },
+            { data: this.chartData.coat.stripSpeedTmExit }
+          ]
+        });
+      }
+      
+      if (this.exitChart) {
+        this.exitChart.setOption({
+          xAxis: { data: this.chartData.exit.time },
+          series: [
+            { data: this.chartData.exit.tensionBr8Br9 },
+            { data: this.chartData.exit.tensionBr9Tr },
+            { data: this.chartData.exit.speedExitSection }
+          ]
+        });
+      }
+    }
   }
-}
+};
 </script>
 
 <style scoped>
-/* 全局容器 */
-.coil-management {
+/* 全局容器 - 工业风深色背景 */
+.industrial-monitor {
+  min-height: calc(100vh - 140px);
+  background: transparent;
   padding: 20px;
-  min-height: 100vh;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
 
-/* 1. 卡片区域样式 */
-.card-list {
+/* 顶部标题栏 */
+.monitor-header {
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 24px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 30px;
+  background: linear-gradient(135deg, #1e2836 0%, #2a3544 100%);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 212, 255, 0.1);
 }
 
-/* 卡片基础样式（紧凑版） */
-.coil-card {
-  width: 160px; /* 更紧凑的宽度 */
-  border: 1px solid #ccc; /* 整体边框 */
-  border-radius: 4px;
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ff6348;
+  box-shadow: 0 0 10px rgba(255, 99, 72, 0.5);
+  animation: pulse-red 2s infinite;
+}
+
+.status-indicator.active {
+  background: #00ff9d;
+  box-shadow: 0 0 15px rgba(0, 255, 157, 0.8);
+  animation: pulse-green 2s infinite;
+}
+
+@keyframes pulse-red {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes pulse-green {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.1); }
+}
+
+.main-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #00d4ff 0%, #00ff9d 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 2px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.connection-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 163, 2, 0.2);
+}
+
+.connection-info .label {
+  color: #7f8fa6;
+  font-size: 13px;
+}
+
+.connection-info .value {
+  color: #ffa502;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.connection-info .value.connected {
+  color: #00ff9d;
+}
+
+.time-display {
+  color: #00d4ff;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 1px;
+}
+
+/* 类型选择器面板 */
+.type-selector-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 25px;
+  background: rgba(30, 40, 54, 0.8);
+  border-radius: 10px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.15);
+}
+
+.selector-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.selector-label {
+  color: #b0b0b0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.type-select {
+  width: 250px;
+}
+
+.option-text {
+  font-weight: 500;
+}
+
+.option-desc {
+  color: #7f8fa6;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.stats-info {
+  display: flex;
+  gap: 25px;
+}
+
+.stat-item {
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* 防止内容溢出 */
-  cursor: pointer;
-  transition: all 0.2s ease;
+  align-items: center;
+  gap: 5px;
 }
 
-/* 卡片 hover 效果 */
-.coil-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* 顶部位置区域 */
-.card-top {
-  padding: 6px 8px;
-  border-bottom: 1px solid #ccc;
-  color: #fff;
-  text-align: center;
-  font-size: 13px;
-  background-color: #333; /* 顶部背景（可根据需求调整） */
-}
-
-/* 中间钢卷号区域 */
-.card-middle {
-  padding: 10px 8px;
-  border-bottom: 1px solid #ccc;
-  color: #fff;
-  text-align: center;
-  font-size: 15px;
-  font-weight: 500;
-  background-color: #444; /* 中间背景（可根据需求调整） */
-}
-
-/* 底部标签区域（调整模式下） */
-.card-bottom {
-  padding: 4px;
-  color: #fff;
-  text-align: center;
+.stat-label {
+  color: #7f8fa6;
   font-size: 12px;
-  background-color: #555; /* 底部背景（可根据需求调整） */
 }
 
-/* 卡片标签样式 */
-.card-tag {
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-.card-tag.current {
-  background-color: #409eff;
-}
-.card-tag.target {
-  background-color: #67c23a;
-}
-.card-tag.normal {
-  background-color: #909399;
+.stat-value {
+  color: #00d4ff;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
 }
 
-/* 卡片选中样式（非调整模式） */
-.coil-card.selected {
-  border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.5);
-}
-
-/* 调整模式下的当前/目标位置卡片 */
-.coil-card.current {
-  border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.5);
-}
-.coil-card.target {
-  border-color: #67c23a;
-  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.5);
-}
-
-/* 2. 操作查看区样式 */
-.operate-view {
-  display: flex;
+/* 数据面板网格 */
+.data-panels {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
-/* 面板基础样式（左/右通用） */
-.view-panel, .operation-panel {
-  flex: 1;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+/* 单个数据面板 */
+.data-panel {
+  background: linear-gradient(135deg, rgba(30, 40, 54, 0.9) 0%, rgba(45, 56, 71, 0.9) 100%);
+  border-radius: 12px;
   overflow: hidden;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+.data-panel:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 25px rgba(0, 212, 255, 0.2);
+  border-color: rgba(0, 212, 255, 0.4);
 }
 
 /* 面板头部 */
 .panel-header {
-  padding: 14px 20px;
-  color: #fff
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
 }
-.panel-title {
-  font-size: 15px;
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #00d4ff;
+  font-size: 16px;
   font-weight: 500;
-  color: #1f2937;
+}
+
+.header-title i {
+  font-size: 18px;
+}
+
+.panel-badges {
+  display: flex;
+  gap: 8px;
+}
+
+.badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.badge.success {
+  background: rgba(0, 255, 157, 0.2);
+  color: #00ff9d;
+  border: 1px solid rgba(0, 255, 157, 0.3);
+}
+
+.badge.info {
+  background: rgba(0, 212, 255, 0.2);
+  color: #00d4ff;
+  border: 1px solid rgba(0, 212, 255, 0.3);
 }
 
 /* 面板内容 */
 .panel-content {
   padding: 20px;
-  min-height: 320px;
 }
 
-/* 非调整模式：单个详情 */
-.single-detail {
-  width: 100%;
-}
-.detail-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.detail-item {
-  width: calc(50% - 8px);
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-}
-.detail-label {
-  color: #6b7280;
-  width: 100px;
-  flex-shrink: 0;
-}
-.detail-value {
-  color: #1f2937;
+/* 实时数据卡片区域 */
+.data-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 0;
 }
 
-/* 回退信息区域样式 */
-.return-info-section .panel-title {
-  font-size: 15px;
-  font-weight: 500;
-  color: #1f2937;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.return-info-section .empty-tip {
-  padding: 16px 0;
-}
-
-/* 调整模式：对比布局 */
-.adjust-compare {
-  width: 100%;
-}
-.compare-wrap {
-  display: flex;
-  align-items: stretch;
-  gap: 20px;
-  margin-bottom: 24px;
-}
-.position-panel {
-  flex: 1;
-  padding: 16px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-}
-.position-panel.current-pos {
-  border-color: #409eff;
-}
-.position-panel.target-pos {
-  border-color: #67c23a;
-}
-.position-panel .panel-title {
-  font-size: 14px;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e5e7eb;
-}
-.current-pos .panel-title {
-  color: #409eff;
-}
-.target-pos .panel-title {
-  color: #67c23a;
-}
-.position-detail {
-  font-size: 14px;
-}
-.exchange-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #9ca3af;
-  font-size: 24px;
-}
-
-/* 调整模式按钮组 */
-.adjust-btns {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-/* 操作按钮区 */
-.operation-buttons {
-  width: 100%;
-}
-.button-group {
-  display: flex;
-  flex-direction: column;
-}
-.btn-block {
-  width: 100%;
-}
-
-/* 调整模式提示 */
-.adjust-tip {
-  width: 100%;
-}
-.tip-box {
-  padding: 16px;
-  background-color: #f0f9ff;
-  border: 1px solid #e6f7ff;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-.tip-box .el-icon-info {
-  color: #409eff;
-  font-size: 18px;
-  margin-top: 1px;
-}
-.tip-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 4px;
-}
-.tip-desc {
-  font-size: 13px;
-  color: #6b7280;
-}
-.selected-count {
-  padding: 12px;
-  background-color: #f9fafb;
-  border-radius: 6px;
-}
-.count-item {
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-.count-item.current {
-  color: #409eff;
-}
-.count-item.target {
-  color: #67c23a;
-}
-
-/* 空状态提示 */
-.empty-tip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #9ca3af;
-  font-size: 14px;
+/* 单个数据卡片 */
+.data-card {
+  position: relative;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.03) 100%);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 10px;
+  padding: 16px 12px;
   text-align: center;
-  padding: 40px 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1);
 }
 
-/* 3. 右下调整按钮 */
-.adjust-mode-btn {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 10;
-}
-.adjust-mode-btn .el-button {
-  padding: 10px 16px;
-  border-radius: 8px;
+.data-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #00d4ff 0%, #00ff9d 100%);
 }
 
-/* 4. 对话框样式补充 */
-.dialog-footer {
-  text-align: right;
-  margin-top: 16px;
+.data-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
+  border-color: rgba(0, 212, 255, 0.6);
+}
+
+/* 温度卡片特殊样式 */
+.data-card.temperature {
+  background: linear-gradient(135deg, rgba(255, 99, 72, 0.08) 0%, rgba(255, 99, 72, 0.03) 100%);
+  border-color: rgba(255, 99, 72, 0.3);
+}
+
+.data-card.temperature::before {
+  background: linear-gradient(90deg, #ff6348 0%, #ffa502 100%);
+}
+
+.data-card.temperature:hover {
+  box-shadow: 0 4px 15px rgba(255, 99, 72, 0.3);
+  border-color: rgba(255, 99, 72, 0.6);
+}
+
+.data-card.temperature .card-value {
+  color: #ff6348;
+  text-shadow: 0 0 10px rgba(255, 99, 72, 0.3);
+}
+
+/* 高亮卡片（关键参数） */
+.data-card.highlight {
+  background: linear-gradient(135deg, rgba(255, 165, 2, 0.1) 0%, rgba(255, 165, 2, 0.03) 100%);
+  border-color: rgba(255, 165, 2, 0.4);
+}
+
+.data-card.highlight::before {
+  background: linear-gradient(90deg, #ffa502 0%, #ffb347 100%);
+}
+
+.data-card.highlight:hover {
+  box-shadow: 0 4px 15px rgba(255, 165, 2, 0.3);
+  border-color: rgba(255, 165, 2, 0.7);
+}
+
+.data-card.highlight .card-value {
+  color: #ffa502;
+  text-shadow: 0 0 10px rgba(255, 165, 2, 0.3);
+}
+
+/* 卡片标签 */
+.card-label {
+  color: #7f8fa6;
+  font-size: 11px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* 卡片数值 - 大号显示 */
+.card-value {
+  color: #00d4ff;
+  font-size: 28px;
+  font-weight: 700;
+  font-family: 'Courier New', 'Consolas', monospace;
+  line-height: 1.2;
+  margin-bottom: 4px;
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+  letter-spacing: 1px;
+}
+
+/* 卡片单位 */
+.card-unit {
+  color: #b0b0b0;
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.chart-container {
+  width: 100%;
+  height: 300px;
+}
+
+/* 其他类型展示 */
+.other-type-display {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.other-type-card {
+  text-align: center;
+  padding: 60px 40px;
+  background: rgba(30, 40, 54, 0.8);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.card-icon {
+  font-size: 60px;
+  color: #00d4ff;
+  margin-bottom: 20px;
+}
+
+.card-title {
+  color: #00d4ff;
+  font-size: 24px;
+  margin: 0 0 15px 0;
+}
+
+.card-desc {
+  color: #7f8fa6;
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 原始数据展示 */
+.raw-data-display {
+  background: rgba(30, 40, 54, 0.8);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.raw-data-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
+}
+
+.raw-title {
+  color: #00d4ff;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.raw-content {
+  margin: 0;
+  padding: 20px;
+  color: #00ff9d;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  max-height: 500px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* 滚动条样式 */
+.raw-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.raw-content::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+.raw-content::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.3);
+  border-radius: 4px;
+}
+
+.raw-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.5);
+}
+
+/* 响应式设计 */
+@media (max-width: 1600px) {
+  .data-panels {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .monitor-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .type-selector-panel {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .data-summary {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/apps/l2/src/views/l2/track/rect.vue b/apps/l2/src/views/l2/track/rect.vue
index b2da438..b3beb05 100644
--- a/apps/l2/src/views/l2/track/rect.vue
+++ b/apps/l2/src/views/l2/track/rect.vue
@@ -1,150 +1,185 @@
 <template>
-  <div class="graph-container-box">
-    <el-row>
+  <div class="track-container">
+    <el-row :gutter="20">
+      <!-- 左侧：设备列表 -->
       <el-col :span="16">
-        <knova-stage @rectClick="selectCard" :matMapList="matMapList"></knova-stage>
-      </el-col>
-      <el-col :span="8">
-        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; color: black; margin-bottom: 10px;">
-          <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
-          <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 style="border: 1px solid #000; padding: 10px; border-radius: 10px; color: black; margin-bottom: 10px;">
-          <el-row v-if="selectedCard">
-            <el-col :span="12">
-              <div class="detail-item">
-                <span class="detail-label">位置名称：</span>
-                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">位置代号：</span>
-                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">钢卷号：</span>
-                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划ID：</span>
-                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划号：</span>
-                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">开卷机编号：</span>
-                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">卷取机编号：</span>
-                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
-              </div>
-            </el-col>
-            <el-col :span="12">
-              <!-- 加载状态 -->
-              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
-
-              <!-- 错误状态 -->
-              <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
-                {{ returnError }}
-              </div>
-
-              <!-- 回退信息内容 -->
-              <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
-                <div class="detail-item">
-                  <span class="detail-label">回退钢卷号：</span>
-                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
+        <div class="device-layout">
+          <!-- 入口段区域 -->
+          <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 class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
                 </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划ID：</span>
-                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划号：</span>
-                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退类型：</span>
-                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退重量：</span>
-                  <span class="detail-value">
-                    {{ returnInfo.returnWeight || '-' }}
-                    {{ returnInfo.returnWeight ? 'kg' : '' }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 无回退信息 -->
-              <div class="empty-tip" v-else>无回退信息</div>
-            </el-col>
-          </el-row>
-          <el-row v-else>
-            <div class="empty-tip">请选择钢卷卡片查看详情</div>
-          </el-row>
-        </div>
-
-        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; color: white; margin-bottom: 10px;">
-          <el-row v-if="selectedCard">
-            <div class="operation-panel">
-              <div class="panel-content">
-                <!-- 非调整模式：显示操作按钮 -->
-                <div class="operation-buttons">
-                  <div class="button-group">
-                    <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
-                      class="btn-block">
-                      钢卷上线
-                    </el-button>
-                    <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
-                      class="btn-block mt-2">
-                      手动卸卷
-                    </el-button>
-                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
-                      class="btn-block mt-2">
-                      整卷回退
-                    </el-button>
-                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
-                      class="btn-block mt-2">
-                      半卷回退
-                    </el-button>
-                    <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
-                      class="btn-block mt-2">
-                      卸卷并封闭
-                    </el-button>
-                    <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
-                甩尾
-              </el-button> -->
+                <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
+                  <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
+                    <span class="mini-label">{{ item.label }}:</span>
+                    <span class="mini-value">{{ item.value }}</span>
                   </div>
                 </div>
               </div>
             </div>
-          </el-row>
+          </div>
 
-          <el-row v-else>
-            <div class="empty-tip">请选择钢卷卡片进行操作</div>
-          </el-row>
+          <!-- 熔炉段区域 -->
+          <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 class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                </div>
+                <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
+                  <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
+                    <span class="mini-label">{{ item.label }}:</span>
+                    <span class="mini-value">{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 涂层段区域 -->
+          <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 class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                </div>
+                <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
+                  <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
+                    <span class="mini-label">{{ item.label }}:</span>
+                    <span class="mini-value">{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 出口段区域 -->
+          <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 class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                </div>
+                <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
+                  <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
+                    <span class="mini-label">{{ item.label }}:</span>
+                    <span class="mini-value">{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      
+      <!-- 右侧：信息面板 -->
+      <el-col :span="8">
+        <div class="info-panels">
+          <!-- 设备基本信息 -->
+          <div class="panel" v-if="selectedCard">
+            <div class="panel-title">基本信息</div>
+            <table class="info-table">
+              <tr>
+                <td>位置名称</td>
+                <td>{{ selectedCard.positionNameCn || '-' }}</td>
+              </tr>
+              <tr>
+                <td>位置代号</td>
+                <td>{{ selectedCard.positionNameEn || '-' }}</td>
+              </tr>
+              <tr>
+                <td>钢卷号</td>
+                <td>{{ selectedCard.matId || '-' }}</td>
+              </tr>
+              <tr>
+                <td>计划ID</td>
+                <td>{{ selectedCard.planId || '-' }}</td>
+              </tr>
+              <tr>
+                <td>计划号</td>
+                <td>{{ selectedCard.planNo || '-' }}</td>
+              </tr>
+            </table>
+          </div>
+
+          <!-- 设备实时数据 -->
+          <div class="panel" v-if="selectedCard">
+            <div class="panel-title">实时数据</div>
+            <div class="realtime-cards" v-if="currentDeviceData.length > 0">
+              <div class="data-item" v-for="(item, index) in currentDeviceData" :key="index">
+                <div class="data-label">{{ item.label }}</div>
+                <div class="data-value">{{ item.value }}</div>
+                <div class="data-unit">{{ item.unit }}</div>
+              </div>
+            </div>
+            <div v-else class="empty-msg">当前设备无实时数据</div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <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>
+            </div>
+          </div>
         </div>
       </el-col>
     </el-row>
 
-
-
-
     <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
       <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
         <el-form-item label="开卷机编号" prop="porIdx">
@@ -203,22 +238,26 @@
 
 <script>
 import { adjustPosition, getTrackMatPosition, operateMat, getBackData } from '@/api/l2/track'
-import KnovaStage from './components/knovaStage.vue'
 
 export default {
-  components: {
-    KnovaStage
-  },
   data() {
     return {
+      socket: null,
+      isConnected: false,
       matMapList: [],
-      selectedCard: null, // 非调整模式选中的单个卡片
+      selectedCard: null,
+      // 实时数据 - 初始化所有属性确保响应式
+      realtimeData: {
+        entry: null,
+        furnace: null,
+        coat: null,
+        exit: null
+      },
       adjustForm: {
         current: null,
         target: null
-      }, // 调整模式选中的位置：[当前, 目标]，双向绑定
-      adjustMode: false, // 是否为调整模式
-      deviceMap: {},
+      },
+      adjustMode: false,
       operateMatForm: {
         porIdx: null,
         trIdx: null,
@@ -261,13 +300,12 @@ export default {
         ]
       },
       operateMatStatus: false, // 操作对话框显示状态
-      returnInfo: {}, // 存储回退接口返回的数据
-      isLoadingReturn: false, // 回退信息加载状态
-      returnError: '' // 回退信息获取失败的提示
+      returnInfo: {},
+      isLoadingReturn: false,
+      returnError: ''
     }
   },
   computed: {
-    // 操作对话框标题
     getOperateTitle() {
       const titleMap = {
         'ONLINE': '钢卷上线',
@@ -278,21 +316,370 @@ export default {
         'THROW_TAIL': '甩尾'
       }
       return titleMap[this.operateMatForm.operation] || '钢卷操作'
+    },
+    // 入口段设备列表
+    entryDevicesList() {
+      return this.matMapList.filter(device => 
+        ['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(device.positionNameEn)
+      )
+    },
+    // 熔炉段设备列表
+    furnaceDevicesList() {
+      return this.matMapList.filter(device => 
+        ['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(device.positionNameEn)
+      )
+    },
+    // 涂层段设备列表
+    coatDevicesList() {
+      return this.matMapList.filter(device => 
+        ['TM', 'TL', 'COAT'].includes(device.positionNameEn)
+      )
+    },
+    // 出口段设备列表
+    exitDevicesList() {
+      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: '' },
+            { label: '带钢位置', value: this.formatValue(entry.stripLocation), unit: 'm' },
+            { label: '开卷段张力', value: this.formatValue(entry.tensionPorBr1), unit: 'daN' },
+            { label: 'BR1-BR2张力', value: this.formatValue(entry.tensionBr1Br2), unit: 'daN' },
+            { label: 'BR2-BR3张力', value: this.formatValue(entry.tensionBr2Br3), unit: 'daN' },
+            { label: '带钢线速度', value: this.formatValue(entry.stripSpeed), unit: 'm/min' }
+          )
+        }
+      }
+      // 焊机数据
+      else if (deviceId === 'WELDER' && this.realtimeData.entry) {
+        const entry = this.realtimeData.entry
+        data.push(
+          { label: 'BR1-BR2张力', value: this.formatValue(entry.tensionBr1Br2), unit: 'daN' },
+          { label: 'BR2-BR3张力', value: this.formatValue(entry.tensionBr2Br3), unit: 'daN' }
+        )
+      }
+      // 入口活套数据
+      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' },
+            { label: '活套可用套量', value: this.formatValue(entry.celCapacity), unit: '%' }
+          )
+        }
+      }
+      // 清洗段数据
+      else if (deviceId === 'CLEAN' && this.realtimeData.entry) {
+        const entry = this.realtimeData.entry
+        data.push(
+          { label: '清洗电压', value: this.formatValue(entry.cleaningVoltage), unit: 'V' },
+          { label: '清洗电流', value: this.formatValue(entry.cleaningCurrent), unit: 'A' },
+          { label: '碱液浓度', value: this.formatValue(entry.alkaliConcentration), unit: 'g/L' },
+          { label: '碱液温度', value: this.formatValue(entry.alkaliTemperature), unit: '℃' },
+          { label: '漂洗电导率', value: this.formatValue(entry.rinseConductivity), unit: 'μS/cm' },
+          { label: '漂洗温度', value: this.formatValue(entry.rinseTemperature), unit: '℃' },
+          { label: '烘干温度', value: this.formatValue(entry.dryingTemperature), unit: '℃' },
+          { label: '热风流量', value: this.formatValue(entry.hotAirFlow), unit: 'm³/h' },
+          { label: '热风压力', value: this.formatValue(entry.hotAirPressure), unit: 'Pa' }
+        )
+      }
+      // 退火炉数据 - 每个炉显示不同的参数
+      else if (deviceId === 'FUR1' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'PH炉实际温度', value: this.formatValue(this.realtimeData.furnace.phFurnaceTemperatureActual), unit: '°C' }
+        )
+      }
+      else if (deviceId === 'FUR2' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'NOF1炉实际温度', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureActual), unit: '°C' }
+        )
+      }
+      else if (deviceId === 'FUR3' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'NOF1炉设定温度', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureSet), unit: '°C' }
+        )
+      }
+      else if (deviceId === 'FUR4' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'NOF1炉控制输出', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureControlOutput), unit: '%' }
+        )
+      }
+      // 后处理/涂层重量数据
+      else if (deviceId === 'COAT' && this.realtimeData.coat) {
+        const coat = this.realtimeData.coat
+        data.push(
+          { label: '带钢位置', value: this.formatValue(coat.stripLocation), unit: 'm' },
+          { label: '测量数/宽度', value: coat.measurementCount || '--', unit: '' },
+          { label: 'AVR涂层重量(顶)', value: this.formatValue(coat.avrCoatingWeightTop), unit: 'g/m²' },
+          { label: 'STD涂层重量(顶)', value: this.formatValue(coat.stdCoatingWeightTop), unit: 'g/m²' },
+          { label: 'MAX涂层重量(顶)', value: this.formatValue(coat.maxCoatingWeightTop), unit: 'g/m²' },
+          { label: 'MIN涂层重量(顶)', value: this.formatValue(coat.minCoatingWeightTop), unit: 'g/m²' },
+          { label: 'AVR涂层重量(底)', value: this.formatValue(coat.avrCoatingWeightBottom), unit: 'g/m²' },
+          { label: 'STD涂层重量(底)', value: this.formatValue(coat.stdCoatingWeightBottom), unit: 'g/m²' },
+          { label: 'MAX涂层重量(底)', value: this.formatValue(coat.maxCoatingWeightBottom), unit: 'g/m²' },
+          { label: 'MIN涂层重量(底)', value: this.formatValue(coat.minCoatingWeightBottom), unit: 'g/m²' },
+          { label: '气刀压力', value: this.formatValue(coat.airKnifePressure), unit: '' },
+          { label: '气刀流量', value: this.formatValue(coat.airKnifeFlow), unit: '' },
+          { label: '气刀间隙', value: this.formatValue(coat.airKnifeGap), unit: '' },
+          { label: '锌锅温度', value: coat.potTemperature || '--', unit: '°C' },
+          { label: '冷却塔温度', value: coat.coolingTowerTemperature || '--', unit: '°C' },
+          { label: '锌锅功率', value: this.formatValue(coat.potPower), unit: 'kW' },
+          { label: 'BR4-BR5张力', value: this.formatValue(coat.tensionBr4Br5), unit: 'daN' }
+        )
+      }
+      // 光整机(TM)数据
+      else if (deviceId === 'TM' && this.realtimeData.coat) {
+        const coat = this.realtimeData.coat
+        data.push(
+          { label: 'TM出口速度', value: this.formatValue(coat.stripSpeedTmExit), unit: 'm/min' },
+          { label: 'BR5-TM张力', value: this.formatValue(coat.tensionBr5Tm), unit: 'daN' },
+          { label: 'TM-BR6张力', value: this.formatValue(coat.tensionTmBr6), unit: 'daN' },
+          { label: 'BR5-BR6张力', value: this.formatValue(coat.tensionBr5Br6), unit: 'daN' },
+          { label: 'TM延伸率', value: this.formatValue(coat.tmElongation), unit: '%' },
+          { label: '轧制力(操作侧)', value: this.formatValue(coat.rollForceOperator), unit: 'kN' },
+          { label: '轧制力(传动侧)', value: this.formatValue(coat.rollForceDrive), unit: 'kN' },
+          { label: '电机扭矩', value: this.formatValue(coat.motorTorque), unit: 'kNm' },
+          { label: '弯曲力(总)', value: this.formatValue(coat.bendingForce), unit: 'kN' },
+          { label: '防皱辊网孔', value: this.formatValue(coat.antiCrimpingRollMesh), unit: 'mm' },
+          { label: 'Billy辊网孔', value: this.formatValue(coat.billyRollMesh), unit: 'mm' }
+        )
+      }
+      // 拉矫机(TL)数据
+      else if (deviceId === 'TL' && this.realtimeData.coat) {
+        const coat = this.realtimeData.coat
+        data.push(
+          { label: 'TL-BR7张力', value: this.formatValue(coat.tensionTlBr7), unit: 'daN' },
+          { label: 'BR6-BR7张力', value: this.formatValue(coat.tensionBr6Br7), unit: 'daN' },
+          { label: 'TL延伸率', value: this.formatValue(coat.tlElongation), unit: '%' },
+          { label: 'TL标志', value: coat.tlFlag || '--', unit: '' },
+          { label: '矫直单元1网孔', value: this.formatValue(coat.levelingUnit1Mesh), unit: 'mm' },
+          { label: '矫直单元2网孔', value: this.formatValue(coat.levelingUnit2Mesh), unit: 'mm' },
+          { label: '防横弯单元网孔', value: this.formatValue(coat.antiCrossBowUnitMesh), unit: 'mm' },
+          { label: 'BR7-BR8张力', value: this.formatValue(coat.tensionBr7Br8), unit: 'N/mm²' },
+          { label: 'AFP带钢速度', value: this.formatValue(coat.stripSpeedAfp), unit: 'm/min' },
+          { label: 'AFP后带钢温度', value: coat.stripTempAfp || '--', unit: '°C' },
+          { label: '涂层标志', value: coat.coatingFlag || '--', unit: '' }
+        )
+      }
+      // 出口活套数据 - 根据开卷机编号对应显示
+      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(
+            { label: '出口活套位置', value: this.formatValue(exit.cxlLength), unit: 'm' },
+            { label: '活套当前百分比', value: this.formatValue(exit.cxlCapacity), unit: '%' }
+          )
+        }
+      }
+      // 卷取机数据
+      else if (deviceId === 'TR' && this.realtimeData.exit) {
+        const exit = this.realtimeData.exit
+        data.push(
+          { label: '带钢位置', value: this.formatValue(exit.stripLocation), unit: 'm' },
+          { label: 'BR8-BR9张力', value: this.formatValue(exit.tensionBr8Br9), unit: 'daN' },
+          { label: 'BR9-TR张力', value: this.formatValue(exit.tensionBr9Tr), unit: 'daN' },
+          { label: '出口段速度', value: this.formatValue(exit.speedExitSection), unit: 'm/min' },
+          { label: '钢卷长度', value: this.formatValue(exit.coilLength), unit: 'm' },
+          { label: '涂油标志', value: exit.oilingFlag || '--', unit: '' },
+          { label: '涂油量(顶)', value: this.formatValue(exit.oilingAmountTop), unit: 'g/m²' },
+          { label: '涂油量(底)', value: this.formatValue(exit.oilingAmountBottom), unit: 'g/m²' }
+        )
+      }
+      // 称重位数据
+      else if (deviceId === 'WEIT' && this.realtimeData.exit) {
+        const exit = this.realtimeData.exit
+        data.push(
+          { label: '钢卷长度', value: this.formatValue(exit.coilLength), unit: 'm' },
+          { label: '出口段速度', value: this.formatValue(exit.speedExitSection), unit: 'm/min' }
+        )
+      }
+      
+      return data
     }
   },
 
   methods: {
-    // 获取钢卷数据
     fetchData() {
       getTrackMatPosition().then(res => {
         this.matMapList = res.data.matMapList || []
-        // this.deviceMap = res.data.matMapList || {}
       }).catch(err => {
         console.error('获取钢卷数据失败：', err)
         this.$message.error('获取数据失败，请重试')
       })
     },
 
+
+    // 根据设备ID获取设备信息
+    getDeviceInfo(deviceId) {
+      return this.matMapList.find(item => item.positionNameEn === deviceId)
+    },
+
+    // 选择设备
+    selectDevice(deviceId) {
+      const deviceInfo = this.getDeviceInfo(deviceId)
+      if (deviceInfo) {
+        this.selectedCard = this.selectedCard === deviceInfo ? null : deviceInfo
+        if (this.selectedCard) {
+          this.adjustForm.current = this.selectedCard.positionNameEn
+        } else {
+          this.adjustForm.current = null
+        }
+      }
+    },
+
+    // 判断设备是否有实时数据
+    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
+        if (deviceId === 'POR2' && this.realtimeData.entry.payOffReelNumber === 2) return true
+        if (deviceId === 'ENL1' && this.realtimeData.entry.payOffReelNumber === 1) return true
+        if (deviceId === 'ENL2' && this.realtimeData.entry.payOffReelNumber === 2) return true
+        if (deviceId === 'WELDER' || deviceId === 'CLEAN') return true
+      }
+      // 熔炉段设备
+      if (['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(deviceId) && this.realtimeData.furnace) return true
+      // 涂层段设备
+      if (['COAT', 'TM', 'TL'].includes(deviceId) && this.realtimeData.coat) return true
+      // 出口段设备
+      if (['TR', 'WEIT'].includes(deviceId) && this.realtimeData.exit) return true
+      // 出口活套 - 根据开卷机编号判断
+      if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
+        const reelNumber = this.realtimeData.entry.payOffReelNumber
+        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) {
+          const reelNumber = this.realtimeData.entry.payOffReelNumber
+          if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
+            return this.realtimeData.entry.entryCoilId || deviceInfo?.matId || '空闲'
+          }
+          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' },
+            { label: '张力', value: this.formatValue(entry.tensionPorBr1) + ' daN' }
+          )
+        }
+      } else if (deviceId === 'WELDER' && this.realtimeData.entry) {
+        data.push(
+          { label: 'BR1-BR2', value: this.formatValue(this.realtimeData.entry.tensionBr1Br2) + ' daN' }
+        )
+      } 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' },
+            { label: '套量', value: this.formatValue(entry.celCapacity) + ' %' }
+          )
+        }
+      } else if (deviceId === 'CLEAN' && this.realtimeData.entry) {
+        data.push(
+          { label: '电压', value: this.formatValue(this.realtimeData.entry.cleaningVoltage) + ' V' },
+          { label: '碱温', value: this.formatValue(this.realtimeData.entry.alkaliTemperature) + ' ℃' }
+        )
+      } else if (deviceId === 'FUR1' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'PH炉', value: this.formatValue(this.realtimeData.furnace.phFurnaceTemperatureActual) + ' °C' }
+        )
+      } else if (deviceId === 'FUR2' && this.realtimeData.furnace) {
+        data.push(
+          { label: 'NOF1炉', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureActual) + ' °C' }
+        )
+      } else if (deviceId === 'FUR3' && this.realtimeData.furnace) {
+        data.push(
+          { label: '设定', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureSet) + ' °C' }
+        )
+      } else if (deviceId === 'FUR4' && this.realtimeData.furnace) {
+        data.push(
+          { label: '输出', value: this.formatValue(this.realtimeData.furnace.nof1FurnaceTemperatureControlOutput) + ' %' }
+        )
+      } else if (deviceId === 'COAT' && this.realtimeData.coat) {
+        data.push(
+          { label: '顶部', value: this.formatValue(this.realtimeData.coat.avrCoatingWeightTop) + ' g/m²' },
+          { label: '底部', value: this.formatValue(this.realtimeData.coat.avrCoatingWeightBottom) + ' g/m²' }
+        )
+      } else if (deviceId === 'TM' && this.realtimeData.coat) {
+        data.push(
+          { label: '速度', value: this.formatValue(this.realtimeData.coat.stripSpeedTmExit) + ' m/min' },
+          { label: '延伸', value: this.formatValue(this.realtimeData.coat.tmElongation) + ' %' }
+        )
+      } else if (deviceId === 'TL' && this.realtimeData.coat) {
+        data.push(
+          { label: 'TL延伸', value: this.formatValue(this.realtimeData.coat.tlElongation) + ' %' },
+          { label: 'TL-BR7', value: this.formatValue(this.realtimeData.coat.tensionTlBr7) + ' daN' }
+        )
+      } 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(
+            { label: '位置', value: this.formatValue(this.realtimeData.exit.cxlLength) + ' m' },
+            { label: '百分比', value: this.formatValue(this.realtimeData.exit.cxlCapacity) + ' %' }
+          )
+        }
+      } else if (deviceId === 'TR' && this.realtimeData.exit) {
+        data.push(
+          { label: 'BR9-TR', value: this.formatValue(this.realtimeData.exit.tensionBr9Tr) + ' daN' },
+          { label: '速度', value: this.formatValue(this.realtimeData.exit.speedExitSection) + ' m/min' }
+        )
+      } else if (deviceId === 'WEIT' && this.realtimeData.exit) {
+        data.push(
+          { label: '长度', value: this.formatValue(this.realtimeData.exit.coilLength) + ' m' }
+        )
+      }
+      
+      return data
+    },
+
     /**
      * 获取回退信息
      * @param {Number} posIdx - 位置索引（接口必填query参数）
@@ -329,18 +716,85 @@ export default {
         });
     },
 
-    // 选择卡片（区分调整/非调整模式）
-    selectCard(item) {
-      // 非调整模式：单选
-      this.selectedCard = this.selectedCard === item ? null : item
-      // 选中卡片时查询回退信息，取消选中时清空
-      if (this.selectedCard) {
-        this.fetchReturnData(this.selectedCard.posIdx);
-        this.adjustForm.current = this.selectedCard.positionNameEn
-      } else {
-        this.returnInfo = {};
-        this.returnError = '';
-        this.adjustForm.current = null
+    // 获取设备类型
+    getDeviceType(positionName) {
+      if (['POR1', 'POR2', 'WELDER', 'ENL1', 'ENL2', 'CLEAN'].includes(positionName)) return 'entry'
+      if (['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(positionName)) return 'furnace'
+      if (['COAT', 'TM', 'TL'].includes(positionName)) return 'coat'
+      if (['TR', 'CXL1', 'CXL2', 'WEIT'].includes(positionName)) return 'exit'
+      return null
+    },
+
+    // 格式化数值
+    formatValue(value) {
+      if (value === null || value === undefined) return '--'
+      return typeof value === 'number' ? value.toFixed(2) : value
+    },
+
+    // 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)
+            console.log('收到WebSocket数据:', data)
+            this.processRealtimeData(data)
+          } catch (error) {
+            console.error('数据解析错误:', error)
+          }
+        }
+        
+        this.socket.onerror = (error) => {
+          console.error('WebSocket错误:', error)
+          this.isConnected = false
+        }
+        
+        this.socket.onclose = () => {
+          console.log('WebSocket已关闭')
+          this.isConnected = false
+          this.socket = null
+          // 3秒后重连
+          setTimeout(() => this.connectWebSocket(), 3000)
+        }
+      } catch (error) {
+        console.error('连接失败:', error)
+      }
+    },
+
+    // 处理实时数据 - 使用$set确保响应式更新
+    processRealtimeData(data) {
+      if (data.appMeasureEntryMessage) {
+        this.$set(this.realtimeData, 'entry', data.appMeasureEntryMessage)
+      }
+      if (data.appMeasureFurnaceMessage) {
+        this.$set(this.realtimeData, 'furnace', data.appMeasureFurnaceMessage)
+      }
+      if (data.appMeasureCoatMessage) {
+        this.$set(this.realtimeData, 'coat', data.appMeasureCoatMessage)
+      }
+      if (data.appMeasureExitMessage) {
+        this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
+      }
+      
+      // 强制更新视图
+      this.$forceUpdate()
+    },
+
+    disconnectWebSocket() {
+      if (this.socket) {
+        this.socket.close()
+        this.socket = null
       }
     },
 
@@ -415,48 +869,233 @@ export default {
 
   mounted() {
     this.fetchData()
+    this.connectWebSocket()
+  },
+  
+  beforeDestroy() {
+    this.disconnectWebSocket()
   }
 }
 </script>
 
-<style scoped lang="scss">
-.graph-container-box {
-  width: 100%;
-  box-sizing: border-box;
-  height: calc(100vh - 86px);
+<style scoped>
+.track-container {
   padding: 20px;
-  // background-color: #c0c0c0;
-  overflow: hidden;
+  background: #fff;
 }
 
-.graph-container {
+.device-layout {
+  background: #f5f5f5;
+  border-radius: 4px;
+  padding: 15px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+}
+
+/* 分区区域 */
+.section-area {
+  margin-bottom: 20px;
+  background: #fafafa;
+  border-radius: 6px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+}
+
+.section-header {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #ddd;
+}
+
+/* 设备网格 */
+.device-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
+}
+
+/* 设备卡片 */
+.device-card {
+  background: #fff;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 120px;
+}
+
+.device-card:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+.device-card.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.device-card.has-data {
+  border-color: #67c23a;
+}
+
+.device-card.has-data:hover {
+  border-color: #67c23a;
+  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+}
+
+.device-card.has-data.active {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.device-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.device-code {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 6px;
+}
+
+.device-status {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.coil-id {
+  font-size: 12px;
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.realtime-indicator {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.mini-data {
+  font-size: 11px;
+  color: #666;
+  margin-bottom: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.mini-label {
+  color: #999;
+}
+
+.mini-value {
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.info-panels {
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+}
+
+.panel {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 15px;
+  background: #fff;
+}
+
+.panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.info-table {
   width: 100%;
-  height: 100%;
-  position: relative;
+  font-size: 13px;
+}
 
-  img {
-    width: 1881px;
-    height: 608px;
-  }
+.info-table tr {
+  border-bottom: 1px solid #f5f5f5;
+}
 
-  // 图形元素基础样式
-  .graph-list>div {
-    position: absolute;
-  }
+.info-table tr:last-child {
+  border-bottom: none;
+}
 
-  // 文字容器样式
-  .text-wrapper {
-    position: relative;
-    height: 100%;
-  }
+.info-table td {
+  padding: 8px 0;
+  line-height: 1.6;
+}
 
-  // 文字基础样式（可被配置项覆盖）
-  .text-wrapper span {
-    position: absolute;
+.info-table td:first-child {
+  color: #666;
+  width: 80px;
+}
+
+.info-table td:last-child {
+  color: #333;
+  font-weight: 500;
+}
+
+.empty-msg {
+  text-align: center;
+  padding: 30px;
+  color: #999;
+  font-size: 13px;
+}
+
+.realtime-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.data-item {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 12px;
+  text-align: center;
+  background: #fafafa;
+}
+
+.data-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.data-value {
+  font-size: 24px;
+  font-weight: 600;
     color: #333;
-    /* 默认文字颜色 */
-    font-size: 14px;
-    /* 默认文字大小 */
-  }
+  margin-bottom: 4px;
+  font-family: 'Arial', sans-serif;
+}
+
+.data-unit {
+  font-size: 12px;
+  color: #999;
+}
+
+.btn-list {
+  display: flex;
+  flex-direction: column;
 }
 </style>