diff --git a/src/api/l2/sendJob.js b/src/api/l2/sendJob.js
new file mode 100644
index 0000000..22ce6a7
--- /dev/null
+++ b/src/api/l2/sendJob.js
@@ -0,0 +1,36 @@
+import request from '@/utils/L2Request'
+
+// 创建发送任务
+export function createSendJob(data) {
+  return request({
+    url: '/business/sendJob',
+    method: 'post',
+    data
+  })
+}
+
+// 执行发送任务
+export function executeSendJob(jobId) {
+  return request({
+    url: `/business/sendJob/${jobId}/execute`,
+    method: 'post'
+  })
+}
+
+// 查询发送任务列表（分页）
+export function listSendJob(query) {
+  // 若你后端是 GET /business/sendJob/list（现状），这里用 params
+  return request({
+    url: '/business/sendJob/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取发送任务详情
+export function getSendJob(jobId) {
+  return request({
+    url: `/business/sendJob/${jobId}`,
+    method: 'get'
+  })
+}
diff --git a/src/api/l2/sendTemplate.js b/src/api/l2/sendTemplate.js
new file mode 100644
index 0000000..b152e4d
--- /dev/null
+++ b/src/api/l2/sendTemplate.js
@@ -0,0 +1,45 @@
+import request from '@/utils/L2Request'
+
+// 获取发送模板（含明细）
+export function getSendTemplate(templateCode) {
+  return request({
+    url: `/business/sendTemplate/${templateCode}`,
+    method: 'get'
+  })
+}
+
+// 获取最近一次成功发送（用于推荐值 + 上次发送时间显示）
+export function getLastSuccess(groupType) {
+  return request({
+    url: '/business/sendJob/lastSuccess',
+    method: 'get',
+    params: { groupType }
+  })
+}
+
+// 更新模板主表（deviceName 等）
+export function updateSendTemplate(data) {
+  return request({
+    url: '/business/sendTemplate',
+    method: 'put',
+    data
+  })
+}
+
+// 批量更新模板明细（address/defaultValueRaw/enabled 等）
+export function updateSendTemplateItems(data) {
+  return request({
+    url: '/business/sendTemplate/items',
+    method: 'put',
+    data
+  })
+}
+
+// 批量保存模板明细（新增/更新/删除）- 仅提交变更，避免请求体过大
+export function batchSaveSendTemplateItems(data) {
+  return request({
+    url: '/business/sendTemplate/items/batchSave',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/api/l2/setupValue.js b/src/api/l2/setupValue.js
new file mode 100644
index 0000000..82eabc3
--- /dev/null
+++ b/src/api/l2/setupValue.js
@@ -0,0 +1,20 @@
+import request from '@/utils/L2Request'
+
+// 获取 DRIVE 设定值（最新成功发送）
+export function getDriveSetupValue() {
+  return request({
+    url: '/business/sendJob/lastSuccess',
+    method: 'get',
+    params: { groupType: 'DRIVE' }
+  })
+}
+
+// 获取 FURNACE 设定值（最新成功发送）
+export function getFurnaceSetupValue() {
+  return request({
+    url: '/business/sendJob/lastSuccess',
+    method: 'get',
+    params: { groupType: 'FURNACE' }
+  })
+}
+
diff --git a/src/api/l2/template.js b/src/api/l2/template.js
new file mode 100644
index 0000000..d1d319e
--- /dev/null
+++ b/src/api/l2/template.js
@@ -0,0 +1,13 @@
+import request from '@/utils/l2-request'
+
+/**
+ * 按模板编码查询发送模板（含明细）
+ * @param {string} templateCode 模板编码，如 FURNACE_DEFAULT
+ */
+export function getSendTemplate(templateCode) {
+  return request({
+    url: `/business/sendTemplate/${templateCode}`,
+    method: 'get'
+  })
+}
+
diff --git a/src/components/FloatingPanel.vue b/src/components/FloatingPanel.vue
new file mode 100644
index 0000000..731b6e6
--- /dev/null
+++ b/src/components/FloatingPanel.vue
@@ -0,0 +1,237 @@
+<template>
+  <div v-show="visible" class="fp-root" :style="rootStyle" @mousedown.stop>
+    <div class="fp-header" @mousedown.prevent.stop="onDragStart">
+      <div class="fp-title">{{ title }}</div>
+      <div class="fp-actions">
+        <el-button type="text" class="fp-btn" @click.stop="toggleMinimize">
+          <i :class="minimized ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
+        </el-button>
+        <el-button type="text" class="fp-btn" @click.stop="close">
+          <i class="el-icon-close"></i>
+        </el-button>
+      </div>
+    </div>
+
+    <div v-show="!minimized" class="fp-body">
+      <slot />
+    </div>
+
+    <!-- Resize handle / 缩放手柄 -->
+    <div v-show="!minimized" class="fp-resize" @mousedown.prevent.stop="onResizeStart"></div>
+  </div>
+</template>
+
+<script>
+// English UI + Chinese comments
+export default {
+  name: 'FloatingPanel',
+  props: {
+    title: { type: String, default: 'Floating Panel' },
+    storageKey: { type: String, required: true },
+    defaultX: { type: Number, default: 20 },
+    defaultY: { type: Number, default: 20 },
+    defaultW: { type: Number, default: 420 },
+    defaultH: { type: Number, default: 520 }
+  },
+  data() {
+    return {
+      visible: true,
+      minimized: false,
+      x: this.defaultX,
+      y: this.defaultY,
+      w: this.defaultW,
+      h: this.defaultH,
+
+      dragging: false,
+      resizing: false,
+      startMouseX: 0,
+      startMouseY: 0,
+      startX: 0,
+      startY: 0,
+      startW: 0,
+      startH: 0
+    }
+  },
+  computed: {
+    rootStyle() {
+      return {
+        left: this.x + 'px',
+        top: this.y + 'px',
+        width: this.w + 'px',
+        height: this.minimized ? 'auto' : this.h + 'px'
+      }
+    }
+  },
+  created() {
+    this.restore()
+  },
+  beforeDestroy() {
+    this.detachEvents()
+  },
+  methods: {
+    // 外部可调用：重新打开
+    open() {
+      this.visible = true
+      this.persist()
+    },
+    close() {
+      this.visible = false
+      this.persist()
+      this.$emit('close')
+    },
+    toggleMinimize() {
+      this.minimized = !this.minimized
+      this.persist()
+    },
+
+    restore() {
+      try {
+        const raw = localStorage.getItem(this.storageKey)
+        if (!raw) return
+        const s = JSON.parse(raw)
+        if (typeof s.visible === 'boolean') this.visible = s.visible
+        if (typeof s.minimized === 'boolean') this.minimized = s.minimized
+        if (typeof s.x === 'number') this.x = s.x
+        if (typeof s.y === 'number') this.y = s.y
+        if (typeof s.w === 'number') this.w = s.w
+        if (typeof s.h === 'number') this.h = s.h
+      } catch (e) {
+        // ignore
+      }
+    },
+    persist() {
+      try {
+        localStorage.setItem(
+          this.storageKey,
+          JSON.stringify({
+            visible: this.visible,
+            minimized: this.minimized,
+            x: this.x,
+            y: this.y,
+            w: this.w,
+            h: this.h
+          })
+        )
+      } catch (e) {
+        // ignore
+      }
+    },
+
+    // Drag
+    onDragStart(e) {
+      this.dragging = true
+      this.startMouseX = e.clientX
+      this.startMouseY = e.clientY
+      this.startX = this.x
+      this.startY = this.y
+      this.attachEvents()
+    },
+    onDragMove(e) {
+      if (!this.dragging) return
+      const dx = e.clientX - this.startMouseX
+      const dy = e.clientY - this.startMouseY
+      this.x = Math.max(0, this.startX + dx)
+      this.y = Math.max(0, this.startY + dy)
+    },
+    onDragEnd() {
+      if (!this.dragging) return
+      this.dragging = false
+      this.persist()
+      this.detachEvents()
+    },
+
+    // Resize
+    onResizeStart(e) {
+      this.resizing = true
+      this.startMouseX = e.clientX
+      this.startMouseY = e.clientY
+      this.startW = this.w
+      this.startH = this.h
+      this.attachEvents()
+    },
+    onResizeMove(e) {
+      if (!this.resizing) return
+      const dx = e.clientX - this.startMouseX
+      const dy = e.clientY - this.startMouseY
+      const minW = 320
+      const minH = 220
+      this.w = Math.max(minW, this.startW + dx)
+      this.h = Math.max(minH, this.startH + dy)
+    },
+    onResizeEnd() {
+      if (!this.resizing) return
+      this.resizing = false
+      this.persist()
+      this.detachEvents()
+    },
+
+    attachEvents() {
+      window.addEventListener('mousemove', this.onGlobalMove)
+      window.addEventListener('mouseup', this.onGlobalUp)
+    },
+    detachEvents() {
+      window.removeEventListener('mousemove', this.onGlobalMove)
+      window.removeEventListener('mouseup', this.onGlobalUp)
+    },
+    onGlobalMove(e) {
+      // 复用一套全局事件
+      this.onDragMove(e)
+      this.onResizeMove(e)
+    },
+    onGlobalUp() {
+      this.onDragEnd()
+      this.onResizeEnd()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fp-root {
+  position: fixed;
+  z-index: 9999;
+  background: #ffffff;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+.fp-header {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: linear-gradient(135deg, #f5f7fa, #eef2f7);
+  border-bottom: 1px solid #ebeef5;
+  cursor: move;
+  user-select: none;
+}
+.fp-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+.fp-actions {
+  display: flex;
+  gap: 4px;
+}
+.fp-btn {
+  padding: 0 4px;
+}
+.fp-body {
+  height: calc(100% - 36px);
+  padding: 10px;
+  overflow: auto;
+}
+.fp-resize {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  background: linear-gradient(135deg, transparent 50%, rgba(64, 158, 255, 0.35) 50%);
+}
+</style>
+
diff --git a/src/views/l2/report/pdo.vue b/src/views/l2/report/pdo.vue
index 2f0b786..350d8ec 100644
--- a/src/views/l2/report/pdo.vue
+++ b/src/views/l2/report/pdo.vue
@@ -6,8 +6,8 @@
         <div class="title-text">
           <span>Performance Report</span>
           <!-- 实绩报表 -->
-          <small>Please select time range to view data</small>
-          <!-- 请选择时间范围后查看数据 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
       <el-tag size="small" effect="plain">Performance</el-tag>
@@ -70,14 +70,14 @@
           <!-- 时间范围 -->
           <span class="info-range">{{ displayTimeRange }}</span>
         </div>
-        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Reselect Time</el-button>
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Time Range</el-button>
         <!-- 重新选择时间 -->
       </div>
-
+        <!-- 实绩报表 -->
       <ReportBody
         v-loading="loading"
         title="Performance Report"
-        <!-- 实绩报表 -->
+
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -97,7 +97,7 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true, // Directly show report content
       timeRange: {
         startTime: '',
         endTime: ''
@@ -123,7 +123,31 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultTimeRangeAndFetch()
+  },
   methods: {
+    setDefaultTimeRangeAndFetch() {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+
+      this.timeRange.endTime = this.formatDate(end)
+      this.timeRange.startTime = this.formatDate(start)
+      
+      this.fetchReportData()
+    },
+
+    formatDate(date) {
+        const year = date.getFullYear()
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const day = date.getDate().toString().padStart(2, '0')
+        const hours = date.getHours().toString().padStart(2, '0')
+        const minutes = date.getMinutes().toString().padStart(2, '0')
+        const seconds = date.getSeconds().toString().padStart(2, '0')
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
     handleTimeReset() {
       this.timeRange = {
         startTime: '',
@@ -146,9 +170,7 @@ export default {
     },
     handleReturn() {
       this.hasSelectedTime = false
-      this.handleTimeReset()
-      this.reportSummary = []
-      this.reportDetail = []
+      // Do not reset time, so user can see the previous selection
     },
     async fetchReportData() {
       this.loading = true
@@ -157,7 +179,7 @@ export default {
           startTime: this.timeRange.startTime,
           endTime: this.timeRange.endTime,
           pageNum: 1,
-          pageSize: 1000
+          pageSize: 1000 // Assuming we fetch all data for the report
         }
         const res = await getReportSummary(queryParams)
         this.reportSummary = [
@@ -309,4 +331,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/l2/report/roller.vue b/src/views/l2/report/roller.vue
index bc15eba..81bdd59 100644
--- a/src/views/l2/report/roller.vue
+++ b/src/views/l2/report/roller.vue
@@ -6,8 +6,8 @@
         <div class="title-text">
           <span>Roll Change Report</span>
           <!-- 换辊报表 -->
-          <small>Please select time range to view data</small>
-          <!-- 请选择时间范围后查看数据 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
       <el-tag size="small" effect="plain">Roll Change</el-tag>
@@ -23,8 +23,6 @@
       <div class="selector-content">
         <el-form :inline="true" size="small">
           <el-form-item label="Start Time">
-            <!-- 开始时间 -->
-            <!-- Select start time / 选择开始时间 -->
             <el-date-picker
               v-model="timeRange.startTime"
               type="datetime"
@@ -35,8 +33,6 @@
             />
           </el-form-item>
           <el-form-item label="End Time">
-            <!-- 结束时间 -->
-            <!-- Select end time / 选择结束时间 -->
             <el-date-picker
               v-model="timeRange.endTime"
               type="datetime"
@@ -50,9 +46,7 @@
             <el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
               Query
             </el-button>
-            <!-- 查询 -->
             <el-button icon="el-icon-refresh" @click="handleTimeReset">Reset</el-button>
-            <!-- 重置 -->
           </el-form-item>
         </el-form>
       </div>
@@ -62,22 +56,17 @@
       <div class="content-toolbar">
         <div class="toolbar-info">
           <span class="info-label">Report Type:</span>
-          <!-- 报表类型 -->
           <span class="info-value">Roll Change Report</span>
-          <!-- 换辊报表 -->
           <span class="info-divider">|</span>
           <span class="info-label">Time Range:</span>
-          <!-- 时间范围 -->
           <span class="info-range">{{ displayTimeRange }}</span>
         </div>
-        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Reselect Time</el-button>
-        <!-- 重新选择时间 -->
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Time Range</el-button>
       </div>
 
       <ReportBody
         v-loading="loading"
         title="Roll Change Report"
-        <!-- 换辊报表 -->
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -97,7 +86,7 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true,
       timeRange: {
         startTime: '',
         endTime: ''
@@ -114,16 +103,38 @@ export default {
     displayTimeRange() {
       if (!this.canQuery) return '-'
       return `${this.timeRange.startTime} to ${this.timeRange.endTime}`
-      // 至
     },
     overviewInfo() {
       return {
-        reportLabel: 'Roll Change Report', // 换辊报表
+        reportLabel: 'Roll Change Report',
         rangeText: this.displayTimeRange
       }
     }
   },
+  created() {
+    this.setDefaultTimeRangeAndFetch()
+  },
   methods: {
+    setDefaultTimeRangeAndFetch() {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+
+      this.timeRange.endTime = this.formatDateTime(end)
+      this.timeRange.startTime = this.formatDateTime(start)
+
+      this.fetchReportData()
+    },
+    formatDateTime(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
     handleTimeReset() {
       this.timeRange = {
         startTime: '',
@@ -132,11 +143,11 @@ export default {
     },
     async handleTimeConfirm() {
       if (!this.canQuery) {
-        this.$message.warning('Please select complete time range') // 请选择完整的时间范围
+        this.$message.warning('Please select complete time range')
         return
       }
       if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
-        this.$message.warning('Start time cannot be later than end time') // 开始时间不能晚于结束时间
+        this.$message.warning('Start time cannot be later than end time')
         return
       }
       this.hasSelectedTime = true
@@ -144,9 +155,6 @@ export default {
     },
     handleReturn() {
       this.hasSelectedTime = false
-      this.handleTimeReset()
-      this.reportSummary = []
-      this.reportDetail = []
     },
     async fetchReportData() {
       this.loading = true
@@ -162,26 +170,26 @@ export default {
           ...item
         }))
         this.columns = [
-          { label: 'Change ID', prop: 'changeid' }, // 换辊号
-          { label: 'Roll ID', prop: 'rollid' }, // 轧辊号
-          { label: 'Type', prop: 'type' }, // 类型
-          { label: 'Position', prop: 'position' }, // 位置
-          { label: 'Diameter', prop: 'diameter' }, // 直径
-          { label: 'Roughness', prop: 'rough' }, // 粗糙度
-          { label: 'Crown', prop: 'crown' }, // 凸度
-          { label: 'Rolled Length', prop: 'rolledLength' }, // 轧制长度
-          { label: 'Rolled Weight', prop: 'rolledWeight' }, // 轧制重量
-          { label: 'Rolled Count', prop: 'rolledCount' }, // 轧制次数
-          { label: 'Install Time', prop: 'instalTime' }, // 上线时间
-          { label: 'Uninstall Time', prop: 'deinstalTime' } // 下线时间
+          { label: 'Change ID', prop: 'changeid' },
+          { label: 'Roll ID', prop: 'rollid' },
+          { label: 'Type', prop: 'type' },
+          { label: 'Position', prop: 'position' },
+          { label: 'Diameter', prop: 'diameter' },
+          { label: 'Roughness', prop: 'rough' },
+          { label: 'Crown', prop: 'crown' },
+          { label: 'Rolled Length', prop: 'rolledLength' },
+          { label: 'Rolled Weight', prop: 'rolledWeight' },
+          { label: 'Rolled Count', prop: 'rolledCount' },
+          { label: 'Install Time', prop: 'instalTime' },
+          { label: 'Uninstall Time', prop: 'deinstalTime' }
         ]
         this.reportSummary = [
-          { label: 'Data Count', value: this.reportDetail.length }, // 数据条数
-          { label: 'Time Range', value: this.displayTimeRange } // 时间范围
+          { label: 'Data Count', value: this.reportDetail.length },
+          { label: 'Time Range', value: this.displayTimeRange }
         ]
       } catch (error) {
         console.error(error)
-        this.$message.error('Failed to fetch report data') // 获取报表数据失败
+        this.$message.error('Failed to fetch report data')
       } finally {
         this.loading = false
       }
@@ -300,4 +308,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/l2/report/stop.vue b/src/views/l2/report/stop.vue
index 62a1932..8355abf 100644
--- a/src/views/l2/report/stop.vue
+++ b/src/views/l2/report/stop.vue
@@ -6,8 +6,8 @@
         <div class="title-text">
           <span>Stoppage Report</span>
           <!-- 停机报表 -->
-          <small>Please select time range to view data</small>
-          <!-- 请选择时间范围后查看数据 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
       <el-tag size="small" effect="plain">Stoppage</el-tag>
@@ -18,13 +18,10 @@
       <div class="selector-header">
         <i class="el-icon-calendar"></i>
         <span>Please select query date range</span>
-        <!-- 请选择查询日期范围 -->
       </div>
       <div class="selector-content">
         <el-form :inline="true" size="small">
           <el-form-item label="Start Date">
-            <!-- 开始日期 -->
-            <!-- Select start date / 选择开始日期 -->
             <el-date-picker
               v-model="timeRange.startTime"
               type="date"
@@ -35,8 +32,6 @@
             />
           </el-form-item>
           <el-form-item label="End Date">
-            <!-- 结束日期 -->
-            <!-- Select end date / 选择结束日期 -->
             <el-date-picker
               v-model="timeRange.endTime"
               type="date"
@@ -50,9 +45,7 @@
             <el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
               Query
             </el-button>
-            <!-- 查询 -->
             <el-button icon="el-icon-refresh" @click="handleTimeReset">Reset</el-button>
-            <!-- 重置 -->
           </el-form-item>
         </el-form>
       </div>
@@ -62,22 +55,17 @@
       <div class="content-toolbar">
         <div class="toolbar-info">
           <span class="info-label">Report Type:</span>
-          <!-- 报表类型 -->
           <span class="info-value">Stoppage Report</span>
-          <!-- 停机报表 -->
           <span class="info-divider">|</span>
           <span class="info-label">Time Range:</span>
-          <!-- 时间范围 -->
           <span class="info-range">{{ displayTimeRange }}</span>
         </div>
-        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Reselect Time</el-button>
-        <!-- 重新选择时间 -->
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Date Range</el-button>
       </div>
 
       <ReportBody
         v-loading="loading"
         title="Stoppage Report"
-        <!-- 停机报表 -->
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -97,7 +85,7 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true,
       timeRange: {
         startTime: '',
         endTime: ''
@@ -105,14 +93,14 @@ export default {
       reportSummary: [],
       reportDetail: [],
       columns: [
-        { label: 'Coil ID', prop: 'coilid' }, // 钢卷号
-        { label: 'Shift', prop: 'shift' }, // 班次号
-        { label: 'Group', prop: 'area' }, // 组
-        { label: 'Start Time', prop: 'startDate' }, // 开始时间
-        { label: 'End Time', prop: 'endDate' }, // 结束时间
-        { label: 'Duration [min]', prop: 'duration' }, // 持续时间[分钟]
-        { label: 'Stoppage Type', prop: 'unit' }, // 停机类型
-        { label: 'Remark', prop: 'remark' } // 备注
+        { label: 'Coil ID', prop: 'coilid' },
+        { label: 'Shift', prop: 'shift' },
+        { label: 'Group', prop: 'area' },
+        { label: 'Start Time', prop: 'startDate' },
+        { label: 'End Time', prop: 'endDate' },
+        { label: 'Duration [min]', prop: 'duration' },
+        { label: 'Stoppage Type', prop: 'unit' },
+        { label: 'Remark', prop: 'remark' }
       ]
     }
   },
@@ -123,16 +111,35 @@ export default {
     displayTimeRange() {
       if (!this.canQuery) return '-'
       return `${this.timeRange.startTime} to ${this.timeRange.endTime}`
-      // 至
     },
     overviewInfo() {
       return {
-        reportLabel: 'Stoppage Report', // 停机报表
+        reportLabel: 'Stoppage Report',
         rangeText: this.displayTimeRange
       }
     }
   },
+  created() {
+    this.setDefaultDateRangeAndFetch()
+  },
   methods: {
+    setDefaultDateRangeAndFetch() {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+
+      this.timeRange.endTime = this.formatDate(end)
+      this.timeRange.startTime = this.formatDate(start)
+
+      this.fetchReportData()
+    },
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+
     handleTimeReset() {
       this.timeRange = {
         startTime: '',
@@ -141,11 +148,11 @@ export default {
     },
     async handleTimeConfirm() {
       if (!this.canQuery) {
-        this.$message.warning('Please select complete date range') // 请选择完整的日期范围
+        this.$message.warning('Please select complete date range')
         return
       }
       if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
-        this.$message.warning('Start date cannot be later than end date') // 开始日期不能晚于结束日期
+        this.$message.warning('Start date cannot be later than end date')
         return
       }
       this.hasSelectedTime = true
@@ -153,9 +160,6 @@ export default {
     },
     handleReturn() {
       this.hasSelectedTime = false
-      this.handleTimeReset()
-      this.reportSummary = []
-      this.reportDetail = []
     },
     async fetchReportData() {
       this.loading = true
@@ -171,14 +175,14 @@ export default {
 
         const res2 = await getStoppageSummary(queryParams)
         this.reportSummary = [
-          { label: 'Statistics Range', value: this.displayTimeRange }, // 统计区间
-          { label: 'Stoppage Count', value: res2.data?.[0] || 0 }, // 停机次数
-          { label: 'Stoppage Duration [hours]', value: res2.data?.[1] || 0 }, // 停机时长[小时]
-          { label: 'Operation Rate', value: (res2.data?.[2] || 0) + ' %' } // 作业率
+          { label: 'Statistics Range', value: this.displayTimeRange },
+          { label: 'Stoppage Count', value: res2.data?.[0] || 0 },
+          { label: 'Stoppage Duration [hours]', value: res2.data?.[1] || 0 },
+          { label: 'Operation Rate', value: (res2.data?.[2] || 0) + ' %' }
         ]
       } catch (error) {
         console.error(error)
-        this.$message.error('Failed to fetch report data') // 获取报表数据失败
+        this.$message.error('Failed to fetch report data')
       } finally {
         this.loading = false
       }
@@ -257,7 +261,7 @@ export default {
 
   .selector-content {
     width: 100%;
-    max-width: 600px;
+    max-width: 640px;
     padding: 0 20px;
   }
 }
@@ -297,4 +301,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/l2/send/components/FurnaceHistoryPanel.vue b/src/views/l2/send/components/FurnaceHistoryPanel.vue
new file mode 100644
index 0000000..0ca3075
--- /dev/null
+++ b/src/views/l2/send/components/FurnaceHistoryPanel.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="fh-root">
+    <!-- Query -->
+    <el-form :model="query" inline size="mini" class="fh-toolbar">
+      <el-form-item label="Device">
+        <el-input v-model="query.deviceName" placeholder="Device name" clearable />
+      </el-form-item>
+      <el-form-item label="Status">
+        <el-select v-model="query.status" placeholder="Status" clearable style="width: 160px">
+          <el-option label="COMPLETED" value="COMPLETED" />
+          <el-option label="PARTIAL_SUCCESS" value="PARTIAL_SUCCESS" />
+          <el-option label="FAILED" value="FAILED" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">Search</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">Reset</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="list" border size="mini" height="380">
+      <el-table-column label="Job ID" prop="jobId" width="90" />
+      <el-table-column label="Device" prop="deviceName" width="140" />
+      <el-table-column label="Status" prop="status" width="140" />
+      <el-table-column label="Create Time" prop="createTime" width="170" />
+      <el-table-column label="Finish Time" prop="finishTime" width="170" />
+      <el-table-column label="Action" width="150" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="apply(scope.row)">Apply</el-button>
+          <el-button type="text" size="mini" @click="openDetail(scope.row.jobId)">Detail</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="query.pageNum"
+      :limit.sync="query.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- Detail dialog -->
+    <el-dialog title="Send Detail" :visible.sync="detailVisible" width="90%" append-to-body>
+      <div v-if="detail">
+        <el-tabs type="border-card">
+          <el-tab-pane
+            v-for="(g, idx) in (detail.groups || [])"
+            :key="g.groupId || idx"
+            :label="(g.groupName || g.groupType || ('Group ' + (idx+1)))"
+          >
+            <el-table :data="g.items || []" border size="small">
+              <el-table-column label="Param" prop="paramCode" width="180" />
+              <el-table-column label="Address" prop="address" min-width="320" />
+              <el-table-column label="Value" prop="valueRaw" width="160" />
+              <el-table-column label="Result" prop="resultStatus" width="120" />
+              <el-table-column label="Message" prop="resultMsg" min-width="180" />
+              <el-table-column label="Update Time" prop="updateTime" width="170" />
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisible=false">Close</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listSendJob, getSendJob } from '@/api/l2/sendJob'
+
+export default {
+  name: 'FurnaceHistoryPanel',
+  data() {
+    return {
+      loading: false,
+      list: [],
+      total: 0,
+      query: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceName: '',
+        status: 'COMPLETED',
+        groupType: 'FURNACE'
+      },
+      detailVisible: false,
+      detail: null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleQuery() {
+      this.query.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.query = { pageNum: 1, pageSize: 10, deviceName: '', status: 'COMPLETED', groupType: 'FURNACE' }
+      this.getList()
+    },
+    async getList() {
+      this.loading = true
+      try {
+        const res = await listSendJob(this.query)
+        this.list = res.rows || []
+        this.total = res.total || 0
+      } finally {
+        this.loading = false
+      }
+    },
+    async openDetail(jobId) {
+      const res = await getSendJob(jobId)
+      this.detail = res.data
+      this.detailVisible = true
+    },
+    async apply(row) {
+      const res = await getSendJob(row.jobId)
+      const detail = res.data
+      const values = {}
+      ;(detail.groups || []).forEach(g => {
+        if ((g.groupType || '').toUpperCase() !== 'FURNACE') return
+        ;(g.items || []).forEach(it => {
+          if (it.paramCode) values[it.paramCode] = it.valueRaw
+        })
+      })
+      this.$emit('apply', { jobId: row.jobId, values })
+      this.$message.success('Values applied')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fh-toolbar { margin-bottom: 10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+</style>
+
diff --git a/src/views/l2/send/drive.vue b/src/views/l2/send/drive.vue
new file mode 100644
index 0000000..0c0dd4e
--- /dev/null
+++ b/src/views/l2/send/drive.vue
@@ -0,0 +1,316 @@
+<template>
+  <div class="app-container">
+    <!-- Toolbar / 工具栏 -->
+    <div class="toolbar">
+      <el-button @click="reload" icon="el-icon-refresh" size="small" :loading="loading">
+        Refresh
+      </el-button>
+      <el-button
+        v-if="lastSuccess && lastSuccess.lastSendTime"
+        type="primary"
+        plain
+        icon="el-icon-magic-stick"
+        size="small"
+        @click="applyLastSuccessValues"
+      >
+        Apply Last Success Values
+      </el-button>
+    </div>
+
+    <!-- Cards / 卡片 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="20">
+        <el-col
+          v-for="setup in setups"
+          :key="setup.ID"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          class="card-col"
+        >
+          <el-card class="parameter-card" shadow="hover">
+            <div slot="header" class="card-header">
+              <div class="card-header-content">
+                <!-- 头部信息：参考 setup/panels 卡片表头“多字段拼接”的风格 -->
+                <div class="card-title-row">
+                  <span class="card-title">
+                    Plan ID: {{ setup.planid || '-' }}
+                    | Coil ID: {{ setup.coilid || '-' }}
+                    | Steel Grade: {{ setup.steelGrade || setup.grade || '-' }}
+                  </span>
+                </div>
+
+                <div class="card-subtitle">
+                  <span>Entry Thickness: {{ setup.entryThick || '-' }}</span>
+                  <span>Entry Width: {{ setup.entryWidth || '-' }}</span>
+                  <span>Entry Weight: {{ setup.entryWeight || '-' }}</span>
+                  <span>Entry Length: {{ setup.entryLength || '-' }}</span>
+                </div>
+
+                <div class="card-subtitle">
+                  <span>TL Elongation: {{ setup.tlElong || '-' }}</span>
+                  <span>TM Roll Force: {{ setup.tmRollforce || '-' }}</span>
+                  <span>TM Bending Force: {{ setup.tmBendforce || '-' }}</span>
+                  <span v-if="setup.updateTime">Updated: {{ formatTime(setup.updateTime) }}</span>
+                </div>
+              </div>
+
+              <div class="header-right">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-s-promotion"
+                  @click="handleSend(setup)"
+                  :loading="setup.sending"
+                >
+                  Send
+                </el-button>
+              </div>
+            </div>
+
+            <div class="card-body">
+              <!-- 可编辑表单 -->
+              <el-form :model="setup.params" label-position="top" size="mini">
+                <el-row :gutter="10">
+                  <el-col
+                    v-for="item in driveFields"
+                    :key="item.key"
+                    :span="12"
+                  >
+                    <el-form-item :label="item.label">
+                      <el-input
+                        v-model="setup.params[item.key]"
+                        :placeholder="getPlaceholder(item.key)"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <div v-if="setups.length === 0 && !loading" class="empty-data">
+        <el-empty description="No Setup History Data"></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Import APIs / 引入接口
+import { listSetup } from '@/api/business/setup'
+import { createSendJob, executeSendJob } from '@/api/l2/sendJob'
+import { getLastSuccess } from '@/api/l2/sendTemplate'
+
+// Drive fields definition (English UI, Chinese comments) / 传动字段定义（英文界面，中文注释）
+const DRIVE_FIELDS = [
+  { key: 'porTension', label: 'Pay-off Reel Tension' },
+  { key: 'celTension', label: 'Entry Loop Tension' },
+  { key: 'cleanTension', label: 'Cleaning Section Tension' },
+  { key: 'furTension', label: 'Furnace Zone Tension' },
+  { key: 'towerTension', label: 'Cooling Tower Tension' },
+  { key: 'tmNoneTension', label: 'TM No Tension' },
+  { key: 'tmEntryTension', label: 'TM Entry Tension' },
+  { key: 'tmExitTension', label: 'TM Exit Tension' },
+  { key: 'tlNoneTension', label: 'TL No Tension' },
+  { key: 'tlExitTension', label: 'TL Exit Tension' },
+  { key: 'coatTension', label: 'Post-treatment Tension' },
+  { key: 'cxlTension', label: 'Exit Loop Tension' },
+  { key: 'trTension', label: 'Take-up Reel Tension' },
+
+  { key: 'tlElong', label: 'TL Elongation' },
+  { key: 'tlLvlMesh1', label: 'TL Leveling Roll Mesh 1' },
+  { key: 'tlLvlMesh2', label: 'TL Leveling Roll Mesh 2' },
+  { key: 'tlAcbMesh', label: 'TL Anti-crossbow Mesh' },
+
+  { key: 'tmBendforce', label: 'TM Bending Force' },
+  { key: 'tmAcrMesh', label: 'TM Anti-crimping Roll Mesh' },
+  { key: 'tmBrMesh', label: 'TM Anti-tremor Roll Mesh' },
+  { key: 'tmRollforce', label: 'TM Roll Force' }
+]
+
+// OPC address mapping / OPC点位映射
+const DRIVE_ADDRESS = {
+  porTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionPorBR1',
+  celTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR3',
+  cleanTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR1BR2',
+  furTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionFur1',
+  towerTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionFur2',
+  tmNoneTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR5BR6',
+  tmEntryTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR5TM',
+  tmExitTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionTMBR6',
+  tlNoneTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR6BR7',
+  tlExitTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionTLBR7',
+  coatTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR7BR8',
+  cxlTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR8BR9',
+  trTension: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.tensionBR9TR',
+
+  tlElong: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.TLElongation',
+  tlLvlMesh1: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.LevelingMesh1',
+  tlLvlMesh2: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.LevelingMesh2',
+  tlAcbMesh: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.AntiCrossBowUnitMesh',
+
+  tmBendforce: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.TMBendforce',
+  tmAcrMesh: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.ACRMesh',
+  tmBrMesh: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.BRMesh',
+  tmRollforce: 'ns=2;s=ProcessCGL.PLCLine.L2Setup.TMRollforce'
+}
+
+export default {
+  name: 'DriveSend',
+  data() {
+    return {
+      loading: false,
+      lastSuccess: null,
+      setups: [], // Changed from 'plans' to 'setups'
+      driveFields: DRIVE_FIELDS,
+      driveAddress: { ...DRIVE_ADDRESS }
+    }
+  },
+  created() {
+    this.reload()
+  },
+  methods: {
+    async reload() {
+      this.loading = true
+      try {
+        // 1. Get last success for DRIVE
+        const lastRes = await getLastSuccess('DRIVE')
+        this.lastSuccess = lastRes && lastRes.code === 200 ? lastRes.data : null
+
+        // 2. Get setup history list (instead of plans)
+        const setupRes = await listSetup({ pageNum: 1, pageSize: 20 }) // Fetch latest 20 for example
+        const setupList = (setupRes && setupRes.rows) || []
+
+        // 3. Map setup list to display data
+        this.setups = setupList.map(s => {
+          const params = {}
+          this.driveFields.forEach(f => {
+            const fromSetup = s ? s[f.key] : undefined
+            const fromLast = this.lastSuccess?.values?.[f.key]
+
+            // Priority: current setup value > last success value > ''
+            if (fromSetup !== undefined && fromSetup !== null && String(fromSetup) !== '') {
+              params[f.key] = String(fromSetup)
+            } else if (fromLast !== undefined && fromLast !== null) {
+              params[f.key] = String(fromLast)
+            } else {
+              params[f.key] = ''
+            }
+          })
+
+          return {
+            ...s,
+            params,
+            sending: false
+          }
+        })
+      } catch (e) {
+        console.error(e)
+        this.$message.error('Load failed')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    applyLastSuccessValues() {
+      if (!this.lastSuccess || !this.lastSuccess.values) {
+        this.$message.info('No last success data')
+        return
+      }
+      this.setups.forEach(setup => {
+        this.driveFields.forEach(f => {
+          const v = this.lastSuccess.values[f.key]
+          if (v !== undefined) {
+            this.$set(setup.params, f.key, String(v))
+          }
+        })
+      })
+      this.$message.success('Last success values applied')
+    },
+
+    getPlaceholder(key) {
+      const v = this.lastSuccess?.values?.[key]
+      if (v !== undefined) return `Last: ${v}`
+      return 'Please enter'
+    },
+
+    formatTime(t) {
+      if (!t) return ''
+      return new Date(t).toLocaleString()
+    },
+
+    handleSend(setup) {
+      this.$confirm(
+        `Confirm to send parameters for Coil [${setup.coilid || '-'}]?`,
+        'Warning',
+        {
+          confirmButtonText: 'Confirm',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }
+      ).then(() => this.doSend(setup)).catch(() => {})
+    },
+
+    async doSend(setup) {
+      setup.sending = true
+      try {
+        const items = this.driveFields.map(f => ({
+          paramCode: f.key,
+          address: this.driveAddress[f.key], // OPC address can be empty
+          valueRaw: String(setup.params[f.key] || ''),
+          setTime: new Date()
+        })).filter(it => !!it.address) // Filter out items without an address
+
+        if (!items.length) {
+          this.$message.warning('OPC addresses are not configured. Nothing to send.')
+          return
+        }
+
+        const dto = {
+          deviceName: 'CGL_LINE_1',
+          bizKey: setup.coilid, // Use coilid as business key
+          groups: [
+            {
+              groupNo: 1,
+              groupType: 'DRIVE',
+              groupName: `Drive Params for ${setup.coilid || ''}`,
+              items
+            }
+          ]
+        }
+
+        const createRes = await createSendJob(dto)
+        const jobId = createRes.data
+        if (!jobId) throw new Error('Create send job failed')
+
+        await executeSendJob(jobId)
+        this.$message.success('Send success')
+
+        await this.reload()
+      } catch (e) {
+        console.error(e)
+        this.$message.error(e.message || 'Send failed')
+      } finally {
+        setup.sending = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toolbar { margin-bottom: 20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+.card-grid-container { min-height: 300px; }
+.card-col { margin-bottom: 20px; }
+.parameter-card .card-header { display:flex; justify-content:space-between; align-items:center; }
+.card-header-content { flex-grow: 1; }
+.card-title-row { margin-bottom: 4px; }
+.card-title { font-weight: 600; font-size: 16px; }
+.card-subtitle { font-size: 12px; color: #909399; display: flex; gap: 12px; }
+.header-right { flex-shrink: 0; margin-left: 16px; }
+.last-send-time { font-size: 12px; color:#909399; margin-right:16px; }
+.empty-data { margin-top: 20px; }
+</style>
diff --git a/src/views/l2/send/furnace.vue b/src/views/l2/send/furnace.vue
new file mode 100644
index 0000000..1060242
--- /dev/null
+++ b/src/views/l2/send/furnace.vue
@@ -0,0 +1,543 @@
+<template>
+  <div class="app-container">
+    <!-- Toolbar / 工具栏 -->
+    <div class="toolbar">
+      <el-button @click="reload" icon="el-icon-refresh" size="small" :loading="loading">
+        Refresh
+      </el-button>
+
+      <!-- Edit template switch / 编辑模板开关 -->
+      <el-switch
+        v-model="editTemplate"
+        active-text="Edit Template"
+        inactive-text="View"
+        style="margin: 0 12px"
+      />
+
+      <el-button
+        v-if="editTemplate"
+        type="success"
+        plain
+        icon="el-icon-check"
+        size="small"
+        :loading="savingTemplate"
+        @click="saveTemplate"
+      >
+        Save Template
+      </el-button>
+
+      <el-button
+        v-if="lastSuccess && lastSuccess.lastSendTime"
+        type="primary"
+        plain
+        icon="el-icon-magic-stick"
+        size="small"
+        @click="applyLastSuccessValues"
+      >
+        Apply Last Success Values
+      </el-button>
+
+      <el-button
+        type="info"
+        plain
+        icon="el-icon-time"
+        size="small"
+        @click="openHistory"
+      >
+        History
+      </el-button>
+    </div>
+
+    <!-- History Floating Panel -->
+    <FloatingPanel
+      ref="historyPanel"
+      title="History"
+      storageKey="FURNACE_SEND_HISTORY_PANEL"
+      :defaultW="980"
+      :defaultH="520"
+      :defaultX="30"
+      :defaultY="60"
+    >
+      <FurnaceHistoryPanel @apply="applyHistoryValues" />
+    </FloatingPanel>
+
+    <!-- Furnace Parameter Form / 炉火参数表单 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-card class="parameter-card" shadow="hover">
+        <div slot="header" class="card-header">
+          <span class="card-title">{{ template ? template.templateName : 'Furnace Settings' }}</span>
+          <div class="header-right">
+            <span v-if="lastSuccess && lastSuccess.lastSendTime" class="last-send-time">
+              <i class="el-icon-time"></i>
+              Last Sent: {{ formatTime(lastSuccess.lastSendTime) }}
+            </span>
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-s-promotion"
+              @click="handleSend"
+              :loading="sending"
+            >
+              Send
+            </el-button>
+          </div>
+        </div>
+
+        <!-- Template-driven editable form / 按模板渲染可编辑表单 -->
+        <el-form :model="form" label-position="top" size="mini">
+          <div class="group-list">
+            <div
+              v-for="group in groupedItems"
+              :key="group.groupKey"
+              class="group-section"
+            >
+              <div class="group-header">
+                <span class="group-title">{{ group.groupTitle }}</span>
+                <span class="group-count">({{ group.items.length }} items)</span>
+              </div>
+
+              <!-- Three inputs per row / 每行三个输入框 -->
+              <el-row :gutter="20">
+                <el-col
+                  :span="8"
+                  v-for="item in group.items"
+                  :key="item.templateItemId || item.paramCode"
+                >
+                  <el-form-item :label="item.labelEn">
+                    <el-input
+                      v-model="form[item.paramCode]"
+                      :placeholder="getPlaceholder(item)"
+                      :class="{ 'is-changed': isChangedFromLast(item) }"
+                    />
+
+                    <!-- 辅助信息：上次/默认值（常驻，不会像 placeholder 一样消失） -->
+                    <div class="field-hint">
+                      <span v-if="getLastValue(item) !== undefined" class="hint-item">
+                        Last Success: <b>{{ getLastValue(item) }}</b>
+                      </span>
+                      <span v-if="getDefaultValue(item) !== undefined" class="hint-item">
+                        Default: <b>{{ getDefaultValue(item) }}</b>
+                      </span>
+                      <span v-if="isChangedFromLast(item)" class="hint-item changed">
+Modified
+                      </span>
+                    </div>
+
+                    <!-- Inline address editor / 编辑点位 -->
+                    <div v-if="editTemplate" class="addr-inline">
+                      <span class="addr-label">Address:</span>
+                      <el-input v-model="item.address" size="mini" placeholder="ns=2;s=..." />
+                    </div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-form>
+
+        <div v-if="!loading && templateItems.length === 0" class="empty-data">
+          <el-empty description="Template is empty or not found"></el-empty>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+// Import APIs / 引入接口
+import { createSendJob, executeSendJob } from '@/api/l2/sendJob'
+import { getSendTemplate, getLastSuccess, updateSendTemplate, batchSaveSendTemplateItems } from '@/api/l2/sendTemplate'
+
+// Import Components / 引入组件
+import FloatingPanel from '@/components/FloatingPanel.vue'
+import FurnaceHistoryPanel from './components/FurnaceHistoryPanel.vue'
+
+export default {
+  name: 'FurnaceSend',
+  components: {
+    FloatingPanel,
+    FurnaceHistoryPanel
+  },
+  data() {
+    return {
+      loading: false, // Loading / 加载
+      sending: false, // Sending / 发送中
+      savingTemplate: false, // Saving template / 保存模板中
+      editTemplate: false, // Edit template switch / 编辑模板开关
+
+      template: null, // Template / 模板
+      lastSuccess: null, // Last success / 上次成功
+      form: {}, // Form values / 表单值
+
+      // 仅用于 Edit Template：记录加载时的原始模板项快照，用来计算差异，避免全量提交
+      originalItemsSnapshot: []
+    }
+  },
+  computed: {
+    templateItems() {
+      if (!this.template || !Array.isArray(this.template.items)) return []
+      return [...this.template.items]
+        .filter(i => i.enabled === undefined || i.enabled === 1)
+        .sort((a, b) => (a.itemNo || 0) - (b.itemNo || 0))
+    },
+
+    // 按 paramCode 前缀分组（如 NOF1 / NOF2 / RTF1 / SF ...）
+    groupedItems() {
+      const groupsMap = new Map()
+      const items = this.templateItems
+
+      items.forEach(it => {
+        const key = this.getGroupKey(it)
+        if (!groupsMap.has(key)) groupsMap.set(key, [])
+        groupsMap.get(key).push(it)
+      })
+
+      // Map -> Array，并按组名排序（NOF1, NOF2... 这种会自然排序更好）
+      const groups = Array.from(groupsMap.entries()).map(([groupKey, groupItems]) => ({
+        groupKey,
+        groupTitle: this.getGroupTitle(groupKey),
+        items: groupItems
+      }))
+
+      groups.sort((a, b) => String(a.groupKey).localeCompare(String(b.groupKey), undefined, { numeric: true }))
+      return groups
+    }
+  },
+  created() {
+    // 不 await：避免阻塞页面渲染；异常会在 Promise 链上抛出到控制台/全局拦截
+    this.reload()
+  },
+  methods: {
+    pickItemFields(it) {
+      if (!it) return {}
+      // 仅挑后端支持保存的字段，避免把多余字段/响应结构带回去
+      return {
+        templateItemId: it.templateItemId,
+        templateId: it.templateId,
+        itemNo: it.itemNo,
+        paramCode: it.paramCode,
+        labelEn: it.labelEn,
+        groupNameEn: it.groupNameEn,
+        address: it.address,
+        defaultValueRaw: it.defaultValueRaw,
+        enabled: it.enabled,
+        remark: it.remark
+      }
+    },
+
+    isItemChanged(a, b) {
+      // a/b 都是 pickItemFields 之后的对象
+      const keys = ['itemNo', 'paramCode', 'labelEn', 'groupNameEn', 'address', 'defaultValueRaw', 'enabled', 'remark']
+      return keys.some(k => String(a?.[k] ?? '') !== String(b?.[k] ?? ''))
+    },
+
+    openHistory() {
+      // FloatingPanel 提供 open() 方法
+      this.$refs.historyPanel && this.$refs.historyPanel.open()
+    },
+
+    applyHistoryValues(payload) {
+      const values = payload && payload.values ? payload.values : {}
+      this.templateItems.forEach(item => {
+        const v = values[item.paramCode]
+        if (v !== undefined) {
+          this.$set(this.form, item.paramCode, String(v))
+        }
+      })
+    },
+
+    getGroupKey(item) {
+      const code = (item && item.paramCode) ? String(item.paramCode) : ''
+      // 取第一段：NOF1_XXX / NOF1.XXX / NOF1-XXX
+      const m = code.match(/^([A-Za-z]+\d+|[A-Za-z]+)(?=[_.-]|$)/)
+      return m ? m[1] : 'OTHER'
+    },
+
+    getGroupTitle(groupKey) {
+      // 可按你们现场习惯改中文名
+      const map = {
+        NOF: 'NOF',
+        RTF: 'RTF',
+        SF: 'SF',
+        PH: 'PH',
+        JCF: 'JCF',
+        LTH: 'LTH',
+        TDS: 'TDS'
+      }
+      const base = String(groupKey).match(/^[A-Za-z]+/)?.[0] || String(groupKey)
+      // 例如 NOF1 -> NOF1（或 “NOF 1”）
+      const prefixTitle = map[base] || base
+      const suffix = String(groupKey).slice(base.length)
+      return suffix ? `${prefixTitle}${suffix}` : prefixTitle
+    },
+
+    async reload() {
+      this.loading = true
+      const [templateRes, lastRes] = await Promise.all([
+        getSendTemplate('FURNACE_DEFAULT'),
+        getLastSuccess('FURNACE')
+      ])
+
+      this.template = templateRes && templateRes.code === 200 ? templateRes.data : null
+      this.lastSuccess = lastRes && lastRes.code === 200 ? lastRes.data : null
+
+      // 记录模板项原始快照（用于 Edit Template 计算差异，避免全量提交）
+      this.originalItemsSnapshot = this.template && Array.isArray(this.template.items)
+        ? this.template.items.map(it => this.pickItemFields(it))
+        : []
+
+      this.initializeForm()
+      this.loading = false
+    },
+
+    initializeForm() {
+      const init = {}
+      if (!this.templateItems.length) {
+        this.form = {}
+        return
+      }
+      this.templateItems.forEach(item => {
+        const lastValue = this.lastSuccess?.values?.[item.paramCode]
+        init[item.paramCode] = lastValue !== undefined ? lastValue : (item.defaultValueRaw || '')
+      })
+      this.form = init
+    },
+
+    applyLastSuccessValues() {
+      if (!this.lastSuccess || !this.lastSuccess.values) {
+        this.$message.info('No last success data')
+        return
+      }
+      this.templateItems.forEach(item => {
+        const v = this.lastSuccess.values[item.paramCode]
+        if (v !== undefined) {
+          this.$set(this.form, item.paramCode, String(v))
+        }
+      })
+      this.$message.success('Last success values applied')
+    },
+
+    getPlaceholder() {
+      // placeholder 只保留引导，不承载关键信息（上次/默认值放到下方提示）
+      return 'Please enter'
+    },
+
+    getLastValue(item) {
+      const v = this.lastSuccess?.values?.[item.paramCode]
+      return v === undefined || v === null || v === '' ? undefined : v
+    },
+
+    getDefaultValue(item) {
+      const v = item?.defaultValueRaw
+      return v === undefined || v === null || v === '' ? undefined : v
+    },
+
+    isChangedFromLast(item) {
+      const last = this.getLastValue(item)
+      if (last === undefined) return false
+      const cur = this.form?.[item.paramCode]
+      // 统一用字符串比较，避免 1 vs "1"
+      return String(cur ?? '') !== String(last)
+    },
+
+    formatTime(t) {
+      if (!t) return ''
+      return new Date(t).toLocaleString()
+    },
+
+    async saveTemplate() {
+      if (!this.template || !this.template.templateId) {
+        this.$message.error('Template not loaded')
+        return
+      }
+
+      this.savingTemplate = true
+      try {
+        // 1) save template main
+        await updateSendTemplate({
+          templateId: this.template.templateId,
+          deviceName: this.template.deviceName,
+          enabled: this.template.enabled,
+          remark: this.template.remark
+        })
+
+        // 2) diff items (ONLY send changed items)
+        const currentAll = (this.template && Array.isArray(this.template.items))
+          ? this.template.items.map(it => this.pickItemFields(it))
+          : []
+
+        const originalAll = Array.isArray(this.originalItemsSnapshot)
+          ? this.originalItemsSnapshot
+          : []
+
+        const originalById = new Map(originalAll.filter(x => x.templateItemId != null).map(x => [x.templateItemId, x]))
+        const currentById = new Map(currentAll.filter(x => x.templateItemId != null).map(x => [x.templateItemId, x]))
+
+        // deleted: in original but not in current
+        const deleteIds = []
+        originalById.forEach((_, id) => {
+          if (!currentById.has(id)) deleteIds.push(id)
+        })
+
+        // upsert: new (no id) OR changed
+        const upserts = []
+        currentAll.forEach(it => {
+          if (!it.templateItemId) {
+            // new item
+            upserts.push(it)
+            return
+          }
+          const old = originalById.get(it.templateItemId)
+          if (!old) {
+            upserts.push(it)
+            return
+          }
+          if (this.isItemChanged(it, old)) {
+            upserts.push(it)
+          }
+        })
+
+        if (!upserts.length && !deleteIds.length) {
+          this.$message.success('No changes')
+          this.editTemplate = false
+          return
+        }
+
+        await batchSaveSendTemplateItems({
+          templateId: this.template.templateId,
+          items: upserts,
+          deleteIds
+        })
+
+        this.$message.success('Template saved')
+        this.editTemplate = false
+        await this.reload()
+      } catch (e) {
+        console.error(e)
+        this.$message.error(e.message || 'Save template failed')
+      } finally {
+        this.savingTemplate = false
+      }
+    },
+
+    handleSend() {
+      this.$confirm('Confirm to send furnace parameters?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(() => {
+        this.doSend()
+      }).catch(() => {})
+    },
+
+    async doSend() {
+      if (!this.template) {
+        this.$message.error('Template not loaded')
+        return
+      }
+      if (!this.templateItems.length) {
+        this.$message.error('Template is empty')
+        return
+      }
+
+      this.sending = true
+      try {
+        // 仅发送“有点位 + 相对 lastSuccess 有变化”的项，避免请求体过大导致超时
+        const items = this.templateItems
+          .map(item => {
+            const cur = String(this.form?.[item.paramCode] ?? '')
+            const last = this.lastSuccess?.values?.[item.paramCode]
+            const hasLast = last !== undefined && last !== null
+            // 有 lastSuccess 时：严格对比；没有 lastSuccess 时：只有非空才发送（避免全空全量下发）
+            const changed = hasLast ? (String(last) !== cur) : (cur !== '')
+
+            return {
+              paramCode: item.paramCode,
+              address: item.address,
+              valueRaw: cur,
+              setTime: new Date(),
+              __changed: changed
+            }
+          })
+          .filter(it => !!it.address && it.__changed)
+          .map(({ __changed, ...rest }) => rest)
+
+        if (!items.length) {
+          this.$message.info('没有检测到变更项，无需发送')
+          return
+        }
+
+        const dto = {
+          deviceName: this.template.deviceName,
+          groups: [
+            {
+              groupNo: 1,
+              groupType: 'FURNACE',
+              groupName: this.template.templateName || 'Furnace Settings',
+              items
+            }
+          ]
+        }
+
+        const createRes = await createSendJob(dto)
+        const jobId = createRes.data
+        if (!jobId) throw new Error('Create send job failed')
+
+        await executeSendJob(jobId)
+        this.$message.success('Send success')
+
+        await this.reload()
+      } catch (e) {
+        console.error(e)
+        this.$message.error(e.message || 'Send failed')
+      } finally {
+        this.sending = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-title { margin-bottom: 20px; }
+.toolbar { margin-bottom: 20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+.card-grid-container { min-height: 300px; }
+.parameter-card .card-header { display:flex; justify-content:space-between; align-items:center; }
+.card-title { font-weight: 600; }
+.header-right { display:flex; align-items:center; }
+.last-send-time { font-size: 12px; color:#909399; margin-right:16px; }
+.empty-data { margin-top: 20px; }
+.addr-inline { margin-top: 6px; }
+.addr-label { display:inline-block; margin-right:6px; color:#909399; font-size:12px; }
+
+.group-list { margin-top: 8px; }
+.group-section { padding: 10px 0 6px; border-top: 1px solid #ebeef5; }
+.group-section:first-child { border-top: none; padding-top: 0; }
+.group-header { display:flex; align-items:baseline; gap:8px; margin: 4px 0 10px; }
+.group-title { font-weight: 600; }
+.group-count { color:#909399; font-size: 12px; margin-left: 6px; }
+
+/* 字段提示信息 */
+.field-hint {
+  font-size: 12px;
+  line-height: 1.4;
+  margin-top: 4px;
+  color: #909399;
+}
+
+.hint-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.hint-item.changed {
+  color: #e6a23c;
+  font-weight: 500;
+}
+
+/* 修改过的输入框高亮 */
+:deep(.el-input.is-changed .el-input__inner) {
+  border-color: #e6a23c;
+  background-color: #fdf6ec;
+}
+</style>
diff --git a/src/views/l2/send/history.vue b/src/views/l2/send/history.vue
new file mode 100644
index 0000000..100779b
--- /dev/null
+++ b/src/views/l2/send/history.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="app-container">
+    <!-- Query / 查询 -->
+    <el-form :model="query" inline size="small" class="toolbar">
+      <el-form-item label="Device">
+        <el-input v-model="query.deviceName" placeholder="Device name" clearable />
+      </el-form-item>
+      <el-form-item label="Status">
+        <el-select v-model="query.status" placeholder="Status" clearable>
+          <el-option label="PENDING" value="PENDING" />
+          <el-option label="IN_PROGRESS" value="IN_PROGRESS" />
+          <el-option label="COMPLETED" value="COMPLETED" />
+          <el-option label="PARTIAL_SUCCESS" value="PARTIAL_SUCCESS" />
+          <el-option label="FAILED" value="FAILED" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">Search</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">Reset</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- Table / 表格 -->
+    <el-table v-loading="loading" :data="list" border>
+      <el-table-column label="Job ID" prop="jobId" width="90" />
+      <el-table-column label="Biz Key" prop="bizKey" width="220" />
+      <el-table-column label="Device" prop="deviceName" width="140" />
+      <el-table-column label="Status" prop="status" width="140" />
+      <el-table-column label="Create Time" prop="createTime" width="170" />
+      <el-table-column label="Finish Time" prop="finishTime" width="170" />
+      <el-table-column label="Remark" prop="remark" min-width="160" />
+      <el-table-column label="Action" width="120" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="openDetail(scope.row.jobId)">Detail</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="query.pageNum"
+      :limit.sync="query.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- Detail dialog / 详情弹窗 -->
+    <el-dialog title="Send Detail" :visible.sync="detailVisible" width="90%" append-to-body>
+      <div v-if="detail">
+        <el-descriptions :column="3" border size="small">
+          <el-descriptions-item label="Job ID">{{ detail.jobId }}</el-descriptions-item>
+          <el-descriptions-item label="Device">{{ detail.deviceName }}</el-descriptions-item>
+          <el-descriptions-item label="Status">{{ detail.status }}</el-descriptions-item>
+          <el-descriptions-item label="Create Time">{{ detail.createTime }}</el-descriptions-item>
+          <el-descriptions-item label="Finish Time">{{ detail.finishTime }}</el-descriptions-item>
+          <el-descriptions-item label="Remark">{{ detail.remark }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-divider />
+
+        <el-tabs type="border-card">
+          <el-tab-pane
+            v-for="(g, idx) in (detail.groups || [])"
+            :key="g.groupId || idx"
+            :label="(g.groupName || g.groupType || ('Group ' + (idx+1)))"
+          >
+            <el-table :data="g.items || []" border size="small">
+              <el-table-column label="Param" prop="paramCode" width="180" />
+              <el-table-column label="Address" prop="address" min-width="320" />
+              <el-table-column label="Value" prop="valueRaw" width="160" />
+              <el-table-column label="Result" prop="resultStatus" width="120" />
+              <el-table-column label="Message" prop="resultMsg" min-width="180" />
+              <el-table-column label="Update Time" prop="updateTime" width="170" />
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisible=false">Close</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listSendJob, getSendJob } from '@/api/l2/sendJob'
+
+export default {
+  name: 'SendHistory',
+  data() {
+    return {
+      loading: false,
+      list: [],
+      total: 0,
+      query: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceName: '',
+        status: ''
+      },
+      detailVisible: false,
+      detail: null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleQuery() {
+      this.query.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.query = { pageNum: 1, pageSize: 10, deviceName: '', status: '' }
+      this.getList()
+    },
+    async getList() {
+      this.loading = true
+      try {
+        // RuoYi 列表一般返回 {rows,total,code}
+        const res = await listSendJob(this.query)
+        this.list = res.rows || []
+        this.total = res.total || 0
+      } finally {
+        this.loading = false
+      }
+    },
+    async openDetail(jobId) {
+      const res = await getSendJob(jobId)
+      this.detail = res.data
+      this.detailVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-title { margin-bottom: 20px; }
+.toolbar { margin-bottom: 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+</style>
+
diff --git a/src/views/l2/setup/index.vue b/src/views/l2/setup/index.vue
index b845441..8f15781 100644
--- a/src/views/l2/setup/index.vue
+++ b/src/views/l2/setup/index.vue
@@ -45,7 +45,7 @@
           </el-menu>
         </div>
       </el-col>
-      
+
       <!-- Right main content area / 右侧主内容区 -->
       <el-col :span="20" class="content-col">
         <div class="content-wrapper">
@@ -124,7 +124,7 @@ export default {
   padding: 15px;
   background: #e8e8e8;
   border-bottom: 1px solid #d4d4d4;
-  
+
   h3 {
     margin: 0;
     font-size: 16px;
@@ -137,23 +137,23 @@ export default {
   border-right: none;
   flex: 1;
   overflow: hidden;
-  
+
   ::v-deep .el-menu-item {
     height: 48px;
     line-height: 48px;
     font-size: 13px;
     color: #666;
-    
+
     &.is-active {
       background-color: #f0f0f0;
       color: #333;
       border-right: 2px solid #999;
     }
-    
+
     &:hover {
       background-color: #f5f5f5;
     }
-    
+
     i {
       margin-right: 8px;
       font-size: 14px;
@@ -177,4 +177,4 @@ export default {
   display: flex;
   flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/l2/track/components/LatestSetValues.vue b/src/views/l2/track/components/LatestSetValues.vue
new file mode 100644
index 0000000..5b3702b
--- /dev/null
+++ b/src/views/l2/track/components/LatestSetValues.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="lsv-root">
+    <div class="lsv-meta">
+      <div class="lsv-meta-row">
+        <span class="lsv-meta-label">Drive Last Sent:</span>
+        <span class="lsv-meta-value">{{ formatTime(driveData && driveData.lastSendTime) }}</span>
+      </div>
+      <div class="lsv-meta-row">
+        <span class="lsv-meta-label">Furnace Last Sent:</span>
+        <span class="lsv-meta-value">{{ formatTime(furnaceData && furnaceData.lastSendTime) }}</span>
+      </div>
+    </div>
+
+    <el-tabs v-model="active" type="border-card" class="lsv-tabs">
+      <el-tab-pane label="Drive" name="drive">
+        <div class="lsv-list">
+          <div v-if="!driveList.length" class="lsv-empty">未设定</div>
+          <div v-for="it in driveList" :key="it.key" class="lsv-item">
+            <span class="lsv-key">{{ it.key }}</span>
+            <span class="lsv-val">{{ it.val }}</span>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Furnace" name="furnace">
+        <div class="lsv-list">
+          <div v-if="!furnaceList.length" class="lsv-empty">未设定</div>
+          <div v-for="it in furnaceList" :key="it.key" class="lsv-item">
+            <span class="lsv-key">{{ it.key }}</span>
+            <span class="lsv-val">{{ it.val }}</span>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LatestSetValues',
+  props: {
+    driveData: { type: Object, default: null },
+    furnaceData: { type: Object, default: null }
+  },
+  data() {
+    return {
+      active: 'drive'
+    }
+  },
+  computed: {
+    driveList() {
+      const values = this.driveData && this.driveData.values ? this.driveData.values : {}
+      return Object.keys(values).sort().map(k => ({ key: k, val: values[k] === '' || values[k] == null ? '-' : String(values[k]) }))
+    },
+    furnaceList() {
+      const values = this.furnaceData && this.furnaceData.values ? this.furnaceData.values : {}
+      return Object.keys(values).sort().map(k => ({ key: k, val: values[k] === '' || values[k] == null ? '-' : String(values[k]) }))
+    }
+  },
+  methods: {
+    formatTime(t) {
+      if (!t) return '-'
+      return new Date(t).toLocaleString()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lsv-meta {
+  margin-bottom: 10px;
+  padding: 8px;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+.lsv-meta-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 18px;
+}
+.lsv-meta-label { color: #909399; }
+.lsv-meta-value { color: #303133; font-weight: 600; }
+
+.lsv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.lsv-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #e8f4ff; /* 设定值背景色 */
+  border: 1px solid #c6e2ff;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+}
+.lsv-key {
+  color: #303133;
+  font-family: 'Courier New', monospace;
+  margin-right: 10px;
+}
+.lsv-val {
+  color: #1f78d1;
+  font-weight: 700;
+}
+.lsv-empty {
+  color: #909399;
+  font-size: 12px;
+}
+</style>
+
diff --git a/src/views/l2/track/rect.vue b/src/views/l2/track/rect.vue
index 585a109..442da82 100644
--- a/src/views/l2/track/rect.vue
+++ b/src/views/l2/track/rect.vue
@@ -1,2510 +1,2566 @@
 <template>
-  <div class="track-container">
-    <el-row :gutter="20">
-      <!-- 左侧：设备列表 -->
-      <el-col :span="16">
-        <!-- Loading Status / 加载状态 -->
-        <div v-if="isLoading" class="loading-container">
-          <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
-          <span>Loading...</span>
-          <!-- 加载中... -->
-        </div>
-
-        <!-- WebSocket Connection Status Indicator / WebSocket 连接状态指示 -->
-        <div v-if="!isLoading" class="ws-status-bar">
-          <el-tooltip content="Measurement Data" placement="top">
-            <!-- 测量数据 -->
-            <el-badge :is-dot="true" :type="socketStatus.measure ? 'success' : 'danger'">
-              <i class="el-icon-data-analysis"></i>
-            </el-badge>
-          </el-tooltip>
-          <el-tooltip content="Position Tracking" placement="top">
-            <!-- 位置追踪 -->
-            <el-badge :is-dot="true" :type="socketStatus.position ? 'success' : 'danger'">
-              <i class="el-icon-location"></i>
-            </el-badge>
-          </el-tooltip>
-          <el-tooltip content="Operation Signal" placement="top">
-            <!-- 操作信号 -->
-            <el-badge :is-dot="true" :type="socketStatus.signal ? 'success' : 'danger'">
-              <i class="el-icon-bell"></i>
-            </el-badge>
-          </el-tooltip>
-          <el-tooltip content="Material Mapping" placement="top">
-            <!-- 物料映射 -->
-            <el-badge :is-dot="true" :type="socketStatus.matmap ? 'success' : 'danger'">
-              <i class="el-icon-map-location"></i>
-            </el-badge>
-          </el-tooltip>
-          <el-tooltip content="Calculation Result" placement="top">
-            <!-- 计算结果 -->
-            <el-badge :is-dot="true" :type="socketStatus.calcSetup ? 'success' : 'danger'">
-              <i class="el-icon-s-marketing"></i>
-            </el-badge>
-          </el-tooltip>
-        </div>
-
-        <div v-if="!isLoading" class="device-layout">
-          <!-- Entry Section / 入口段区域 -->
-          <div class="section-area entry-area">
-            <div class="section-header">
-              Entry Section
-              <!-- 入口段 -->
-              <span class="section-info" v-if="positionData.entrySpeed">Speed: {{ positionData.entrySpeed.toFixed(1) }} m/min</span>
-              <!-- 速度 -->
-            </div>
-            <div class="section-summary" v-if="entrySectionMetrics.length">
-              <div class="summary-item" v-for="item in entrySectionMetrics" :key="item.label">
-                <span class="summary-label">{{ item.label }}：</span>
-                <span class="summary-value">{{ item.value }}</span>
-              </div>
-            </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
-                    {{ getDeviceStatus(device.positionNameEn) }}
-                  </span>
-                </div>
-              </div>
-            </div>
+    <div class="track-container">
+      <!-- Set Values Floating Panel / 设定值悬浮窗 -->
+      <FloatingPanel ref="setValuesPanel" title="Set Values" width="720px">
+        <LatestSetValues :driveData="setupValue.drive" :furnaceData="setupValue.furnace" />
+      </FloatingPanel>
+      <el-row :gutter="20">
+        <!-- 左侧：设备列表 -->
+        <el-col :span="16">
+          <!-- Loading Status / 加载状态 -->
+          <div v-if="isLoading" class="loading-container">
+            <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
+            <span>Loading...</span>
+            <!-- 加载中... -->
           </div>
-
-          <!-- Furnace Section / 熔炉段区域 -->
-          <div class="section-area furnace-area">
-            <div class="section-header">
-              Furnace Section
-              <!-- 熔炉段 -->
-              <span class="section-info" v-if="positionData.technologySpeed">Speed: {{ positionData.technologySpeed.toFixed(1) }} m/min</span>
-              <!-- 速度 -->
-            </div>
-            <div class="section-summary" v-if="furnaceSectionMetrics.length">
-              <div class="summary-item" v-for="item in furnaceSectionMetrics" :key="item.label">
-                <span class="summary-label">{{ item.label }}：</span>
-                <span class="summary-value">{{ item.value }}</span>
-              </div>
-            </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
-                    {{ getDeviceStatus(device.positionNameEn) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Coating Section / 涂层段区域 -->
-          <div class="section-area coat-area">
-            <div class="section-header">Coating Section</div>
-            <!-- 涂层段 -->
-            <div class="section-summary" v-if="coatSectionMetrics.length">
-              <div class="summary-item" v-for="item in coatSectionMetrics" :key="item.label">
-                <span class="summary-label">{{ item.label }}：</span>
-                <span class="summary-value">{{ item.value }}</span>
-              </div>
-            </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
-                    {{ getDeviceStatus(device.positionNameEn) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Exit Section / 出口段区域 -->
-          <div class="section-area exit-area">
-            <div class="section-header">
-              Exit Section
-              <!-- 出口段 -->
-              <span class="section-info" v-if="positionData.exitSpeed">Speed: {{ positionData.exitSpeed.toFixed(1) }} m/min</span>
-              <!-- 速度 -->
-            </div>
-            <div class="section-summary" v-if="exitSectionMetrics.length">
-              <div class="summary-item" v-for="item in exitSectionMetrics" :key="item.label">
-                <span class="summary-label">{{ item.label }}：</span>
-                <span class="summary-value">{{ item.value }}</span>
-              </div>
-            </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
-                    {{ getDeviceStatus(device.positionNameEn) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Other Section / 其他段区域 -->
-          <div class="section-area" v-if="exitOtherDevicesList.length">
-            <div class="section-header">Other Section</div>
-            <!-- 其他段 -->
-            <div class="device-grid other-exit-grid">
-              <div v-for="device in exitOtherDevicesList" :key="device.positionNameEn" class="device-card" :class="{
-                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
-                'has-data': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
-                    {{ getDeviceStatus(device.positionNameEn) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </el-col>
-
-      <!-- 右侧：信息面板 -->
-      <el-col :span="8">
-        <div class="info-panels">
-          <!-- Production Plan List / 生产计划列表 -->
-          <div class="panel">
-            <div class="panel-title">
-              <i class="el-icon-s-order"></i> Production Plan
-              <!-- 生产计划 -->
-            </div>
-            <div class="plan-list-vertical">
-              <el-empty v-if="planQueue.length === 0" description="No production plan" :image-size="80" />
-              <!-- 暂无生产计划 -->
-              <div
-                v-else
-                v-for="(plan, index) in planQueue"
-                :key="plan.id || plan.planid || index"
-                class="plan-item-vertical"
-                :class="getPlanItemClass(plan)"
-                @click="selectPlan(plan)"
-              >
-                <div class="plan-item-top">
-                  <div class="plan-order-dot" :class="getPlanOrderClass(plan.status)">{{ index + 1 }}</div>
-                  <div class="plan-title-text">
-                    <div class="plan-id">Plan ID: {{ plan.planid || '-' }}</div>
-                    <!-- 计划ID -->
-                    <div class="plan-coil">Coil ID: {{ plan.coilid || '-' }}</div>
-                    <!-- 钢卷号 -->
-                  </div>
-                  <el-tag :type="getPlanStatusTagType(plan.status)" size="mini">{{ getPlanStatusText(plan.status) }}</el-tag>
-                </div>
-                <div class="plan-item-bottom">
-                  <span>Steel Grade: {{ plan.steelGrade || '-' }}</span>
-                  <!-- 钢种 -->
-                  <span>Sequence: {{ plan.seqid || '-' }}</span>
-                  <!-- 顺序 -->
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Production Plan Detail / 生产计划详情 -->
-          <div class="panel" v-if="selectedPlan">
-            <div class="panel-title">
-              <i class="el-icon-document"></i> Plan Detail
-              <!-- 生产计划详情 -->
-              <el-button size="mini" type="text" icon="el-icon-close" @click="selectedPlan = null"></el-button>
-            </div>
-            <div class="plan-detail-content">
-              <!-- Position Info (if on production line) / 位置信息（如果在产线上） -->
-              <div v-if="selectedPlanPosition" class="position-alert">
-                <div class="position-icon">
+  
+          <!-- WebSocket Connection Status Indicator / WebSocket 连接状态指示 -->
+          <div v-if="!isLoading" class="ws-status-bar">
+            <!-- Left: status icons -->
+            <div class="ws-status-left">
+              <!-- Set Values Floating Window Trigger / 设定值悬浮窗触发按钮 -->
+              <el-tooltip content="Set Values" placement="top">
+                <el-button type="text" class="ws-open-btn" @click="openSetValuesPanel">
+                  <i class="el-icon-setting"></i>
+                </el-button>
+              </el-tooltip>
+              <el-tooltip content="Measurement Data" placement="top">
+                <!-- 测量数据 -->
+                <el-badge :is-dot="true" :type="socketStatus.measure ? 'success' : 'danger'">
+                  <i class="el-icon-data-analysis"></i>
+                </el-badge>
+              </el-tooltip>
+              <el-tooltip content="Position Tracking" placement="top">
+                <!-- 位置追踪 -->
+                <el-badge :is-dot="true" :type="socketStatus.position ? 'success' : 'danger'">
                   <i class="el-icon-location"></i>
-                </div>
-                <div class="position-info">
-                  <div class="position-label">Current Position</div>
-                  <!-- 当前位置 -->
-                  <div class="position-name">{{ selectedPlanPosition.positionNameCn }}</div>
-                  <div class="position-code">{{ selectedPlanPosition.positionNameEn }}</div>
+                </el-badge>
+              </el-tooltip>
+              <el-tooltip content="Operation Signal" placement="top">
+                <!-- 操作信号 -->
+                <el-badge :is-dot="true" :type="socketStatus.signal ? 'success' : 'danger'">
+                  <i class="el-icon-bell"></i>
+                </el-badge>
+              </el-tooltip>
+              <el-tooltip content="Material Mapping" placement="top">
+                <!-- 物料映射 -->
+                <el-badge :is-dot="true" :type="socketStatus.matmap ? 'success' : 'danger'">
+                  <i class="el-icon-map-location"></i>
+                </el-badge>
+              </el-tooltip>
+              <el-tooltip content="Calculation Result" placement="top">
+                <!-- 计算结果 -->
+                <el-badge :is-dot="true" :type="socketStatus.calcSetup ? 'success' : 'danger'">
+                  <i class="el-icon-s-marketing"></i>
+                </el-badge>
+              </el-tooltip>
+            </div>
+
+            <!-- Right: quick links -->
+            <div class="ws-status-right">
+              <el-button type="primary" size="small" @click="$router.push('/furnace')">Furnace Setup</el-button>
+              <el-button type="primary" size="small" @click="$router.push('/drive')">Drive Setup</el-button>
+            </div>
+          </div>
+  
+          <div v-if="!isLoading" class="device-layout">
+            <!-- Entry Section / 入口段区域 -->
+            <div class="section-area entry-area">
+              <div class="section-header">
+                Entry Section
+                <!-- 入口段 -->
+                <span class="section-info" v-if="positionData.entrySpeed">Speed: {{ positionData.entrySpeed.toFixed(1) }} m/min</span>
+                <!-- 速度 -->
+              </div>
+              <div class="section-summary" v-if="entrySectionMetrics.length">
+                <div class="summary-item" v-for="item in entrySectionMetrics" :key="item.label">
+                  <span class="summary-label">{{ item.label }}：</span>
+                  <span class="summary-value">{{ item.value }}</span>
                 </div>
               </div>
-              
-              <el-descriptions :column="1" border size="small">
-                <el-descriptions-item label="Plan ID">{{ selectedPlan.planid || '-' }}</el-descriptions-item>
-                <!-- 计划ID -->
-                <el-descriptions-item label="Coil ID">{{ selectedPlan.coilid || '-' }}</el-descriptions-item>
-                <!-- 钢卷号 -->
-                <el-descriptions-item label="Sequence">{{ selectedPlan.seqid || '-' }}</el-descriptions-item>
-                <!-- 顺序号 -->
-                <el-descriptions-item label="Status">
-                  <!-- 状态 -->
-                  <el-tag :type="getPlanStatusTagType(selectedPlan.status)" size="small" effect="dark">
-                    {{ getPlanStatusText(selectedPlan.status) }}
-                  </el-tag>
-                </el-descriptions-item>
-                <el-descriptions-item label="Steel Grade">{{ selectedPlan.steelGrade || '-' }}</el-descriptions-item>
-                <!-- 钢种 -->
-                <el-descriptions-item label="Entry Thickness">
-                  <!-- 入口厚度 -->
-                  {{ selectedPlan.entryThick ? selectedPlan.entryThick + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="Entry Width">
-                  <!-- 入口宽度 -->
-                  {{ selectedPlan.entryWidth ? selectedPlan.entryWidth + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="Entry Weight">
-                  <!-- 入口重量 -->
-                  {{ selectedPlan.entryWeight ? selectedPlan.entryWeight + ' t' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="Entry Length">
-                  <!-- 入口长度 -->
-                  {{ selectedPlan.entryLength ? selectedPlan.entryLength + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="Order No">{{ selectedPlan.orderNo || '-' }}</el-descriptions-item>
-                <!-- 订单号 -->
-                <el-descriptions-item label="Unit Code">{{ selectedPlan.unitCode || '-' }}</el-descriptions-item>
-                <!-- 机组号 -->
-                <el-descriptions-item label="Plan Type">{{ selectedPlan.planType || '-' }}</el-descriptions-item>
-                <!-- 计划类型 -->
-              </el-descriptions>
-              
-              <!-- Time Information / 时间信息 -->
-              <div class="plan-time-info" v-if="selectedPlan.onlineDate || selectedPlan.startDate || selectedPlan.endDate">
-                <div class="info-subtitle">Time Information</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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                      {{ getDeviceStatus(device.positionNameEn) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <!-- Furnace Section / 熔炉段区域 -->
+            <div class="section-area furnace-area">
+              <div class="section-header">
+                Furnace Section
+                <!-- 熔炉段 -->
+                <span class="section-info" v-if="positionData.technologySpeed">Speed: {{ positionData.technologySpeed.toFixed(1) }} m/min</span>
+                <!-- 速度 -->
+              </div>
+              <div class="section-summary" v-if="furnaceSectionMetrics.length">
+                <div class="summary-item" v-for="item in furnaceSectionMetrics" :key="item.label">
+                  <span class="summary-label">{{ item.label }}：</span>
+                  <span class="summary-value">{{ item.value }}</span>
+                </div>
+              </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                      {{ getDeviceStatus(device.positionNameEn) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <!-- Coating Section / 涂层段区域 -->
+            <div class="section-area coat-area">
+              <div class="section-header">Coating Section</div>
+              <!-- 涂层段 -->
+              <div class="section-summary" v-if="coatSectionMetrics.length">
+                <div class="summary-item" v-for="item in coatSectionMetrics" :key="item.label">
+                  <span class="summary-label">{{ item.label }}：</span>
+                  <span class="summary-value">{{ item.value }}</span>
+                </div>
+              </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                      {{ getDeviceStatus(device.positionNameEn) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <!-- Exit Section / 出口段区域 -->
+            <div class="section-area exit-area">
+              <div class="section-header">
+                Exit Section
+                <!-- 出口段 -->
+                <span class="section-info" v-if="positionData.exitSpeed">Speed: {{ positionData.exitSpeed.toFixed(1) }} m/min</span>
+                <!-- 速度 -->
+              </div>
+              <div class="section-summary" v-if="exitSectionMetrics.length">
+                <div class="summary-item" v-for="item in exitSectionMetrics" :key="item.label">
+                  <span class="summary-label">{{ item.label }}：</span>
+                  <span class="summary-value">{{ item.value }}</span>
+                </div>
+              </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': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                      {{ getDeviceStatus(device.positionNameEn) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <!-- Other Section / 其他段区域 -->
+            <div class="section-area" v-if="exitOtherDevicesList.length">
+              <div class="section-header">Other Section</div>
+              <!-- 其他段 -->
+              <div class="device-grid other-exit-grid">
+                <div v-for="device in exitOtherDevicesList" :key="device.positionNameEn" class="device-card" :class="{
+                  active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
+                  'has-data': hasMatId(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" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                      {{ getDeviceStatus(device.positionNameEn) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+  
+        <!-- 右侧：信息面板 -->
+        <el-col :span="8">
+          <div class="info-panels">
+            <!-- Production Plan List / 生产计划列表 -->
+            <div class="panel">
+              <div class="panel-title">
+                <i class="el-icon-s-order"></i> Production Plan
+                <!-- 生产计划 -->
+              </div>
+              <div class="plan-list-vertical">
+                <el-empty v-if="planQueue.length === 0" description="No production plan" :image-size="80" />
+                <!-- 暂无生产计划 -->
+                <div
+                  v-else
+                  v-for="(plan, index) in planQueue"
+                  :key="plan.id || plan.planid || index"
+                  class="plan-item-vertical"
+                  :class="getPlanItemClass(plan)"
+                  @click="selectPlan(plan)"
+                >
+                  <div class="plan-item-top">
+                    <div class="plan-order-dot" :class="getPlanOrderClass(plan.status)">{{ index + 1 }}</div>
+                    <div class="plan-title-text">
+                      <div class="plan-id">Plan ID: {{ plan.planid || '-' }}</div>
+                      <!-- 计划ID -->
+                      <div class="plan-coil">Coil ID: {{ plan.coilid || '-' }}</div>
+                      <!-- 钢卷号 -->
+                    </div>
+                    <el-tag :type="getPlanStatusTagType(plan.status)" size="mini">{{ getPlanStatusText(plan.status) }}</el-tag>
+                  </div>
+                  <div class="plan-item-bottom">
+                    <span>Steel Grade: {{ plan.steelGrade || '-' }}</span>
+                    <!-- 钢种 -->
+                    <span>Sequence: {{ plan.seqid || '-' }}</span>
+                    <!-- 顺序 -->
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <!-- Production Plan Detail / 生产计划详情 -->
+            <div class="panel" v-if="selectedPlan">
+              <div class="panel-title">
+                <i class="el-icon-document"></i> Plan Detail
+                <!-- 生产计划详情 -->
+                <el-button size="mini" type="text" icon="el-icon-close" @click="selectedPlan = null"></el-button>
+              </div>
+              <div class="plan-detail-content">
+                <!-- Position Info (if on production line) / 位置信息（如果在产线上） -->
+                <div v-if="selectedPlanPosition" class="position-alert">
+                  <div class="position-icon">
+                    <i class="el-icon-location"></i>
+                  </div>
+                  <div class="position-info">
+                    <div class="position-label">Current Position</div>
+                    <!-- 当前位置 -->
+                    <div class="position-name">{{ selectedPlanPosition.positionNameCn }}</div>
+                    <div class="position-code">{{ selectedPlanPosition.positionNameEn }}</div>
+                  </div>
+                </div>
+                
                 <el-descriptions :column="1" border size="small">
-                  <el-descriptions-item label="Online Time" v-if="selectedPlan.onlineDate">
-                    <!-- 上线时间 -->
-                    {{ formatDateTime(selectedPlan.onlineDate) }}
+                  <el-descriptions-item label="Plan ID">{{ selectedPlan.planid || '-' }}</el-descriptions-item>
+                  <!-- 计划ID -->
+                  <el-descriptions-item label="Coil ID">{{ selectedPlan.coilid || '-' }}</el-descriptions-item>
+                  <!-- 钢卷号 -->
+                  <el-descriptions-item label="Sequence">{{ selectedPlan.seqid || '-' }}</el-descriptions-item>
+                  <!-- 顺序号 -->
+                  <el-descriptions-item label="Status">
+                    <!-- 状态 -->
+                    <el-tag :type="getPlanStatusTagType(selectedPlan.status)" size="small" effect="dark">
+                      {{ getPlanStatusText(selectedPlan.status) }}
+                    </el-tag>
                   </el-descriptions-item>
-                  <el-descriptions-item label="Start Time" v-if="selectedPlan.startDate">
-                    <!-- 开始时间 -->
-                    {{ formatDateTime(selectedPlan.startDate) }}
+                  <el-descriptions-item label="Steel Grade">{{ selectedPlan.steelGrade || '-' }}</el-descriptions-item>
+                  <!-- 钢种 -->
+                  <el-descriptions-item label="Entry Thickness">
+                    <!-- 入口厚度 -->
+                    {{ selectedPlan.entryThick ? selectedPlan.entryThick + ' mm' : '-' }}
                   </el-descriptions-item>
-                  <el-descriptions-item label="End Time" v-if="selectedPlan.endDate">
-                    <!-- 结束时间 -->
-                    {{ formatDateTime(selectedPlan.endDate) }}
+                  <el-descriptions-item label="Entry Width">
+                    <!-- 入口宽度 -->
+                    {{ selectedPlan.entryWidth ? selectedPlan.entryWidth + ' mm' : '-' }}
                   </el-descriptions-item>
+                  <el-descriptions-item label="Entry Weight">
+                    <!-- 入口重量 -->
+                    {{ selectedPlan.entryWeight ? selectedPlan.entryWeight + ' t' : '-' }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="Entry Length">
+                    <!-- 入口长度 -->
+                    {{ selectedPlan.entryLength ? selectedPlan.entryLength + ' mm' : '-' }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="Order No">{{ selectedPlan.orderNo || '-' }}</el-descriptions-item>
+                  <!-- 订单号 -->
+                  <el-descriptions-item label="Unit Code">{{ selectedPlan.unitCode || '-' }}</el-descriptions-item>
+                  <!-- 机组号 -->
+                  <el-descriptions-item label="Plan Type">{{ selectedPlan.planType || '-' }}</el-descriptions-item>
+                  <!-- 计划类型 -->
                 </el-descriptions>
-              </div>
-            </div>
-          </div>
-
-          <!-- Recent Operation Signal / 最近操作信号 -->
-          <div class="panel" v-if="signalData">
-            <div class="panel-title">
-              <i class="el-icon-bell"></i> Recent Operation
-              <!-- 最近操作 -->
-              <el-tag 
-                :type="getOperationTagType(signalData.operation)" 
-                size="mini" 
-                effect="dark">
-                {{ getOperationConfig(signalData.operation).icon }} {{ getOperationText(signalData.operation) }}
-              </el-tag>
-            </div>
-            <div class="signal-info" :class="getSignalPanelClass(signalData.operation)">
-              <el-tag :type="signalData.autoFlag === 1 ? 'warning' : 'info'" size="small">
-                {{ signalData.autoFlag === 1 ? 'Manual' : 'Auto' }}
-                <!-- {{ signalData.autoFlag === 1 ? '手动操作' : '自动操作' }} -->
-              </el-tag>
-              <div class="signal-detail">
-                <div><strong>Operation Type:</strong> 
-                  <!-- 操作类型 -->
-                  <span :class="getOperationTextClass(signalData.operation)">
-                    {{ getOperationText(signalData.operation) }}
-                  </span>
-                </div>
-                <div><strong>Coil ID:</strong> {{ producingCoilId || signalData.entryMatId || '-' }}</div>
-                <!-- 钢卷号 -->
-                <div><strong>Plan ID:</strong> {{ signalData.planId || '-' }}</div>
-                <!-- 计划ID -->
-                <div v-if="signalData.porIdx !== null && signalData.porIdx !== undefined">
-                  <strong>Pay-off Reel:</strong> {{ signalData.porIdx }}
-                  <!-- 开卷机 -->
-                </div>
-                <div v-if="signalData.trIdx !== null && signalData.trIdx !== undefined">
-                  <strong>Take-up Reel:</strong> {{ signalData.trIdx }}
-                  <!-- 卷取机 -->
-                </div>
-                <div v-if="signalData.virtualPlanFlag">
-                  <el-tag type="danger" size="mini">Virtual Coil</el-tag>
-                  <!-- 虚拟卷 -->
+                
+                <!-- Time Information / 时间信息 -->
+                <div class="plan-time-info" v-if="selectedPlan.onlineDate || selectedPlan.startDate || selectedPlan.endDate">
+                  <div class="info-subtitle">Time Information</div>
+                  <!-- 时间信息 -->
+                  <el-descriptions :column="1" border size="small">
+                    <el-descriptions-item label="Online Time" v-if="selectedPlan.onlineDate">
+                      <!-- 上线时间 -->
+                      {{ formatDateTime(selectedPlan.onlineDate) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="Start Time" v-if="selectedPlan.startDate">
+                      <!-- 开始时间 -->
+                      {{ formatDateTime(selectedPlan.startDate) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="End Time" v-if="selectedPlan.endDate">
+                      <!-- 结束时间 -->
+                      {{ formatDateTime(selectedPlan.endDate) }}
+                    </el-descriptions-item>
+                  </el-descriptions>
                 </div>
               </div>
             </div>
-          </div>
-          <!-- Operation Buttons / 操作按钮 -->
-          <div class="panel">
-            <div class="panel-title">Operations</div>
-            <!-- 操作 -->
-            <div class="btn-list">
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">Coil Online</el-button>
-              <!-- 钢卷上线 -->
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">Manual Unload</el-button>
-              <!-- 手动卸卷 -->
-              <el-button class="action-btn" size="small"
-                @click="handleOperate(selectedCard, 'ALL_RETURN')">Full Return</el-button>
-              <!-- 整卷回退 -->
-              <el-button class="action-btn" size="small"
-                @click="handleOperate(selectedCard, 'HALF_RETURN')">Half Return</el-button>
-              <!-- 半卷回退 -->
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">Unload & Block</el-button>
-              <!-- 卸卷并封闭 -->
+  
+            <!-- Recent Operation Signal / 最近操作信号 -->
+            <div class="panel" v-if="signalData">
+              <div class="panel-title">
+                <i class="el-icon-bell"></i> Recent Operation
+                <!-- 最近操作 -->
+                <el-tag 
+                  :type="getOperationTagType(signalData.operation)" 
+                  size="mini" 
+                  effect="dark">
+                  {{ getOperationConfig(signalData.operation).icon }} {{ getOperationText(signalData.operation) }}
+                </el-tag>
+              </div>
+              <div class="signal-info" :class="getSignalPanelClass(signalData.operation)">
+                <el-tag :type="signalData.autoFlag === 1 ? 'warning' : 'info'" size="small">
+                  {{ signalData.autoFlag === 1 ? 'Manual' : 'Auto' }}
+                  <!-- {{ signalData.autoFlag === 1 ? '手动操作' : '自动操作' }} -->
+                </el-tag>
+                <div class="signal-detail">
+                  <div><strong>Operation Type:</strong> 
+                    <!-- 操作类型 -->
+                    <span :class="getOperationTextClass(signalData.operation)">
+                      {{ getOperationText(signalData.operation) }}
+                    </span>
+                  </div>
+                  <div><strong>Coil ID:</strong> {{ producingCoilId || signalData.entryMatId || '-' }}</div>
+                  <!-- 钢卷号 -->
+                  <div><strong>Plan ID:</strong> {{ signalData.planId || '-' }}</div>
+                  <!-- 计划ID -->
+                  <div v-if="signalData.porIdx !== null && signalData.porIdx !== undefined">
+                    <strong>Pay-off Reel:</strong> {{ signalData.porIdx }}
+                    <!-- 开卷机 -->
+                  </div>
+                  <div v-if="signalData.trIdx !== null && signalData.trIdx !== undefined">
+                    <strong>Take-up Reel:</strong> {{ signalData.trIdx }}
+                    <!-- 卷取机 -->
+                  </div>
+                  <div v-if="signalData.virtualPlanFlag">
+                    <el-tag type="danger" size="mini">Virtual Coil</el-tag>
+                    <!-- 虚拟卷 -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Operation Buttons / 操作按钮 -->
+            <div class="panel">
+              <div class="panel-title">Operations</div>
+              <!-- 操作 -->
+              <div class="btn-list">
+                <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">Coil Online</el-button>
+                <!-- 钢卷上线 -->
+                <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">Manual Unload</el-button>
+                <!-- 手动卸卷 -->
+                <el-button class="action-btn" size="small"
+                  @click="handleOperate(selectedCard, 'ALL_RETURN')">Full Return</el-button>
+                <!-- 整卷回退 -->
+                <el-button class="action-btn" size="small"
+                  @click="handleOperate(selectedCard, 'HALF_RETURN')">Half Return</el-button>
+                <!-- 半卷回退 -->
+                <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">Unload & Block</el-button>
+                <!-- 卸卷并封闭 -->
+              </div>
+            </div>
+            <!-- Device Basic Info / 设备基本信息 -->
+            <div class="panel" v-if="selectedCard">
+              <div class="panel-title">Basic Info</div>
+              <!-- 基本信息 -->
+              <table class="info-table">
+                <tr>
+                  <td>Position Name</td>
+                  <!-- 位置名称 -->
+                  <td>{{ selectedCard.positionNameCn || '-' }}</td>
+                </tr>
+                <tr>
+                  <td>Position Code</td>
+                  <!-- 位置代号 -->
+                  <td>{{ selectedCard.positionNameEn || '-' }}</td>
+                </tr>
+                <tr>
+                  <td>Coil ID</td>
+                  <!-- 钢卷号 -->
+                  <td>{{ selectedCard.matId || '-' }}</td>
+                </tr>
+                <tr>
+                  <td>Plan ID</td>
+                  <!-- 计划ID -->
+                  <td>{{ selectedCard.planId || '-' }}</td>
+                </tr>
+                <tr>
+                  <td>Plan No</td>
+                  <!-- 计划号 -->
+                  <td>{{ selectedCard.planNo || '-' }}</td>
+                </tr>
+              </table>
+            </div>
+  
+            <!-- 设备实时数据 -->
+  
+            <div class="panel">
+  
+              <!-- Adjustment Tool: Select two positions with two dropdowns / 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
+              <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
+                <el-form-item label="Current Position" prop="current">
+                  <!-- 当前位置 -->
+                  <el-select v-model="adjustForm.current" placeholder="Please select current position">
+                    <!-- 请选择当前位置 -->
+                    <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="Target Position" prop="target">
+                  <!-- 目标位置 -->
+                  <el-select v-model="adjustForm.target" placeholder="Please select target position">
+                    <!-- 请选择目标位置 -->
+                    <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">Confirm Adjustment</el-button>
+              <!-- 确认调整 -->
             </div>
           </div>
-          <!-- Device Basic Info / 设备基本信息 -->
-          <div class="panel" v-if="selectedCard">
-            <div class="panel-title">Basic Info</div>
-            <!-- 基本信息 -->
-            <table class="info-table">
-              <tr>
-                <td>Position Name</td>
-                <!-- 位置名称 -->
-                <td>{{ selectedCard.positionNameCn || '-' }}</td>
-              </tr>
-              <tr>
-                <td>Position Code</td>
-                <!-- 位置代号 -->
-                <td>{{ selectedCard.positionNameEn || '-' }}</td>
-              </tr>
-              <tr>
-                <td>Coil ID</td>
-                <!-- 钢卷号 -->
-                <td>{{ selectedCard.matId || '-' }}</td>
-              </tr>
-              <tr>
-                <td>Plan ID</td>
-                <!-- 计划ID -->
-                <td>{{ selectedCard.planId || '-' }}</td>
-              </tr>
-              <tr>
-                <td>Plan No</td>
-                <!-- 计划号 -->
-                <td>{{ selectedCard.planNo || '-' }}</td>
-              </tr>
-            </table>
-          </div>
-
-          <!-- 设备实时数据 -->
-
-          <div class="panel">
-
-            <!-- Adjustment Tool: Select two positions with two dropdowns / 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
-            <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
-              <el-form-item label="Current Position" prop="current">
-                <!-- 当前位置 -->
-                <el-select v-model="adjustForm.current" placeholder="Please select current position">
-                  <!-- 请选择当前位置 -->
-                  <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="Target Position" prop="target">
-                <!-- 目标位置 -->
-                <el-select v-model="adjustForm.target" placeholder="Please select target position">
-                  <!-- 请选择目标位置 -->
-                  <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">Confirm Adjustment</el-button>
-            <!-- 确认调整 -->
-          </div>
-        </div>
-
-      </el-col>
-    </el-row>
-
-    <!-- Calculation Setup Result Dialog / 计算结果对话框 -->
-    <el-dialog
-      title="Calculation Setup Result"
-      :visible.sync="showCalcResultDialog"
-      width="80%"
-      v-if="calcSetupResult"
-    >
-      <div class="calc-result-header">
-        <el-tag :type="calcSetupResult.flag ? 'success' : 'danger'">
-          {{ calcSetupResult.flag ? 'Calculation Success' : 'Calculation Failed' }}
-          <!-- {{ calcSetupResult.flag ? '计算成功' : '计算失败' }} -->
-        </el-tag>
-        <span>Key: {{ calcSetupResult.key }}</span>
-      </div>
-      <el-table
-        v-if="calcSetupResult.flag && calcSetupResult.lists && calcSetupResult.lists.length > 0"
-        :data="calcSetupResult.lists"
-        border
-        stripe
-        max-height="500"
+  
+        </el-col>
+      </el-row>
+  
+      <!-- Calculation Setup Result Dialog / 计算结果对话框 -->
+      <el-dialog
+        title="Calculation Setup Result"
+        :visible.sync="showCalcResultDialog"
+        width="80%"
+        v-if="calcSetupResult"
       >
-        <el-table-column prop="passno" label="Pass No" width="80" fixed></el-table-column>
-        <!-- 道次号 -->
-        <el-table-column prop="entryThick" label="Entry Thickness (mm)" width="120"></el-table-column>
-        <!-- 入口厚度 -->
-        <el-table-column prop="exitThick" label="Exit Thickness (mm)" width="120"></el-table-column>
-        <!-- 出口厚度 -->
-        <el-table-column prop="reduction" label="Reduction (%)" width="100"></el-table-column>
-        <!-- 压下率 -->
-        <el-table-column prop="rollSpeed" label="Roll Speed" width="120"></el-table-column>
-        <!-- 轧制速度 -->
-        <el-table-column prop="rollForce" label="Roll Force (kN)" width="120"></el-table-column>
-        <!-- 轧制力 -->
-        <el-table-column prop="entryTension" label="Entry Tension" width="120"></el-table-column>
-        <!-- 入口张力 -->
-        <el-table-column prop="exitTension" label="Exit Tension" width="120"></el-table-column>
-        <!-- 出口张力 -->
-      </el-table>
-      <div v-else class="empty-msg">No calculation result data</div>
-      <!-- 无计算结果数据 -->
-    </el-dialog>
-
-    <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
-      <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
-        <el-form-item label="Pay-off Reel No" prop="porIdx">
-          <!-- 开卷机编号 -->
-          <el-input v-model="operateMatForm.porIdx"></el-input>
-        </el-form-item>
-        <el-form-item label="Take-up Reel No" prop="trIdx">
-          <!-- 卷取机编号 -->
-          <el-input v-model="operateMatForm.trIdx"></el-input>
-        </el-form-item>
-        <el-form-item label="Plan ID" prop="planId">
-          <!-- 计划id -->
-          <el-input v-model="operateMatForm.planId" placeholder="Please enter Plan ID"></el-input>
-          <!-- 请输入计划ID -->
-        </el-form-item>
-        <el-form-item label="Coil ID" prop="entryMatId">
-          <!-- 钢卷号 -->
-          <el-input v-model="operateMatForm.entryMatId" placeholder="Please enter Coil ID"></el-input>
-          <!-- 请输入钢卷号 -->
-        </el-form-item>
-        <el-form-item label="Operation Type" prop="operation">
-          <!-- 操作类型 -->
-          <el-select v-model="operateMatForm.operation" disabled>
-            <el-option label="Coil Online" value="ONLINE"></el-option>
-            <!-- 钢卷上线 -->
-            <el-option label="Manual Unload" value="UNLOAD"></el-option>
-            <!-- 手动卸卷 -->
-            <el-option label="Full Return" value="ALL_RETURN"></el-option>
-            <!-- 整卷回退 -->
-            <el-option label="Half Return" value="HALF_RETURN"></el-option>
-            <!-- 半卷回退 -->
-            <el-option label="Unload & Block" value="BLOCK"></el-option>
-            <!-- 卸卷并封闭 -->
-          </el-select>
-        </el-form-item>
-
-        <!-- Return Related Fields / 回退相关字段 -->
-        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
-          <el-form-item label="Return Coil ID" prop="returnMatId">
-            <!-- 回退卷号 -->
-            <el-input v-model="operateMatForm.returnMatId" placeholder="Please enter Return Coil ID"></el-input>
-            <!-- 请输入回退卷号 -->
+        <div class="calc-result-header">
+          <el-tag :type="calcSetupResult.flag ? 'success' : 'danger'">
+            {{ calcSetupResult.flag ? 'Calculation Success' : 'Calculation Failed' }}
+            <!-- {{ calcSetupResult.flag ? '计算成功' : '计算失败' }} -->
+          </el-tag>
+          <span>Key: {{ calcSetupResult.key }}</span>
+        </div>
+        <el-table
+          v-if="calcSetupResult.flag && calcSetupResult.lists && calcSetupResult.lists.length > 0"
+          :data="calcSetupResult.lists"
+          border
+          stripe
+          max-height="500"
+        >
+          <el-table-column prop="passno" label="Pass No" width="80" fixed></el-table-column>
+          <!-- 道次号 -->
+          <el-table-column prop="entryThick" label="Entry Thickness (mm)" width="120"></el-table-column>
+          <!-- 入口厚度 -->
+          <el-table-column prop="exitThick" label="Exit Thickness (mm)" width="120"></el-table-column>
+          <!-- 出口厚度 -->
+          <el-table-column prop="reduction" label="Reduction (%)" width="100"></el-table-column>
+          <!-- 压下率 -->
+          <el-table-column prop="rollSpeed" label="Roll Speed" width="120"></el-table-column>
+          <!-- 轧制速度 -->
+          <el-table-column prop="rollForce" label="Roll Force (kN)" width="120"></el-table-column>
+          <!-- 轧制力 -->
+          <el-table-column prop="entryTension" label="Entry Tension" width="120"></el-table-column>
+          <!-- 入口张力 -->
+          <el-table-column prop="exitTension" label="Exit Tension" width="120"></el-table-column>
+          <!-- 出口张力 -->
+        </el-table>
+        <div v-else class="empty-msg">No calculation result data</div>
+        <!-- 无计算结果数据 -->
+      </el-dialog>
+  
+      <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
+        <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
+          <el-form-item label="Pay-off Reel No" prop="porIdx">
+            <!-- 开卷机编号 -->
+            <el-input v-model="operateMatForm.porIdx"></el-input>
           </el-form-item>
-          <el-form-item label="Return Weight" prop="returnWeight">
-            <!-- 回退重量 -->
-            <el-input v-model="operateMatForm.returnWeight" placeholder="Please enter Return Weight"></el-input>
-            <!-- 请输入回退重量 -->
+          <el-form-item label="Take-up Reel No" prop="trIdx">
+            <!-- 卷取机编号 -->
+            <el-input v-model="operateMatForm.trIdx"></el-input>
           </el-form-item>
-          <el-form-item label="Return Remark" prop="returnRemark">
-            <!-- 回退备注 -->
-            <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
+          <el-form-item label="Plan ID" prop="planId">
+            <!-- 计划id -->
+            <el-input v-model="operateMatForm.planId" placeholder="Please enter Plan ID"></el-input>
+            <!-- 请输入计划ID -->
           </el-form-item>
-        </template>
-
-        <!-- Output Length Fields / 产出长度字段 -->
-        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
-          <el-form-item label="Output Coil Length" prop="coilLength">
-            <!-- 产出钢卷长度 -->
-            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="Please enter Output Coil Length"></el-input>
-            <!-- 请输入产出钢卷长度 -->
+          <el-form-item label="Coil ID" prop="entryMatId">
+            <!-- 钢卷号 -->
+            <el-input v-model="operateMatForm.entryMatId" placeholder="Please enter Coil ID"></el-input>
+            <!-- 请输入钢卷号 -->
           </el-form-item>
-        </template>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="operateMatStatus = false">Cancel</el-button>
-        <!-- 取消 -->
-        <el-button type="primary" @click="submitOperateForm">Confirm</el-button>
-        <!-- 确定 -->
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
+          <el-form-item label="Operation Type" prop="operation">
+            <!-- 操作类型 -->
+            <el-select v-model="operateMatForm.operation" disabled>
+              <el-option label="Coil Online" value="ONLINE"></el-option>
+              <!-- 钢卷上线 -->
+              <el-option label="Manual Unload" value="UNLOAD"></el-option>
+              <!-- 手动卸卷 -->
+              <el-option label="Full Return" value="ALL_RETURN"></el-option>
+              <!-- 整卷回退 -->
+              <el-option label="Half Return" value="HALF_RETURN"></el-option>
+              <!-- 半卷回退 -->
+              <el-option label="Unload & Block" value="BLOCK"></el-option>
+              <!-- 卸卷并封闭 -->
+            </el-select>
+          </el-form-item>
+  
+          <!-- Return Related Fields / 回退相关字段 -->
+          <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
+            <el-form-item label="Return Coil ID" prop="returnMatId">
+              <!-- 回退卷号 -->
+              <el-input v-model="operateMatForm.returnMatId" placeholder="Please enter Return Coil ID"></el-input>
+              <!-- 请输入回退卷号 -->
+            </el-form-item>
+            <el-form-item label="Return Weight" prop="returnWeight">
+              <!-- 回退重量 -->
+              <el-input v-model="operateMatForm.returnWeight" placeholder="Please enter Return Weight"></el-input>
+              <!-- 请输入回退重量 -->
+            </el-form-item>
+            <el-form-item label="Return Remark" prop="returnRemark">
+              <!-- 回退备注 -->
+              <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
+            </el-form-item>
+          </template>
+  
+          <!-- Output Length Fields / 产出长度字段 -->
+          <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
+            <el-form-item label="Output Coil Length" prop="coilLength">
+              <!-- 产出钢卷长度 -->
+              <el-input v-model="operateMatForm.coilLength" type="number" placeholder="Please enter Output Coil Length"></el-input>
+              <!-- 请输入产出钢卷长度 -->
+            </el-form-item>
+          </template>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="operateMatStatus = false">Cancel</el-button>
+          <!-- 取消 -->
+          <el-button type="primary" @click="submitOperateForm">Confirm</el-button>
+          <!-- 确定 -->
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import LatestSetValues from './components/LatestSetValues.vue'
+  import FloatingPanel from '@/components/FloatingPanel.vue'
 import { adjustPosition, getTrackMatPosition, operateMat, getBackData, getPlanQueue } from '@/api/l2/track'
-import wsManager from '@/utils/websocketManager'
-
-// Device metadata mapping based on backend DeviceEnum (section, source, parameter fields)
-// 基于后端 DeviceEnum 的前端映射（区域、来源、参数字段）
-const DEVICE_META = {
-  POR1: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr1', 'stripSpeed'] },
-  POR2: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr2', 'stripSpeed'] },
-  WELDER: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['weldStatus'] },
-  ENL1: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
-  ENL2: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
-  ENL3: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
-
-  CLEAN: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature'] },
-  FUR1: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['phfExitStripTemp', 'potTemperature', 'gasConsumption'] },
-  FUR2: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['rtfExitStripTemp', 'zincPotPower'] },
-  FUR3: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['jcsExitStripTemp', 'coolingTowerStripTemp'] },
-  FUR4: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['scsExitStripTemp'] },
-  POT: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
-  TOWER: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
-  TM: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tensionBr5Tm', 'stripSpeedTmExit'] },
-  TL: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tlElongation', 'tensionTlBr7'] },
-  COAT: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: [
-    'avrCoatingWeightTop','stdCoatingWeightTop','maxCoatingWeightTop','minCoatingWeightTop',
-    'avrCoatingWeightBottom','stdCoatingWeightBottom','maxCoatingWeightBottom','minCoatingWeightBottom',
-    'airKnifePressure','airKnifeFlow','airKnifeGap','stripSpeedTmExit','tensionBr8Tm',
-    'tensionTmBr9','tensionBr8Br9','tmMask','tmElongation','rollForceOperator','rollForceDrive',
-    'motorTorque','bendingForce','antiCrimpingRollMesh','billyRollMesh',
-    'tensionTlBr10Br11','tensionBr9toBr10Br11','tlFlag','tlElongation','levelingUnit1Mesh','levelingUnit2Mesh',
-    'antiCrossBowUnitMesh','tensionBr10Br11toBr12','stripSpeedAfp','stripTempAfp'
-  ] },
-
-  CXL1: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
-  CXL2: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
-  TR: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['coilLength', 'speedExitSection', 'tensionBr9Tr'] },
-  EXC: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] },
-  WEIGHT: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] }
-}
-
-// Parameter field labels (English with Chinese comments)
-// 参数字段标签（英文显示，中文注释）
-const PARAM_LABELS = {
-  tensionPorBr1: 'Tension POR-BR1', // 开卷张力1#
-  tensionPorBr2: 'Tension POR-BR2', // 开卷张力2#
-  stripSpeed: 'Strip Speed', // 带钢速度
-  weldStatus: 'Weld Status', // 焊机状态
-  celLength: 'Entry Loop Length', // 入口活套位置
-  celCapacity: 'Entry Loop Capacity', // 入口活套套量
-  tensionCel: 'Entry Loop Tension', // 入口活套张力
-  celLengthMax: 'Entry Loop Max Length', // 入口活套最大长度
-  celLengthMin: 'Entry Loop Min Length', // 入口活套最小长度
-  bR4or5toBR6Tension: 'Tension BR4/5-BR6', // BR4/5到BR6张力
-  cleaningVoltage: 'Cleaning Voltage', // 清洗电压
-  cleaningCurrent: 'Cleaning Current', // 清洗电流
-  alkaliConcentration: 'Alkali Concentration', // 碱液浓度
-  alkaliTemperature: 'Alkali Temperature', // 碱液温度
-  phfExitStripTemp: 'PH Exit Strip Temp', // PH炉出口温度
-  potTemperature: 'Pot Temperature', // 锌锅温度
-  gasConsumption: 'Gas Consumption', // 燃气消耗
-  rtfExitStripTemp: 'RTF Exit Strip Temp', // RTF炉出口温度
-  zincPotPower: 'Zinc Pot Power', // 锌锅功率
-  jcsExitStripTemp: 'JCS Exit Strip Temp', // 冷却段出口温度
-  coolingTowerStripTemp: 'Cooling Tower Temp', // 冷却塔温度
-  scsExitStripTemp: 'SCS Exit Strip Temp', // 均衡段出口温度
-  tensionBr5Tm: 'Tension BR5-TM', // BR5-TM张力
-  stripSpeedTmExit: 'TM Exit Speed', // TM出口速度
-  tmElongation: 'TM Elongation', // 光整延伸率
-  tensionTlBr7: 'Tension TL-BR7', // TL-BR7张力
-  tensionTlBr10Br11: 'Tension TL-BR10/11', // TL-BR10/11张力
-  tlElongation: 'TL Elongation', // 拉矫延伸率
-  tlFlag: 'TL Flag', // 拉矫机投用标志
-  cxlLength: 'Exit Loop Length', // 出口活套位置
-  cxlCapacity: 'Exit Loop Capacity', // 出口活套套量
-  tensionCxl: 'Exit Loop Tension', // 出口活套张力
-  coilLength: 'Coil Length', // 钢卷长度
-  speedExitSection: 'Exit Section Speed', // 出口段速度
-  tensionBr9Tr: 'Tension BR9-TR', // BR9-TR张力
-  tensionBr8Tm: 'Tension BR8-TM', // BR8-TM张力
-  tensionTmBr9: 'Tension TM-BR9', // TM-BR9张力
-  tensionBr8Br9: 'Tension BR8-BR9', // BR8-BR9张力
-  tensionBr9toBr10Br11: 'Tension BR9-BR10/11', // BR9到BR10/11张力
-  tensionBr10Br11toBr12: 'Tension BR10/11-BR12', // BR10/11到BR12张力
-  avrCoatingWeightTop: 'Avg Coating Weight Top', // 顶部平均涂层重量
-  stdCoatingWeightTop: 'Std Coating Weight Top', // 顶部标准涂层重量
-  maxCoatingWeightTop: 'Max Coating Weight Top', // 顶部最大涂层重量
-  minCoatingWeightTop: 'Min Coating Weight Top', // 顶部最小涂层重量
-  avrCoatingWeightBottom: 'Avg Coating Weight Bottom', // 底部平均涂层重量
-  stdCoatingWeightBottom: 'Std Coating Weight Bottom', // 底部标准涂层重量
-  maxCoatingWeightBottom: 'Max Coating Weight Bottom', // 底部最大涂层重量
-  minCoatingWeightBottom: 'Min Coating Weight Bottom', // 底部最小涂层重量
-  airKnifePressure: 'Air Knife Pressure', // 气刀压力
-  airKnifeFlow: 'Air Knife Flow', // 气刀流量
-  airKnifeGap: 'Air Knife Gap', // 气刀间隙
-  tmMask: 'TM Mask', // TM掩码
-  rollForceOperator: 'Roll Force Operator', // 操作侧辊压力
-  rollForceDrive: 'Roll Force Drive', // 驱动侧辊压力
-  motorTorque: 'Motor Torque', // 电机扭矩
-  bendingForce: 'Bending Force', // 总弯曲力
-  antiCrimpingRollMesh: 'Anti-Crimping Roll Mesh', // 防卷翘辊网距
-  billyRollMesh: 'Billy Roll Mesh', // Billy Roll网距
-  levelingUnit1Mesh: 'Leveling Unit 1 Mesh', // 矫直单元1网距
-  levelingUnit2Mesh: 'Leveling Unit 2 Mesh', // 矫直单元2网距
-  antiCrossBowUnitMesh: 'Anti Cross-Bow Unit Mesh', // 防横弯单元网距
-  stripSpeedAfp: 'AFP Strip Speed', // AFP段钢带速度
-  stripTempAfp: 'AFP Strip Temp' // AFP段钢带温度
-}
-
-const FIELD_ALIASES = {
-  phfExitStripTemp: ['phFurnaceTemperatureActual', 'phFurnaceTemperature'],
-  rtfExitStripTemp: ['nof1FurnaceTemperatureActual', 'nof1FurnaceTemperatureSet'],
-  jcsExitStripTemp: ['jcsExitStripTemp'],
-  scsExitStripTemp: ['scsExitStripTemp'],
-  potTemperature: ['potTemperature'],
-  zincPotPower: ['zincPotPower'],
-  gasConsumption: ['gasConsumption'],
-  coolingTowerStripTemp: ['coolingTowerTemperature', 'coolingTowerStripTemp'],
-  cleaningVoltage: ['cleaningVoltage'],
-  cleaningCurrent: ['cleaningCurrent'],
-  alkaliConcentration: ['alkaliConcentration'],
-  alkaliTemperature: ['alkaliTemperature']
-}
-
-const CLEANING_FIELDS = new Set(['cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature'])
-
-export default {
-  data() {
-    return {
-      // WebSocket 连接状态
-      socketStatus: {
-        measure: false,
-        position: false,
-        signal: false,
-        matmap: false,
-        calcSetup: false
-      },
-      matMapList: [],
-      selectedCard: null,
-      
-      // 实时测量数据（track_measure）
-      realtimeData: {
-        entry: null,
-        furnace: null,
-        coat: null,
-        exit: null
-      },
-      
-      // 位置追踪数据（track_position）
-      positionData: {
-        coilStripLocationList: [],
-        entryLoopLen: 0,
-        exitLoopLen: 0,
-        entryLoopPer: 0,
-        exitLoopLPer: 0,
-        porId: null,
-        trId: null,
-        entrySpeed: 0,
-        technologySpeed: 0,
-        exitSpeed: 0,
+import { getDriveSetupValue, getFurnaceSetupValue } from '@/api/l2/setupValue'
+  import wsManager from '@/utils/websocketManager'
+  
+  // Device metadata mapping based on backend DeviceEnum (section, source, parameter fields)
+  // 基于后端 DeviceEnum 的前端映射（区域、来源、参数字段）
+  const DEVICE_META = {
+    POR1: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr1', 'stripSpeed'] },
+    POR2: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['tensionPorBr2', 'stripSpeed'] },
+    WELDER: { sectionType: 'ENTRY', sourceType: 'ENTRY', paramFields: ['weldStatus'] },
+    ENL1: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+    ENL2: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+    ENL3: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel', 'celLengthMax', 'celLengthMin', 'bR4or5toBR6Tension'] },
+  
+    CLEAN: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature'] },
+    FUR1: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['phfExitStripTemp', 'potTemperature', 'gasConsumption'] },
+    FUR2: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['rtfExitStripTemp', 'zincPotPower'] },
+    FUR3: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['jcsExitStripTemp', 'coolingTowerStripTemp'] },
+    FUR4: { sectionType: 'PROCESS', sourceType: 'FURNACE', paramFields: ['scsExitStripTemp'] },
+    POT: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
+    TOWER: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['scsExitStripTemp'] },
+    TM: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tensionBr5Tm', 'stripSpeedTmExit'] },
+    TL: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: ['tlElongation', 'tensionTlBr7'] },
+    COAT: { sectionType: 'PROCESS', sourceType: 'COAT', paramFields: [
+      'avrCoatingWeightTop','stdCoatingWeightTop','maxCoatingWeightTop','minCoatingWeightTop',
+      'avrCoatingWeightBottom','stdCoatingWeightBottom','maxCoatingWeightBottom','minCoatingWeightBottom',
+      'airKnifePressure','airKnifeFlow','airKnifeGap','stripSpeedTmExit','tensionBr8Tm',
+      'tensionTmBr9','tensionBr8Br9','tmMask','tmElongation','rollForceOperator','rollForceDrive',
+      'motorTorque','bendingForce','antiCrimpingRollMesh','billyRollMesh',
+      'tensionTlBr10Br11','tensionBr9toBr10Br11','tlFlag','tlElongation','levelingUnit1Mesh','levelingUnit2Mesh',
+      'antiCrossBowUnitMesh','tensionBr10Br11toBr12','stripSpeedAfp','stripTempAfp'
+    ] },
+  
+    CXL1: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
+    CXL2: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
+    TR: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['coilLength', 'speedExitSection', 'tensionBr9Tr'] },
+    EXC: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] },
+    WEIGHT: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] }
+  }
+  
+  // Parameter field labels (English with Chinese comments)
+  // 参数字段标签（英文显示，中文注释）
+  const PARAM_LABELS = {
+    tensionPorBr1: 'Tension POR-BR1', // 开卷张力1#
+    tensionPorBr2: 'Tension POR-BR2', // 开卷张力2#
+    stripSpeed: 'Strip Speed', // 带钢速度
+    weldStatus: 'Weld Status', // 焊机状态
+    celLength: 'Entry Loop Length', // 入口活套位置
+    celCapacity: 'Entry Loop Capacity', // 入口活套套量
+    tensionCel: 'Entry Loop Tension', // 入口活套张力
+    celLengthMax: 'Entry Loop Max Length', // 入口活套最大长度
+    celLengthMin: 'Entry Loop Min Length', // 入口活套最小长度
+    bR4or5toBR6Tension: 'Tension BR4/5-BR6', // BR4/5到BR6张力
+    cleaningVoltage: 'Cleaning Voltage', // 清洗电压
+    cleaningCurrent: 'Cleaning Current', // 清洗电流
+    alkaliConcentration: 'Alkali Concentration', // 碱液浓度
+    alkaliTemperature: 'Alkali Temperature', // 碱液温度
+    phfExitStripTemp: 'PH Exit Strip Temp', // PH炉出口温度
+    potTemperature: 'Pot Temperature', // 锌锅温度
+    gasConsumption: 'Gas Consumption', // 燃气消耗
+    rtfExitStripTemp: 'RTF Exit Strip Temp', // RTF炉出口温度
+    zincPotPower: 'Zinc Pot Power', // 锌锅功率
+    jcsExitStripTemp: 'JCS Exit Strip Temp', // 冷却段出口温度
+    coolingTowerStripTemp: 'Cooling Tower Temp', // 冷却塔温度
+    scsExitStripTemp: 'SCS Exit Strip Temp', // 均衡段出口温度
+    tensionBr5Tm: 'Tension BR5-TM', // BR5-TM张力
+    stripSpeedTmExit: 'TM Exit Speed', // TM出口速度
+    tmElongation: 'TM Elongation', // 光整延伸率
+    tensionTlBr7: 'Tension TL-BR7', // TL-BR7张力
+    tensionTlBr10Br11: 'Tension TL-BR10/11', // TL-BR10/11张力
+    tlElongation: 'TL Elongation', // 拉矫延伸率
+    tlFlag: 'TL Flag', // 拉矫机投用标志
+    cxlLength: 'Exit Loop Length', // 出口活套位置
+    cxlCapacity: 'Exit Loop Capacity', // 出口活套套量
+    tensionCxl: 'Exit Loop Tension', // 出口活套张力
+    coilLength: 'Coil Length', // 钢卷长度
+    speedExitSection: 'Exit Section Speed', // 出口段速度
+    tensionBr9Tr: 'Tension BR9-TR', // BR9-TR张力
+    tensionBr8Tm: 'Tension BR8-TM', // BR8-TM张力
+    tensionTmBr9: 'Tension TM-BR9', // TM-BR9张力
+    tensionBr8Br9: 'Tension BR8-BR9', // BR8-BR9张力
+    tensionBr9toBr10Br11: 'Tension BR9-BR10/11', // BR9到BR10/11张力
+    tensionBr10Br11toBr12: 'Tension BR10/11-BR12', // BR10/11到BR12张力
+    avrCoatingWeightTop: 'Avg Coating Weight Top', // 顶部平均涂层重量
+    stdCoatingWeightTop: 'Std Coating Weight Top', // 顶部标准涂层重量
+    maxCoatingWeightTop: 'Max Coating Weight Top', // 顶部最大涂层重量
+    minCoatingWeightTop: 'Min Coating Weight Top', // 顶部最小涂层重量
+    avrCoatingWeightBottom: 'Avg Coating Weight Bottom', // 底部平均涂层重量
+    stdCoatingWeightBottom: 'Std Coating Weight Bottom', // 底部标准涂层重量
+    maxCoatingWeightBottom: 'Max Coating Weight Bottom', // 底部最大涂层重量
+    minCoatingWeightBottom: 'Min Coating Weight Bottom', // 底部最小涂层重量
+    airKnifePressure: 'Air Knife Pressure', // 气刀压力
+    airKnifeFlow: 'Air Knife Flow', // 气刀流量
+    airKnifeGap: 'Air Knife Gap', // 气刀间隙
+    tmMask: 'TM Mask', // TM掩码
+    rollForceOperator: 'Roll Force Operator', // 操作侧辊压力
+    rollForceDrive: 'Roll Force Drive', // 驱动侧辊压力
+    motorTorque: 'Motor Torque', // 电机扭矩
+    bendingForce: 'Bending Force', // 总弯曲力
+    antiCrimpingRollMesh: 'Anti-Crimping Roll Mesh', // 防卷翘辊网距
+    billyRollMesh: 'Billy Roll Mesh', // Billy Roll网距
+    levelingUnit1Mesh: 'Leveling Unit 1 Mesh', // 矫直单元1网距
+    levelingUnit2Mesh: 'Leveling Unit 2 Mesh', // 矫直单元2网距
+    antiCrossBowUnitMesh: 'Anti Cross-Bow Unit Mesh', // 防横弯单元网距
+    stripSpeedAfp: 'AFP Strip Speed', // AFP段钢带速度
+    stripTempAfp: 'AFP Strip Temp' // AFP段钢带温度
+  }
+  
+  const FIELD_ALIASES = {
+    phfExitStripTemp: ['phFurnaceTemperatureActual', 'phFurnaceTemperature'],
+    rtfExitStripTemp: ['nof1FurnaceTemperatureActual', 'nof1FurnaceTemperatureSet'],
+    jcsExitStripTemp: ['jcsExitStripTemp'],
+    scsExitStripTemp: ['scsExitStripTemp'],
+    potTemperature: ['potTemperature'],
+    zincPotPower: ['zincPotPower'],
+    gasConsumption: ['gasConsumption'],
+    coolingTowerStripTemp: ['coolingTowerTemperature', 'coolingTowerStripTemp'],
+    cleaningVoltage: ['cleaningVoltage'],
+    cleaningCurrent: ['cleaningCurrent'],
+    alkaliConcentration: ['alkaliConcentration'],
+    alkaliTemperature: ['alkaliTemperature']
+  }
+  
+  const CLEANING_FIELDS = new Set(['cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature'])
+  
+  export default {
+  components: { FloatingPanel, LatestSetValues },
+    data() {
+      return {
+        // WebSocket 连接状态
+        socketStatus: {
+          measure: false,
+          position: false,
+          signal: false,
+          matmap: false,
+          calcSetup: false
+        },
         matMapList: [],
+        selectedCard: null,
+
+      // 设定值（来自最近一次成功发送）
+      // 中文注释：用于在界面上与实时数据区分展示，未设定显示 '-'
+      setupValue: {
+        drive: { lastSendTime: null, values: {} },
+        furnace: { lastSendTime: null, values: {} }
       },
-      
-      // 操作信号数据（track_signal）
-      signalData: null,
-      // 上一次收到的操作类型（用于检测连续生产中）
-      lastSignalOperation: null,
-      
-      // 计算设定结果（calc_setup_result）
-      calcSetupResult: null,
-      showCalcResultDialog: false,
-      
-      // 加载状态
-      isLoading: true,
-      
-      // 计划队列tab
-      activeQueueTab: 'all',
-      
-      // 生产计划队列
-      planQueue: [],
-      
-      // 选中的生产计划
-      selectedPlan: null,
-      
-      adjustForm: {
-        current: null,
-        target: null
-      },
-      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()
+        
+        // 实时测量数据（track_measure）
+        realtimeData: {
+          entry: null,
+          furnace: null,
+          coat: null,
+          exit: null
+        },
+        
+        // 位置追踪数据（track_position）
+        positionData: {
+          coilStripLocationList: [],
+          entryLoopLen: 0,
+          exitLoopLen: 0,
+          entryLoopPer: 0,
+          exitLoopLPer: 0,
+          porId: null,
+          trId: null,
+          entrySpeed: 0,
+          technologySpeed: 0,
+          exitSpeed: 0,
+          matMapList: [],
+        },
+        
+        // 操作信号数据（track_signal）
+        signalData: null,
+        // 上一次收到的操作类型（用于检测连续生产中）
+        lastSignalOperation: null,
+        
+        // 计算设定结果（calc_setup_result）
+        calcSetupResult: null,
+        showCalcResultDialog: false,
+        
+        // 加载状态
+        isLoading: true,
+        
+        // 计划队列tab
+        activeQueueTab: 'all',
+        
+        // 生产计划队列
+        planQueue: [],
+        
+        // 选中的生产计划
+        selectedPlan: null,
+        
+        adjustForm: {
+          current: null,
+          target: null
+        },
+        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()
+          ],
+          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: {
-    // 当前计划（ONLINE 或 PRODUCING状态）
-    currentPlans() {
-      return this.planQueue.filter(plan => 
-        ['ONLINE', 'PRODUCING', 'PRODUCTING'].includes(plan.status)
-      )
-    },
-    
-    // 当前生产中的计划（取状态为生产中的首条）
-    producingPlan() {
-      return this.planQueue.find(plan => ['PRODUCING', 'PRODUCTING'].includes(plan.status))
-    },
-
-    // 当前生产中的钢卷号
-    producingCoilId() {
-      if (this.producingPlan) {
-        return this.producingPlan.coilid || this.producingPlan.matId || ''
-      }
-      return ''
-    },
-    
-    // 显示的计划列表（根据tab切换）
-    displayedPlans() {
-      if (this.activeQueueTab === 'current') {
-        return this.currentPlans
-      }
-      return this.planQueue
-    },
-    
-    // 选中计划的位置信息
-    selectedPlanPosition() {
-      if (!this.selectedPlan || !this.matMapList || this.matMapList.length === 0) {
-        return null
-      }
-      
-      // 从matMapList中查找匹配的位置
-      // matMapList中的字段是驼峰命名：planId, matId
-      // 计划对象中的字段可能是：planid, coilid
-      const position = this.matMapList.find(item => 
-        (item.planId && item.planId === this.selectedPlan.planid) ||
-        (item.planId && item.planId === this.selectedPlan.planId) ||
-        (item.matId && item.matId === this.selectedPlan.coilid) ||
-        (item.matId && item.matId === this.selectedPlan.matId)
-      )
-      
-      return position
-    },
-    
-    // Get operation title (English with Chinese comments)
-    // 获取操作标题（英文显示，中文注释）
-    getOperateTitle() {
-      const titleMap = {
-        'ONLINE': 'Coil Online', // 钢卷上线
-        'UNLOAD': 'Manual Unload', // 手动卸卷
-        'ALL_RETURN': 'Full Return', // 整卷回退
-        'HALF_RETURN': 'Half Return', // 半卷回退
-        'BLOCK': 'Unload & Block', // 卸卷并封闭
-        'THROW_TAIL': 'Throw Tail' // 甩尾
-      }
-      return titleMap[this.operateMatForm.operation] || 'Coil Operation' // 钢卷操作
-    },
-    // 分段汇总数据
-    entrySectionMetrics() {
-      return this.buildSectionMetrics('ENTRY', ['stripSpeed', 'tensionPorBr1', 'tensionPorBr2', 'celLength', 'celCapacity'])
-    },
-    furnaceSectionMetrics() {
-      return this.buildSectionMetrics('FURNACE', [
-        'cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature',
-        'phfExitStripTemp', 'rtfExitStripTemp', 'jcsExitStripTemp', 'scsExitStripTemp',
-        'potTemperature', 'zincPotPower', 'gasConsumption', 'coolingTowerStripTemp',
-        // 'LTH2FurnaceTemperatureActualValue', 'PHFurnacePressureActualValue',
-        // 'jcf1FurnaceTemperatureActual', 'jcfFan1ActualSpeed', 'jcfFan2ActualSpeed', 
-        // 'jcfFan3ActualSpeed', 'jcfFan4ActualSpeed', 'lbzFurnaceTemperatureActual',
-        // 'lthFurnaceTemperatureActual', 'nof1AirFlowActual', 'nof1FurnaceTemperatureActual', 'nof1GasFlowActual',
-        // 'nof1UtheisaKongCombustionRatioActualValue', 'nof2AirFlowActual', 'nof2FurnaceTemperatureActual', 'nof2GasFlowActual',
-        // 'nof2UtheisaKongCombustionRatioActualValue', 'nof3AirFlowActual', 'nof3FurnaceTemperatureActual', 'nof3GasFlowActual', 
-        // 'nof3UtheisaKongCombustionRatioActualValue', 'nof4AirFlowActual', 'nof4FurnaceTemperatureActual', 'nof4GasFlowActual',
-        // 'nof4UtheisaKongCombustionRatioActualValue', 'nofAirPressureActual', 'nofFurnacePressureActual', 'nofGasPressureActual',
-        // 'nofPlateTemperatureActual', 'phFurnaceTemperatureActual', 'rtf1AirFlowActual', 'rtf1FurnaceTemperatureActual',
-        // 'rtf1GasFlowActual', 'rtf2AirFlowActual', 'rtf2FurnaceTemperatureActual', 'rtf2GasFlowActual',
-        // 'rtf2UtheisaKongCombustionRatioActualValue', 'rtfAirPressureActual',
-        // 'rtfFurnacePressureActual', 'rtfGasPressureActual',
-        // 'rtfPlateTemperatureActual', 'sfAirFlowActual', 'sfFurnaceTemperatureActual',
-        // 'sfAirFlowActual', 'sfFurnaceTemperatureActual', 'sfUtheisaKongCombustionRatioActualValue',
-        // 'tdsFurnacePressureActual', 'tdsFurnaceTemperatureActual', 'tdsPlateTemperatureActual'
-      ])
-    },
-    coatSectionMetrics() {
-      return this.buildSectionMetrics('COAT', ['stripSpeedTmExit', 'avrCoatingWeightTop', 'avrCoatingWeightBottom', 'tmElongation', 'tlElongation'])
-    },
-    exitSectionMetrics() {
-      return this.buildSectionMetrics('EXIT', ['speedExitSection', 'coilLength', 'cxlLength', 'cxlCapacity', 'tensionBr9Tr'])
-    },
-    // 入口段设备列表（依据 DeviceEnum.sectionType）
-    entryDevicesList() {
-      return this.getDevicesBySection('ENTRY')
-    },
-    // 熔炉段设备列表（PROCESS 且来源 FURNACE）
-    furnaceDevicesList() {
-      return this.getDevicesBySource('FURNACE')
-    },
-    // 涂层段设备列表（PROCESS 且来源 COAT）
-    coatDevicesList() {
-      return this.getDevicesBySource('COAT')
-    },
-    // 出口段设备列表（EXIT，常规设备）
-    exitDevicesList() {
-      const exitDevices = this.getDevicesBySection('EXIT')
-      return exitDevices.filter(d => !['INS', 'EXC', 'WEIGHT'].includes(d.positionNameEn))
-    },
-    // 出口其他设备列表
-    exitOtherDevicesList() {
-      return this.getDevicesBySection('EXIT').filter(d => ['INS', 'EXC', 'WEIGHT'].includes(d.positionNameEn))
-    },
-    // 根据选中设备获取详细数据
-    currentDeviceData() {
-      if (!this.selectedCard) return []
-      const deviceId = this.selectedCard.positionNameEn
-      const meta = DEVICE_META[deviceId]
-      if (!meta) return []
-
-      // 针对开卷机/入口活套/出口活套，先校验卷号匹配
-      if (!this.matchReel(deviceId)) return []
-
-      const source = this.getRealtimeSourceData(deviceId)
-      if (!source) return []
-
-      const data = []
-      // 通用字段：按 DeviceEnum.paramFields 取值
-      meta.paramFields.forEach(field => {
-        const value = this.getFieldValueWithAlias(source, field)
-        if (value !== null && value !== undefined && value !== '') {
-          data.push({
-            label: PARAM_LABELS[field] || field,
-            value: this.formatValue(value),
-            unit: this.getFieldUnit(field)
-          })
-        }
-      })
-
-      return data
-    }
-  },
-
-  methods: {
-    // ============ 辅助：设备元数据 ============
-    getDevicesBySection(sectionType) {
-      return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sectionType === sectionType)
-    },
-    getDevicesBySource(sourceType) {
-      return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sourceType === sourceType)
-    },
-    // 判断设备是否有物料（用于绿框）
-    hasMatId(deviceId) {
-      const info = this.getDeviceInfo(deviceId)
-      return !!(info && info.matId)
-    },
-    getRealtimeSourceData(deviceId) {
-      const sourceType = DEVICE_META[deviceId]?.sourceType
-      if (!sourceType) return null
-      if (sourceType === 'ENTRY') return this.realtimeData.entry
-      if (sourceType === 'FURNACE') return this.realtimeData.furnace
-      if (sourceType === 'COAT') return this.realtimeData.coat
-      if (sourceType === 'EXIT') return this.realtimeData.exit
-      return null
-    },
-    getFieldValueWithAlias(source, field) {
-      // 兼容后端字段命名差异（如大小写、别名）
-      if (!source) return null
-      // 按别名映射
-      if (FIELD_ALIASES[field]) {
-        for (const alias of FIELD_ALIASES[field]) {
-          if (alias in source) return source[alias]
-        }
-      }
-      if (field in source) return source[field]
-      const lower = field.charAt(0).toLowerCase() + field.slice(1)
-      if (lower in source) return source[lower]
-      return null
-    },
-    getFieldUnit(field) {
-      const unitMap = {
-        stripSpeed: 'm/min',
-        stripSpeedTmExit: 'm/min',
-        stripSpeedAfp: 'm/min',
-        celLength: 'm',
-        cxlLength: 'm',
-        celCapacity: '%',
-        cxlCapacity: '%',
-        tensionPorBr1: 'daN',
-        tensionPorBr2: 'daN',
-        tensionBr5Tm: 'daN',
-        tensionTlBr7: 'daN',
-        tensionCxl: 'daN',
-        coilLength: 'm',
-        speedExitSection: 'm/min',
-        tlElongation: '%',
-        tmElongation: '%',
-        cleaningVoltage: 'V',
-        cleaningCurrent: 'A',
-        alkaliConcentration: 'g/L',
-        alkaliTemperature: '℃',
-        phfExitStripTemp: '℃',
-        rtfExitStripTemp: '℃',
-        jcsExitStripTemp: '℃',
-        scsExitStripTemp: '℃',
-        potTemperature: '℃',
-        zincPotPower: 'kW',
-        gasConsumption: 'm³/h'
-      }
-      return unitMap[field] || ''
-    },
-    getSectionSource(sectionType) {
-      if (sectionType === 'ENTRY') return this.realtimeData.entry
-      if (sectionType === 'FURNACE') return this.realtimeData.furnace
-      if (sectionType === 'COAT') return this.realtimeData.coat
-      if (sectionType === 'EXIT') return this.realtimeData.exit
-      return null
-    },
-    buildSectionMetrics(sectionType, fields) {
-      const source = this.getSectionSource(sectionType)
-      return fields.map(f => {
-        const raw = source ? this.getFieldValueWithAlias(source, f) : null
-        const unit = this.getFieldUnit(f)
-        return {
-          label: PARAM_LABELS[f] || f,
-          value: `${this.formatValue(raw)}${unit ? ' ' + unit : ''}`
-        }
-      })
-    },
-    matchReel(deviceId) {
-      if (!['POR1', 'POR2', 'ENL1', 'ENL2', 'CXL1', 'CXL2'].includes(deviceId)) return true
-      if (!this.realtimeData.entry) return false
-      const reel = this.realtimeData.entry.payOffReelNumber
-      if ((deviceId === 'POR1' || deviceId === 'ENL1' || deviceId === 'CXL1') && reel === 1) return true
-      if ((deviceId === 'POR2' || deviceId === 'ENL2' || deviceId === 'CXL2') && reel === 2) return true
-      return false
-    },
-    // ============ WebSocket 连接管理 ============
-    
-    initWebSockets() {
-      // 1. track_measure - 实时测量数据
-      wsManager.connect('track_measure', {
-        onMessage: this.processMeasureData,
-        onOpen: () => {
-          this.socketStatus.measure = true
-          console.log('✅ 测量数据连接成功')
+          ]
         },
-        onError: () => { this.socketStatus.measure = false },
-        onClose: () => { this.socketStatus.measure = false }
-      })
-
-      // 2. track_position - 钢卷位置追踪
-      wsManager.connect('track_position', {
-        onMessage: this.processPositionData,
-        onOpen: () => {
-          this.socketStatus.position = true
-          console.log('✅ 位置追踪连接成功')
-        },
-        onError: () => { this.socketStatus.position = false },
-        onClose: () => { this.socketStatus.position = false }
-      })
-
-      // 3. track_signal - 操作信号
-      wsManager.connect('track_signal', {
-        onMessage: this.processSignalData,
-        onOpen: () => {
-          this.socketStatus.signal = true
-          console.log('✅ 操作信号连接成功')
-        },
-        onError: () => { this.socketStatus.signal = false },
-        onClose: () => { this.socketStatus.signal = false }
-      })
-
-      // 4. track_matmap - 物料位置映射
-      wsManager.connect('track_matmap', {
-        onMessage: this.processMatmapData,
-        onOpen: () => {
-          this.socketStatus.matmap = true
-          console.log('✅ 物料映射连接成功')
-        },
-        onError: () => { this.socketStatus.matmap = false },
-        onClose: () => { this.socketStatus.matmap = false }
-      })
-
-      // 5. calc_setup_result - 计算设定结果
-      wsManager.connect('calc_setup_result', {
-        onMessage: this.processCalcSetupResult,
-        onOpen: () => {
-          this.socketStatus.calcSetup = true
-          console.log('✅ 计算结果连接成功')
-        },
-        onError: () => { this.socketStatus.calcSetup = false },
-        onClose: () => { this.socketStatus.calcSetup = false }
-      })
-    },
-
-    disconnectWebSockets() {
-      wsManager.disconnectAll()
-      this.socketStatus = {
-        measure: false,
-        position: false,
-        signal: false,
-        matmap: false,
-        calcSetup: false
+        operateMatStatus: false, // 操作对话框显示状态
+        returnInfo: {},
+        isLoadingReturn: false,
+        returnError: ''
       }
     },
-
-    // ============ 数据处理方法 ============
-    
-    processMeasureData(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()
-    },
-
-    processPositionData(data) {
-      this.positionData = {
-        coilStripLocationList: data.coilStripLocationList || [],
-        entryLoopLen: data.entryLoopLen || 0,
-        exitLoopLen: data.exitLoopLen || 0,
-        entryLoopPer: data.entryLoopPer || 0,
-        exitLoopLPer: data.exitLoopLPer || 0,
-        porId: data.porId,
-        trId: data.trId,
-        entrySpeed: data.entrySpeed || 0,
-        technologySpeed: data.technologySpeed || 0,
-        exitSpeed: data.exitSpeed || 0,
-        matMapList: data.matMapList || []
-      }
-      this.$forceUpdate()
-    },
-
-    processSignalData(data) {
-      // 先记录是否为连续生产中信号
-      const repeatProducing =this.lastSignalOperation === 'PRODUCING' && data.operation === 'PRODUCING'
-
-      this.signalData = data
-      const operationText = this.getOperationText(data.operation)
-      const autoFlagText = data.autoFlag === 1 ? '[手动]' : '[自动]'
-      const config = this.getOperationConfig(data.operation)
-      
-      // 检测到上线、生产中、生产完成等关键操作时，刷新生产计划队列
-      if (['ONLINE', 'PRODUCING', 'PRODUCT'].includes(data.operation) ) {
-        console.log(`检测到${operationText}操作，刷新生产计划队列...`)
-        this.refreshPlanQueue()
-      }
-      
-      // 右上角通知（所有操作都显示）
-      if(!repeatProducing){
-        this.$notify({
-          title: `${config.icon} ${config.title}`,
-          message: `${autoFlagText} ${operationText}\n钢卷号: ${data.entryMatId}\n计划ID: ${data.planId || '-'}`,
-          type: config.type,
-          duration: config.duration,
-          position: 'top-right',
-          showClose: true
-        })
-      
-      }
-
-      // 如果需要弹窗确认（甩尾等重要操作）
-      if (config.needAlert) {
-        this.$alert(
-          `钢卷号: ${data.entryMatId}\n计划ID: ${data.planId || '-'}\n操作类型: ${operationText}\n操作方式: ${autoFlagText}`,
-          `${config.icon} ${config.title}`,
-          {
-            confirmButtonText: '知道了',
-            type: config.type,
-            center: true
-          }
+    computed: {
+      // 当前计划（ONLINE 或 PRODUCING状态）
+      currentPlans() {
+        return this.planQueue.filter(plan => 
+          ['ONLINE', 'PRODUCING', 'PRODUCTING'].includes(plan.status)
         )
-      }
+      },
       
-      // 如果物料映射 WebSocket 未连接，则刷新数据
-      if (!this.socketStatus.matmap) {
-        this.fetchData()
+      // 当前生产中的计划（取状态为生产中的首条）
+      producingPlan() {
+        return this.planQueue.find(plan => ['PRODUCING', 'PRODUCTING'].includes(plan.status))
+      },
+  
+      // 当前生产中的钢卷号
+      producingCoilId() {
+        if (this.producingPlan) {
+          return this.producingPlan.coilid || this.producingPlan.matId || ''
+        }
+        return ''
+      },
+      
+      // 显示的计划列表（根据tab切换）
+      displayedPlans() {
+        if (this.activeQueueTab === 'current') {
+          return this.currentPlans
+        }
+        return this.planQueue
+      },
+      
+      // 选中计划的位置信息
+      selectedPlanPosition() {
+        if (!this.selectedPlan || !this.matMapList || this.matMapList.length === 0) {
+          return null
+        }
+        
+        // 从matMapList中查找匹配的位置
+        // matMapList中的字段是驼峰命名：planId, matId
+        // 计划对象中的字段可能是：planid, coilid
+        const position = this.matMapList.find(item => 
+          (item.planId && item.planId === this.selectedPlan.planid) ||
+          (item.planId && item.planId === this.selectedPlan.planId) ||
+          (item.matId && item.matId === this.selectedPlan.coilid) ||
+          (item.matId && item.matId === this.selectedPlan.matId)
+        )
+        
+        return position
+      },
+      
+      // Get operation title (English with Chinese comments)
+      // 获取操作标题（英文显示，中文注释）
+      getOperateTitle() {
+        const titleMap = {
+          'ONLINE': 'Coil Online', // 钢卷上线
+          'UNLOAD': 'Manual Unload', // 手动卸卷
+          'ALL_RETURN': 'Full Return', // 整卷回退
+          'HALF_RETURN': 'Half Return', // 半卷回退
+          'BLOCK': 'Unload & Block', // 卸卷并封闭
+          'THROW_TAIL': 'Throw Tail' // 甩尾
+        }
+        return titleMap[this.operateMatForm.operation] || 'Coil Operation' // 钢卷操作
+      },
+      // 分段汇总数据
+      entrySectionMetrics() {
+        return this.buildSectionMetrics('ENTRY', ['stripSpeed', 'tensionPorBr1', 'tensionPorBr2', 'celLength', 'celCapacity'])
+      },
+      furnaceSectionMetrics() {
+        return this.buildSectionMetrics('FURNACE', [
+          'cleaningVoltage', 'cleaningCurrent', 'alkaliConcentration', 'alkaliTemperature',
+          'phfExitStripTemp', 'rtfExitStripTemp', 'jcsExitStripTemp', 'scsExitStripTemp',
+          'potTemperature', 'zincPotPower', 'gasConsumption', 'coolingTowerStripTemp'
+        ])
+      },
+      coatSectionMetrics() {
+        return this.buildSectionMetrics('COAT', ['stripSpeedTmExit', 'avrCoatingWeightTop', 'avrCoatingWeightBottom', 'tmElongation', 'tlElongation'])
+      },
+      exitSectionMetrics() {
+        return this.buildSectionMetrics('EXIT', ['speedExitSection', 'coilLength', 'cxlLength', 'cxlCapacity', 'tensionBr9Tr'])
+      },
+      // 入口段设备列表（依据 DeviceEnum.sectionType）
+      entryDevicesList() {
+        return this.getDevicesBySection('ENTRY')
+      },
+      // 熔炉段设备列表（PROCESS 且来源 FURNACE）
+      furnaceDevicesList() {
+        return this.getDevicesBySource('FURNACE')
+      },
+      // 涂层段设备列表（PROCESS 且来源 COAT）
+      coatDevicesList() {
+        return this.getDevicesBySource('COAT')
+      },
+      // 出口段设备列表（EXIT，常规设备）
+      exitDevicesList() {
+        const exitDevices = this.getDevicesBySection('EXIT')
+        return exitDevices.filter(d => !['INS', 'EXC', 'WEIGHT'].includes(d.positionNameEn))
+      },
+      // 出口其他设备列表
+      exitOtherDevicesList() {
+        return this.getDevicesBySection('EXIT').filter(d => ['INS', 'EXC', 'WEIGHT'].includes(d.positionNameEn))
+      },
+      // 根据选中设备获取详细数据
+      currentDeviceData() {
+        if (!this.selectedCard) return []
+        const deviceId = this.selectedCard.positionNameEn
+        const meta = DEVICE_META[deviceId]
+        if (!meta) return []
+  
+        // 针对开卷机/入口活套/出口活套，先校验卷号匹配
+        if (!this.matchReel(deviceId)) return []
+  
+        const source = this.getRealtimeSourceData(deviceId)
+        if (!source) return []
+  
+        const data = []
+        // 通用字段：按 DeviceEnum.paramFields 取值
+        meta.paramFields.forEach(field => {
+          const value = this.getFieldValueWithAlias(source, field)
+          if (value !== null && value !== undefined && value !== '') {
+            data.push({
+              label: PARAM_LABELS[field] || field,
+              value: this.formatValue(value),
+              unit: this.getFieldUnit(field)
+            })
+          }
+        })
+  
+        return data
       }
-
-
-      // 记录本次操作类型
-      this.lastSignalOperation = data.operation
     },
+  
+        methods: {
+      // Open set values floating panel / 打开设定值悬浮窗
+      openSetValuesPanel() {
+        this.$refs.setValuesPanel && this.$refs.setValuesPanel.open()
+      },
 
-    processMatmapData(data) {
-      if (Array.isArray(data)) {
-        this.matMapList = data
+      // Load latest set values (Drive & Furnace) / 加载最新的设定值
+      async loadSetupValues() {
+        try {
+          const [driveRes, furnaceRes] = await Promise.all([getDriveSetupValue(), getFurnaceSetupValue()])
+          if (driveRes && driveRes.code === 200 && driveRes.data) {
+            this.setupValue.drive = driveRes.data
+          }
+          if (furnaceRes && furnaceRes.code === 200 && furnaceRes.data) {
+            this.setupValue.furnace = furnaceRes.data
+          }
+        } catch (error) {
+          console.error('Failed to load setup values:', error)
+        }
+      },
+
+      // ============ 辅助：设备元数据 ============
+      getDevicesBySection(sectionType) {
+        return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sectionType === sectionType)
+      },
+      getDevicesBySource(sourceType) {
+        return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sourceType === sourceType)
+      },
+      // 判断设备是否有物料（用于绿框）
+      hasMatId(deviceId) {
+        const info = this.getDeviceInfo(deviceId)
+        return !!(info && info.matId)
+      },
+      getRealtimeSourceData(deviceId) {
+        const sourceType = DEVICE_META[deviceId]?.sourceType
+        if (!sourceType) return null
+        if (sourceType === 'ENTRY') return this.realtimeData.entry
+        if (sourceType === 'FURNACE') return this.realtimeData.furnace
+        if (sourceType === 'COAT') return this.realtimeData.coat
+        if (sourceType === 'EXIT') return this.realtimeData.exit
+        return null
+      },
+      getFieldValueWithAlias(source, field) {
+        // 兼容后端字段命名差异（如大小写、别名）
+        if (!source) return null
+        // 按别名映射
+        if (FIELD_ALIASES[field]) {
+          for (const alias of FIELD_ALIASES[field]) {
+            if (alias in source) return source[alias]
+          }
+        }
+        if (field in source) return source[field]
+        const lower = field.charAt(0).toLowerCase() + field.slice(1)
+        if (lower in source) return source[lower]
+        return null
+      },
+      getFieldUnit(field) {
+        const unitMap = {
+          stripSpeed: 'm/min',
+          stripSpeedTmExit: 'm/min',
+          stripSpeedAfp: 'm/min',
+          celLength: 'm',
+          cxlLength: 'm',
+          celCapacity: '%',
+          cxlCapacity: '%',
+          tensionPorBr1: 'daN',
+          tensionPorBr2: 'daN',
+          tensionBr5Tm: 'daN',
+          tensionTlBr7: 'daN',
+          tensionCxl: 'daN',
+          coilLength: 'm',
+          speedExitSection: 'm/min',
+          tlElongation: '%',
+          tmElongation: '%',
+          cleaningVoltage: 'V',
+          cleaningCurrent: 'A',
+          alkaliConcentration: 'g/L',
+          alkaliTemperature: '℃',
+          phfExitStripTemp: '℃',
+          rtfExitStripTemp: '℃',
+          jcsExitStripTemp: '℃',
+          scsExitStripTemp: '℃',
+          potTemperature: '℃',
+          zincPotPower: 'kW',
+          gasConsumption: 'm³/h'
+        }
+        return unitMap[field] || ''
+      },
+      getSectionSource(sectionType) {
+        if (sectionType === 'ENTRY') return this.realtimeData.entry
+        if (sectionType === 'FURNACE') return this.realtimeData.furnace
+        if (sectionType === 'COAT') return this.realtimeData.coat
+        if (sectionType === 'EXIT') return this.realtimeData.exit
+        return null
+      },
+      buildSectionMetrics(sectionType, fields) {
+        const source = this.getSectionSource(sectionType)
+        return fields.map(f => {
+          const raw = source ? this.getFieldValueWithAlias(source, f) : null
+          const unit = this.getFieldUnit(f)
+          return {
+            label: PARAM_LABELS[f] || f,
+            value: `${this.formatValue(raw)}${unit ? ' ' + unit : ''}`
+          }
+        })
+      },
+      matchReel(deviceId) {
+        if (!['POR1', 'POR2', 'ENL1', 'ENL2', 'CXL1', 'CXL2'].includes(deviceId)) return true
+        if (!this.realtimeData.entry) return false
+        const reel = this.realtimeData.entry.payOffReelNumber
+        if ((deviceId === 'POR1' || deviceId === 'ENL1' || deviceId === 'CXL1') && reel === 1) return true
+        if ((deviceId === 'POR2' || deviceId === 'ENL2' || deviceId === 'CXL2') && reel === 2) return true
+        return false
+      },
+      // ============ WebSocket 连接管理 ============
+      
+      initWebSockets() {
+        // 1. track_measure - 实时测量数据
+        wsManager.connect('track_measure', {
+          onMessage: this.processMeasureData,
+          onOpen: () => {
+            this.socketStatus.measure = true
+            console.log('✅ 测量数据连接成功')
+          },
+          onError: () => { this.socketStatus.measure = false },
+          onClose: () => { this.socketStatus.measure = false }
+        })
+  
+        // 2. track_position - 钢卷位置追踪
+        wsManager.connect('track_position', {
+          onMessage: this.processPositionData,
+          onOpen: () => {
+            this.socketStatus.position = true
+            console.log('✅ 位置追踪连接成功')
+          },
+          onError: () => { this.socketStatus.position = false },
+          onClose: () => { this.socketStatus.position = false }
+        })
+  
+        // 3. track_signal - 操作信号
+        wsManager.connect('track_signal', {
+          onMessage: this.processSignalData,
+          onOpen: () => {
+            this.socketStatus.signal = true
+            console.log('✅ 操作信号连接成功')
+          },
+          onError: () => { this.socketStatus.signal = false },
+          onClose: () => { this.socketStatus.signal = false }
+        })
+  
+        // 4. track_matmap - 物料位置映射
+        wsManager.connect('track_matmap', {
+          onMessage: this.processMatmapData,
+          onOpen: () => {
+            this.socketStatus.matmap = true
+            console.log('✅ 物料映射连接成功')
+          },
+          onError: () => { this.socketStatus.matmap = false },
+          onClose: () => { this.socketStatus.matmap = false }
+        })
+  
+        // 5. calc_setup_result - 计算设定结果
+        wsManager.connect('calc_setup_result', {
+          onMessage: this.processCalcSetupResult,
+          onOpen: () => {
+            this.socketStatus.calcSetup = true
+            console.log('✅ 计算结果连接成功')
+          },
+          onError: () => { this.socketStatus.calcSetup = false },
+          onClose: () => { this.socketStatus.calcSetup = false }
+        })
+      },
+  
+      disconnectWebSockets() {
+        wsManager.disconnectAll()
+        this.socketStatus = {
+          measure: false,
+          position: false,
+          signal: false,
+          matmap: false,
+          calcSetup: false
+        }
+      },
+  
+      // ============ 数据处理方法 ============
+      
+      processMeasureData(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()
-      }
-    },
-
-    processCalcSetupResult(data) {
-      this.calcSetupResult = data
+      },
+  
+      processPositionData(data) {
+        this.positionData = {
+          coilStripLocationList: data.coilStripLocationList || [],
+          entryLoopLen: data.entryLoopLen || 0,
+          exitLoopLen: data.exitLoopLen || 0,
+          entryLoopPer: data.entryLoopPer || 0,
+          exitLoopLPer: data.exitLoopLPer || 0,
+          porId: data.porId,
+          trId: data.trId,
+          entrySpeed: data.entrySpeed || 0,
+          technologySpeed: data.technologySpeed || 0,
+          exitSpeed: data.exitSpeed || 0,
+          matMapList: data.matMapList || []
+        }
+        this.$forceUpdate()
+      },
+  
+      processSignalData(data) {
+        // 先记录是否为连续生产中信号
+        const repeatProducing =this.lastSignalOperation === 'PRODUCING' && data.operation === 'PRODUCING'
+  
+        this.signalData = data
+        const operationText = this.getOperationText(data.operation)
+        const autoFlagText = data.autoFlag === 1 ? '[手动]' : '[自动]'
+        const config = this.getOperationConfig(data.operation)
+        
+        // 检测到上线、生产中、生产完成等关键操作时，刷新生产计划队列
+        if (['ONLINE', 'PRODUCING', 'PRODUCT'].includes(data.operation) ) {
+          console.log(`检测到${operationText}操作，刷新生产计划队列...`)
+          this.refreshPlanQueue()
+        }
+        
+        // 右上角通知（所有操作都显示）
+        if(!repeatProducing){
+          this.$notify({
+            title: `${config.icon} ${config.title}`,
+            message: `${autoFlagText} ${operationText}\n钢卷号: ${data.entryMatId}\n计划ID: ${data.planId || '-'}`,
+            type: config.type,
+            duration: config.duration,
+            position: 'top-right',
+            showClose: true
+          })
+        
+        }
+  
+        // 如果需要弹窗确认（甩尾等重要操作）
+        if (config.needAlert) {
+          this.$alert(
+            `钢卷号: ${data.entryMatId}\n计划ID: ${data.planId || '-'}\n操作类型: ${operationText}\n操作方式: ${autoFlagText}`,
+            `${config.icon} ${config.title}`,
+            {
+              confirmButtonText: '知道了',
+              type: config.type,
+              center: true
+            }
+          )
+        }
+        
+        // 如果物料映射 WebSocket 未连接，则刷新数据
+        if (!this.socketStatus.matmap) {
+          this.fetchData()
+        }
+  
+  
+        // 记录本次操作类型
+        this.lastSignalOperation = data.operation
+      },
+  
+      processMatmapData(data) {
+        if (Array.isArray(data)) {
+          this.matMapList = data
+          this.$forceUpdate()
+        }
+      },
+  
+      processCalcSetupResult(data) {
+        this.calcSetupResult = data
+        
+        if (data.flag) {
+          this.$message.success(`计算完成 (Key: ${data.key})`)
+          this.showCalcResultDialog = true
+        } else {
+          this.$message.error(`计算失败 (Key: ${data.key})`)
+        }
+      },
+  
+      // ============ 辅助方法 ============
       
-      if (data.flag) {
-        this.$message.success(`计算完成 (Key: ${data.key})`)
-        this.showCalcResultDialog = true
-      } else {
-        this.$message.error(`计算失败 (Key: ${data.key})`)
-      }
-    },
-
-    // ============ 辅助方法 ============
-    
-    // Get operation text (English with Chinese comments)
-    // 获取操作文本（英文显示，中文注释）
-    getOperationText(operation) {
-      const operationMap = {
-        ONLINE: 'Coil Online', // 钢卷上线
-        UNLOAD: 'Unload', // 卸卷
-        PRODUCING: 'Producing', // 生产中
-        PRODUCT: 'Completed', // 生产完成
-        PAY_OVER: 'Pay Over', // 甩尾
-        THROW_TAIL: 'Throw Tail', // 甩尾
-        ALL_RETURN: 'Full Return', // 整卷回退
-        HALF_RETURN: 'Half Return', // 半卷回退
-        BLOCK: 'Unload & Block' // 卸卷并封闭
-      }
-      return operationMap[operation] || operation
-    },
-
-    // 获取操作类型配置
-    getOperationConfig(operation) {
-      const configs = {
-        ONLINE: {
-          icon: '🎬',
-          title: '钢卷上线通知',
-          type: 'success',
-          duration: 4000,
-          needAlert: false
-        },
-        UNLOAD: {
-          icon: '📤',
-          title: '卸卷操作通知',
+      // Get operation text (English with Chinese comments)
+      // 获取操作文本（英文显示，中文注释）
+      getOperationText(operation) {
+        const operationMap = {
+          ONLINE: 'Coil Online', // 钢卷上线
+          UNLOAD: 'Unload', // 卸卷
+          PRODUCING: 'Producing', // 生产中
+          PRODUCT: 'Completed', // 生产完成
+          PAY_OVER: 'Pay Over', // 甩尾
+          THROW_TAIL: 'Throw Tail', // 甩尾
+          ALL_RETURN: 'Full Return', // 整卷回退
+          HALF_RETURN: 'Half Return', // 半卷回退
+          BLOCK: 'Unload & Block' // 卸卷并封闭
+        }
+        return operationMap[operation] || operation
+      },
+  
+      // 获取操作类型配置
+      getOperationConfig(operation) {
+        const configs = {
+          ONLINE: {
+            icon: '🎬',
+            title: '钢卷上线通知',
+            type: 'success',
+            duration: 4000,
+            needAlert: false
+          },
+          UNLOAD: {
+            icon: '📤',
+            title: '卸卷操作通知',
+            type: 'info',
+            duration: 3000,
+            needAlert: false
+          },
+          PRODUCING: {
+            icon: '⚙️',
+            title: '生产状态变更',
+            type: 'success',
+            duration: 3000,
+            needAlert: false
+          },
+          PRODUCT: {
+            icon: '✅',
+            title: '生产完成通知',
+            type: 'success',
+            duration: 4000,
+            needAlert: false
+          },
+          PAY_OVER: {
+            icon: '⚠️',
+            title: '甩尾操作提示',
+            type: 'warning',
+            duration: 5000,
+            needAlert: true
+          },
+          THROW_TAIL: {
+            icon: '⚠️',
+            title: '甩尾操作提示',
+            type: 'warning',
+            duration: 5000,
+            needAlert: true
+          },
+          ALL_RETURN: {
+            icon: '↩️',
+            title: '整卷回退通知',
+            type: 'warning',
+            duration: 4000,
+            needAlert: false
+          },
+          HALF_RETURN: {
+            icon: '↩️',
+            title: '半卷回退通知',
+            type: 'warning',
+            duration: 4000,
+            needAlert: false
+          },
+          BLOCK: {
+            icon: '🚫',
+            title: '封闭操作通知',
+            type: 'warning',
+            duration: 3000,
+            needAlert: false
+          }
+        }
+        return configs[operation] || {
+          icon: '📢',
+          title: '操作通知',
           type: 'info',
           duration: 3000,
           needAlert: false
-        },
-        PRODUCING: {
-          icon: '⚙️',
-          title: '生产状态变更',
-          type: 'success',
-          duration: 3000,
-          needAlert: false
-        },
-        PRODUCT: {
-          icon: '✅',
-          title: '生产完成通知',
-          type: 'success',
-          duration: 4000,
-          needAlert: false
-        },
-        PAY_OVER: {
-          icon: '⚠️',
-          title: '甩尾操作提示',
-          type: 'warning',
-          duration: 5000,
-          needAlert: true
-        },
-        THROW_TAIL: {
-          icon: '⚠️',
-          title: '甩尾操作提示',
-          type: 'warning',
-          duration: 5000,
-          needAlert: true
-        },
-        ALL_RETURN: {
-          icon: '↩️',
-          title: '整卷回退通知',
-          type: 'warning',
-          duration: 4000,
-          needAlert: false
-        },
-        HALF_RETURN: {
-          icon: '↩️',
-          title: '半卷回退通知',
-          type: 'warning',
-          duration: 4000,
-          needAlert: false
-        },
-        BLOCK: {
-          icon: '🚫',
-          title: '封闭操作通知',
-          type: 'warning',
-          duration: 3000,
-          needAlert: false
         }
-      }
-      return configs[operation] || {
-        icon: '📢',
-        title: '操作通知',
-        type: 'info',
-        duration: 3000,
-        needAlert: false
-      }
-    },
-
-    // ============ API 方法 ============
-    
-    // 刷新生产计划队列（独立方法，可被信号触发）
-    async refreshPlanQueue() {
-      try {
-        // 只查询活动状态的计划，排除已完成和甩尾
-        const statuses = ['ONLINE', 'PRODUCING', 'READY', 'NEW']
-        const allPlans = []
-        
-        // 并行查询所有状态
-        const requests = statuses.map(status => 
-          getPlanQueue({ status }).catch(err => {
-            console.warn(`查询${status}状态失败:`, err)
-            return { code: 500, data: [] }
-          })
-        )
-        
-        const results = await Promise.all(requests)
-        
-        // 合并所有查询结果
-        results.forEach((res, index) => {
-          if (res.code === 200 && res.data) {
-            allPlans.push(...res.data)
-          }
-        })
-        
-        // 去重（根据id）
-        const uniquePlans = Array.from(
-          new Map(allPlans.map(plan => [plan.id, plan])).values()
-        )
-        
-        // 排除已完成和甩尾的计划
-        const excludeStatuses = ['PRODUCT', 'PAY_OVER', 'COMPLETED', 'CANCELLED', 'UNLOAD']
-        const activePlans = uniquePlans.filter(plan => 
-          !excludeStatuses.includes(plan.status)
-        )
-        
-        // 定义状态优先级
-        const statusPriority = {
-          'PRODUCING': 1,
-          'ONLINE': 2,
-          'READY': 3,
-          'NEW': 4
-        }
-        
-        // 排序
-        const sortedPlans = activePlans.sort((a, b) => {
-          const priorityA = statusPriority[a.status] || 500
-          const priorityB = statusPriority[b.status] || 500
-          if (priorityA !== priorityB) {
-            return priorityA - priorityB
-          }
-          return (a.seqid || 0) - (b.seqid || 0)
-        })
-        
-        // 最多显示 5 个计划
-        this.planQueue = sortedPlans.slice(0, 5)
-        
-        console.log('查询到的总计划数：', uniquePlans.length, '条')
-        console.log('活动计划数：', activePlans.length, '条')
-        console.log('显示的计划：', this.planQueue.length, '条', this.planQueue)
-        
-      } catch (err) {
-        console.error('获取生产计划队列失败：', err)
-        this.planQueue = this.generateMockPlanQueue()
-      }
-    },
-    
-    async fetchData() {
-      try {
-        this.isLoading = true
-        const res = await getTrackMatPosition()
-        
-        // 只在 WebSocket 未连接时使用 API 数据
-        if (!this.socketStatus.matmap) {
-          this.matMapList = res.data.matMapList || []
-        }
-        
-        // 获取生产计划队列
-        await this.refreshPlanQueue()
-        
-      } catch (err) {
-        console.error('获取钢卷数据失败：', err)
-        this.$message.error('获取数据失败，请重试')
-      } finally {
-        // 延迟关闭加载状态，确保界面渲染完成
-        setTimeout(() => {
-          this.isLoading = false
-        }, 500)
-      }
-    },
-
-    // 生成模拟计划队列数据（降级方案）
-    generateMockPlanQueue() {
-      // 从物料映射中提取有钢卷的数据作为计划队列
-      const plansFromMap = this.matMapList
-        .filter(item => item.matId)
-        .map((item, index) => ({
-          planid: item.planId || `PLAN_${index + 1}`,
-          coilid: item.matId,
-          steelGrade: `Q235-${index + 1}`,
-          status: index === 0 ? 'PRODUCING' : (index === 1 ? 'READY' : 'NEW'),
-          seqid: index + 1
-        }))
-      
-      return plansFromMap.slice(0, 5) // 最多显示5个计划
-    },
-
-    // Get plan status text (English with Chinese comments)
-    // 获取计划状态文本（英文显示，中文注释）
-    getPlanStatusText(status) {
-      const statusMap = {
-        NEW: 'New', // 新建
-        READY: 'Ready', // 就绪
-        ONLINE: 'Online', // 上线
-        PRODUCING: 'Producing', // 生产中
-        PRODUCT: 'Completed', // 生产完成
-        PAY_OVER: 'Pay Over', // 甩尾
-        UNLOAD: 'Unload', // 卸卷
-        COMPLETED: 'Completed', // 已完成
-        CANCELLED: 'Cancelled' // 已取消
-      }
-      return statusMap[status] || status || 'Unknown' // 未知
-    },
-
-    // 获取计划状态标签类型
-    getPlanStatusTagType(status) {
-      const typeMap = {
-        NEW: 'info',
-        READY: 'primary',
-        ONLINE: 'warning',
-        PRODUCING: 'success',
-        PRODUCTING: 'success',  // 兼容带T的写法
-        PRODUCT: 'info',
-        PAY_OVER: '',
-        UNLOAD: 'danger',
-        COMPLETED: 'info',
-        CANCELLED: 'danger'
-      }
-      return typeMap[status] || 'info'
-    },
-
-    // 获取计划卡片样式类
-    getPlanItemClass(plan) {
-      const classes = []
-      
-      if (plan.status === 'PRODUCING' || plan.status === 'PRODUCTING') {
-        classes.push('plan-producing')
-      }
-      if (plan.status === 'ONLINE') {
-        classes.push('plan-online')
-      }
-      if (plan.status === 'READY') {
-        classes.push('plan-ready')
-      }
-      if (this.selectedPlan && this.selectedPlan.id === plan.id) {
-        classes.push('plan-selected')
-      }
-      
-      return classes
-    },
-
-    // 获取计划序号样式类
-    getPlanOrderClass(status) {
-      if (status === 'PRODUCING' || status === 'PRODUCTING') return 'order-producing'
-      if (status === 'ONLINE') return 'order-online'
-      if (status === 'READY') return 'order-ready'
-      if (status === 'NEW') return 'order-new'
-      return ''
-    },
-
-
-    // 根据设备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
-        }
-        // 选择设备时清除选中的计划
-        this.selectedPlan = null
-      }
-    },
-
-    // 选择生产计划
-    selectPlan(plan) {
-      if (this.selectedPlan && this.selectedPlan.id === plan.id) {
-        this.selectedPlan = null
-      } else {
-        this.selectedPlan = plan
-        // 选择计划时清除选中的设备
-        this.selectedCard = null
-        
-        // 调试：查找并显示位置信息
-        const position = this.matMapList.find(item => 
-          (item.planId && item.planId === plan.planid) ||
-          (item.planId && item.planId === plan.planId) ||
-          (item.matId && item.matId === plan.coilid) ||
-          (item.matId && item.matId === plan.matId)
-        )
-        
-        if (position) {
-          console.log('✅ 找到计划位置：', position.positionNameCn, '(', position.positionNameEn, ')')
-          console.log('匹配详情 - matId:', position.matId, 'planId:', position.planId)
-        } else {
-          console.log('⚠️ 未找到计划位置')
-          console.log('matMapList有', this.matMapList.length, '个设备:', this.matMapList)
-          console.log('计划信息 - planid:', plan.planid, 'planId:', plan.planId, 'coilid:', plan.coilid, 'matId:', plan.matId)
-        }
-      }
-    },
-
-    // 格式化日期时间
-    formatDateTime(dateTime) {
-      if (!dateTime) return '-'
-      const date = new Date(dateTime)
-      if (isNaN(date.getTime())) return '-'
-      
-      const year = date.getFullYear()
-      const month = String(date.getMonth() + 1).padStart(2, '0')
-      const day = String(date.getDate()).padStart(2, '0')
-      const hours = String(date.getHours()).padStart(2, '0')
-      const minutes = String(date.getMinutes()).padStart(2, '0')
-      const seconds = String(date.getSeconds()).padStart(2, '0')
-      
-      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-    },
-
-    // 获取操作标签类型
-    getOperationTagType(operation) {
-      const typeMap = {
-        ONLINE: 'success',
-        UNLOAD: 'info',
-        PRODUCING: 'success',
-        PRODUCT: 'success',
-        PAY_OVER: 'warning',
-        THROW_TAIL: 'warning',
-        ALL_RETURN: 'warning',
-        HALF_RETURN: 'warning',
-        BLOCK: 'danger'
-      }
-      return typeMap[operation] || 'info'
-    },
-
-    // 获取信号面板样式类
-    getSignalPanelClass(operation) {
-      if (operation === 'PAY_OVER' || operation === 'THROW_TAIL') {
-        return 'signal-warning'
-      }
-      if (operation === 'ONLINE') {
-        return 'signal-success'
-      }
-      if (operation === 'PRODUCT') {
-        return 'signal-complete'
-      }
-      return ''
-    },
-
-    // 获取操作文本样式类
-    getOperationTextClass(operation) {
-      if (operation === 'PAY_OVER' || operation === 'THROW_TAIL') {
-        return 'text-warning'
-      }
-      if (operation === 'ONLINE' || operation === 'PRODUCING' || operation === 'PRODUCT') {
-        return 'text-success'
-      }
-      return ''
-    },
-
-    // 判断设备是否有实时数据（基于 sourceType & 卷号匹配）
-    hasRealtimeData(deviceId) {
-      const source = this.getRealtimeSourceData(deviceId)
-      if (!source) return false
-      if (!this.matchReel(deviceId)) return false
-      const meta = DEVICE_META[deviceId]
-      if (!meta) return false
-      return meta.paramFields.some(f => {
-        const val = this.getFieldValueWithAlias(source, f)
-        return val !== null && val !== undefined
-      })
-    },
-
-    // 判断设备是否工作中（统一依据 paramFields 有效数值/状态）
-    isDeviceWorking(deviceId) {
-      const info = this.getDeviceInfo(deviceId)
-      if (info?.matId) return true
-      const source = this.getRealtimeSourceData(deviceId)
-      const meta = DEVICE_META[deviceId]
-      if (!source || !meta || !this.matchReel(deviceId)) return false
-      return meta.paramFields.some(f => {
-        const val = this.getFieldValueWithAlias(source, f)
-        if (val === null || val === undefined) return false
-        if (typeof val === 'number') return val > 0
-        if (typeof val === 'string') return val !== '' && val !== '--'
-        return true
-      })
-    },
-
-    // Get device status text (English with Chinese comments)
-    // 获取设备状态文本（英文显示，中文注释）
-    getDeviceStatus(deviceId) {
-      const deviceInfo = this.getDeviceInfo(deviceId)
-      
-      // If there is material mapping coil ID, display coil ID
-      // 如果有物料映射的钢卷号，显示钢卷号
-      if (deviceInfo?.matId) {
-        return deviceInfo.matId
-      }
-      
-      // Determine working status based on real-time data
-      // 根据实时数据判断工作状态
-      if (this.isDeviceWorking(deviceId)) {
-        return 'Working' // 工作中
-      }
-      
-      return 'Idle' // 空闲
-    },
-
+      },
   
-    /**
-     * 获取回退信息
-     * @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 || '获取回退信息失败';
+      // ============ API 方法 ============
+      
+      // 刷新生产计划队列（独立方法，可被信号触发）
+      async refreshPlanQueue() {
+        try {
+          // 只查询活动状态的计划，排除已完成和甩尾
+          const statuses = ['ONLINE', 'PRODUCING', 'READY', 'NEW']
+          const allPlans = []
+          
+          // 并行查询所有状态
+          const requests = statuses.map(status => 
+            getPlanQueue({ status }).catch(err => {
+              console.warn(`查询${status}状态失败:`, err)
+              return { code: 500, data: [] }
+            })
+          )
+          
+          const results = await Promise.all(requests)
+          
+          // 合并所有查询结果
+          results.forEach((res, index) => {
+            if (res.code === 200 && res.data) {
+              allPlans.push(...res.data)
+            }
+          })
+          
+          // 去重（根据id）
+          const uniquePlans = Array.from(
+            new Map(allPlans.map(plan => [plan.id, plan])).values()
+          )
+          
+          // 排除已完成和甩尾的计划
+          const excludeStatuses = ['PRODUCT', 'PAY_OVER', 'COMPLETED', 'CANCELLED', 'UNLOAD']
+          const activePlans = uniquePlans.filter(plan => 
+            !excludeStatuses.includes(plan.status)
+          )
+          
+          // 定义状态优先级
+          const statusPriority = {
+            'PRODUCING': 1,
+            'ONLINE': 2,
+            'READY': 3,
+            'NEW': 4
           }
+          
+          // 排序
+          const sortedPlans = activePlans.sort((a, b) => {
+            const priorityA = statusPriority[a.status] || 500
+            const priorityB = statusPriority[b.status] || 500
+            if (priorityA !== priorityB) {
+              return priorityA - priorityB
+            }
+            return (a.seqid || 0) - (b.seqid || 0)
+          })
+          
+          // 最多显示 5 个计划
+          this.planQueue = sortedPlans.slice(0, 5)
+          
+          console.log('查询到的总计划数：', uniquePlans.length, '条')
+          console.log('活动计划数：', activePlans.length, '条')
+          console.log('显示的计划：', this.planQueue.length, '条', this.planQueue)
+          
+        } catch (err) {
+          console.error('获取生产计划队列失败：', err)
+          this.planQueue = this.generateMockPlanQueue()
+        }
+      },
+      
+      async fetchData() {
+        try {
+          this.isLoading = true
+          const res = await getTrackMatPosition()
+          
+          // 只在 WebSocket 未连接时使用 API 数据
+          if (!this.socketStatus.matmap) {
+            this.matMapList = res.data.matMapList || []
+          }
+          
+          // 获取生产计划队列
+          await this.refreshPlanQueue()
+          
+        } catch (err) {
+          console.error('获取钢卷数据失败：', err)
+          this.$message.error('获取数据失败，请重试')
+        } finally {
+          // 延迟关闭加载状态，确保界面渲染完成
+          setTimeout(() => {
+            this.isLoading = false
+          }, 500)
+        }
+      },
+  
+      // 生成模拟计划队列数据（降级方案）
+      generateMockPlanQueue() {
+        // 从物料映射中提取有钢卷的数据作为计划队列
+        const plansFromMap = this.matMapList
+          .filter(item => item.matId)
+          .map((item, index) => ({
+            planid: item.planId || `PLAN_${index + 1}`,
+            coilid: item.matId,
+            steelGrade: `Q235-${index + 1}`,
+            status: index === 0 ? 'PRODUCING' : (index === 1 ? 'READY' : 'NEW'),
+            seqid: index + 1
+          }))
+        
+        return plansFromMap.slice(0, 5) // 最多显示5个计划
+      },
+  
+      // Get plan status text (English with Chinese comments)
+      // 获取计划状态文本（英文显示，中文注释）
+      getPlanStatusText(status) {
+        const statusMap = {
+          NEW: 'New', // 新建
+          READY: 'Ready', // 就绪
+          ONLINE: 'Online', // 上线
+          PRODUCING: 'Producing', // 生产中
+          PRODUCT: 'Completed', // 生产完成
+          PAY_OVER: 'Pay Over', // 甩尾
+          UNLOAD: 'Unload', // 卸卷
+          COMPLETED: 'Completed', // 已完成
+          CANCELLED: 'Cancelled' // 已取消
+        }
+        return statusMap[status] || status || 'Unknown' // 未知
+      },
+  
+      // 获取计划状态标签类型
+      getPlanStatusTagType(status) {
+        const typeMap = {
+          NEW: 'info',
+          READY: 'primary',
+          ONLINE: 'warning',
+          PRODUCING: 'success',
+          PRODUCTING: 'success',  // 兼容带T的写法
+          PRODUCT: 'info',
+          PAY_OVER: '',
+          UNLOAD: 'danger',
+          COMPLETED: 'info',
+          CANCELLED: 'danger'
+        }
+        return typeMap[status] || 'info'
+      },
+  
+      // 获取计划卡片样式类
+      getPlanItemClass(plan) {
+        const classes = []
+        
+        if (plan.status === 'PRODUCING' || plan.status === 'PRODUCTING') {
+          classes.push('plan-producing')
+        }
+        if (plan.status === 'ONLINE') {
+          classes.push('plan-online')
+        }
+        if (plan.status === 'READY') {
+          classes.push('plan-ready')
+        }
+        if (this.selectedPlan && this.selectedPlan.id === plan.id) {
+          classes.push('plan-selected')
+        }
+        
+        return classes
+      },
+  
+      // 获取计划序号样式类
+      getPlanOrderClass(status) {
+        if (status === 'PRODUCING' || status === 'PRODUCTING') return 'order-producing'
+        if (status === 'ONLINE') return 'order-online'
+        if (status === 'READY') return 'order-ready'
+        if (status === 'NEW') return 'order-new'
+        return ''
+      },
+  
+  
+      // 根据设备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
+          }
+          // 选择设备时清除选中的计划
+          this.selectedPlan = null
+        }
+      },
+  
+      // 选择生产计划
+      selectPlan(plan) {
+        if (this.selectedPlan && this.selectedPlan.id === plan.id) {
+          this.selectedPlan = null
+        } else {
+          this.selectedPlan = plan
+          // 选择计划时清除选中的设备
+          this.selectedCard = null
+          
+          // 调试：查找并显示位置信息
+          const position = this.matMapList.find(item => 
+            (item.planId && item.planId === plan.planid) ||
+            (item.planId && item.planId === plan.planId) ||
+            (item.matId && item.matId === plan.coilid) ||
+            (item.matId && item.matId === plan.matId)
+          )
+          
+          if (position) {
+            console.log('✅ 找到计划位置：', position.positionNameCn, '(', position.positionNameEn, ')')
+            console.log('匹配详情 - matId:', position.matId, 'planId:', position.planId)
+          } else {
+            console.log('⚠️ 未找到计划位置')
+            console.log('matMapList有', this.matMapList.length, '个设备:', this.matMapList)
+            console.log('计划信息 - planid:', plan.planid, 'planId:', plan.planId, 'coilid:', plan.coilid, 'matId:', plan.matId)
+          }
+        }
+      },
+  
+      // 格式化日期时间
+      formatDateTime(dateTime) {
+        if (!dateTime) return '-'
+        const date = new Date(dateTime)
+        if (isNaN(date.getTime())) return '-'
+        
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hours = String(date.getHours()).padStart(2, '0')
+        const minutes = String(date.getMinutes()).padStart(2, '0')
+        const seconds = String(date.getSeconds()).padStart(2, '0')
+        
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      },
+  
+      // 获取操作标签类型
+      getOperationTagType(operation) {
+        const typeMap = {
+          ONLINE: 'success',
+          UNLOAD: 'info',
+          PRODUCING: 'success',
+          PRODUCT: 'success',
+          PAY_OVER: 'warning',
+          THROW_TAIL: 'warning',
+          ALL_RETURN: 'warning',
+          HALF_RETURN: 'warning',
+          BLOCK: 'danger'
+        }
+        return typeMap[operation] || 'info'
+      },
+  
+      // 获取信号面板样式类
+      getSignalPanelClass(operation) {
+        if (operation === 'PAY_OVER' || operation === 'THROW_TAIL') {
+          return 'signal-warning'
+        }
+        if (operation === 'ONLINE') {
+          return 'signal-success'
+        }
+        if (operation === 'PRODUCT') {
+          return 'signal-complete'
+        }
+        return ''
+      },
+  
+      // 获取操作文本样式类
+      getOperationTextClass(operation) {
+        if (operation === 'PAY_OVER' || operation === 'THROW_TAIL') {
+          return 'text-warning'
+        }
+        if (operation === 'ONLINE' || operation === 'PRODUCING' || operation === 'PRODUCT') {
+          return 'text-success'
+        }
+        return ''
+      },
+  
+      // 判断设备是否有实时数据（基于 sourceType & 卷号匹配）
+      hasRealtimeData(deviceId) {
+        const source = this.getRealtimeSourceData(deviceId)
+        if (!source) return false
+        if (!this.matchReel(deviceId)) return false
+        const meta = DEVICE_META[deviceId]
+        if (!meta) return false
+        return meta.paramFields.some(f => {
+          const val = this.getFieldValueWithAlias(source, f)
+          return val !== null && val !== undefined
         })
-        .catch(err => {
-          this.isLoadingReturn = false;
+      },
+  
+      // 判断设备是否工作中（统一依据 paramFields 有效数值/状态）
+      isDeviceWorking(deviceId) {
+        const info = this.getDeviceInfo(deviceId)
+        if (info?.matId) return true
+        const source = this.getRealtimeSourceData(deviceId)
+        const meta = DEVICE_META[deviceId]
+        if (!source || !meta || !this.matchReel(deviceId)) return false
+        return meta.paramFields.some(f => {
+          const val = this.getFieldValueWithAlias(source, f)
+          if (val === null || val === undefined) return false
+          if (typeof val === 'number') return val > 0
+          if (typeof val === 'string') return val !== '' && val !== '--'
+          return true
+        })
+      },
+  
+      // Get device status text (English with Chinese comments)
+      // 获取设备状态文本（英文显示，中文注释）
+      getDeviceStatus(deviceId) {
+        const deviceInfo = this.getDeviceInfo(deviceId)
+        
+        // If there is material mapping coil ID, display coil ID
+        // 如果有物料映射的钢卷号，显示钢卷号
+        if (deviceInfo?.matId) {
+          return deviceInfo.matId
+        }
+        
+        // Determine working status based on real-time data
+        // 根据实时数据判断工作状态
+        if (this.isDeviceWorking(deviceId)) {
+          return 'Working' // 工作中
+        }
+        
+        return 'Idle' // 空闲
+      },
+  
+    
+      /**
+       * 获取回退信息
+       * @param {Number} posIdx - 位置索引（接口必填query参数）
+       */
+      fetchReturnData(posIdx) {
+        // 1. 校验posIdx
+        if (!posIdx && posIdx !== 0) {
           this.returnInfo = {};
-          this.returnError = '获取回退信息出错，请重试';
-          console.error('回退信息接口异常：', err);
-        });
-    },
-
-    // 格式化数值
-    formatValue(value) {
-      if (value === null || value === undefined) return '0.00'
-      if (typeof value === 'number') return value.toFixed(2)
-      return value
-    },
-
-
-    // 确认调整位置
-    handleConfirmAdjust() {
-      const { current, target } = this.adjustForm
-
-      if (!current || !target) {
-        this.$message.warning('Please select current and target positions') // 请选择当前位置和目标位置
-        return
-      }
-
-      const params = {
-        currentPos: current,
-        targetPos: target,
-      }
-
-      this.$confirm(`Confirm to adjust coil from ${current} to ${target}?`, 'Confirm Adjustment', {
-        // 确定将 ${current} 的钢卷调整到 ${target}？, 确认调整
-        confirmButtonText: 'Confirm', // 确定
-        cancelButtonText: 'Cancel', // 取消
-        type: 'warning'
-      }).then(() => {
-        adjustPosition(params).then(() => {
-          this.$message.success('Adjustment successful') // 调整成功
-          this.fetchData()
-        }).catch(err => {
-          console.error('Adjustment failed:', err) // 调整失败
-          this.$message.error('Adjustment failed, please retry') // 调整失败，请重试
-        })
-      }).catch(() => {
-        this.$message.info('Adjustment cancelled') // 已取消调整
-      })
-    },
-
-    // 打开操作对话框
-    handleOperate(row, operation) {
-      this.$refs.operateForm?.resetFields()
-      console.log(this.selectCard, row.posIdx)
-      this.operateMatForm = {
-        porIdx: row.posIdx.toString() || '',
-        trIdx: row.posIdx.toString() || '',
-        planId: row.planId || '',
-        entryMatId: row.matId || '',
-        planNo: row.planNo || '',
-        operation: operation,
-        returnMatId: '',
-        returnWeight: null,
-        returnRemark: '',
-        coilLength: null
-      }
-      this.operateMatStatus = true
-    },
-
-    // 提交操作表单
-    submitOperateForm() {
-      this.$refs.operateForm.validate(valid => {
-        if (valid) {
-          operateMat(this.operateMatForm).then(() => {
-            this.$message.success('Operation successful') // 操作成功
-            this.operateMatStatus = false
+          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 || '获取回退信息失败';
+            }
+          })
+          .catch(err => {
+            this.isLoadingReturn = false;
+            this.returnInfo = {};
+            this.returnError = '获取回退信息出错，请重试';
+            console.error('回退信息接口异常：', err);
+          });
+      },
+  
+      // 格式化数值
+      formatValue(value) {
+        if (value === null || value === undefined) return '0.00'
+        if (typeof value === 'number') return value.toFixed(2)
+        return value
+      },
+  
+  
+      // 确认调整位置
+      handleConfirmAdjust() {
+        const { current, target } = this.adjustForm
+  
+        if (!current || !target) {
+          this.$message.warning('Please select current and target positions') // 请选择当前位置和目标位置
+          return
+        }
+  
+        const params = {
+          currentPos: current,
+          targetPos: target,
+        }
+  
+        this.$confirm(`Confirm to adjust coil from ${current} to ${target}?`, 'Confirm Adjustment', {
+          // 确定将 ${current} 的钢卷调整到 ${target}？, 确认调整
+          confirmButtonText: 'Confirm', // 确定
+          cancelButtonText: 'Cancel', // 取消
+          type: 'warning'
+        }).then(() => {
+          adjustPosition(params).then(() => {
+            this.$message.success('Adjustment successful') // 调整成功
             this.fetchData()
           }).catch(err => {
-            console.error('Operation failed:', err) // 操作失败
-            this.$message.error('Operation failed, please retry') // 操作失败，请重试
+            console.error('Adjustment failed:', err) // 调整失败
+            this.$message.error('Adjustment failed, please retry') // 调整失败，请重试
           })
-        } else {
-          this.$message.warning('Please complete the form') // 请完善表单信息
+        }).catch(() => {
+          this.$message.info('Adjustment cancelled') // 已取消调整
+        })
+      },
+  
+      // 打开操作对话框
+      handleOperate(row, operation) {
+        this.$refs.operateForm?.resetFields()
+        console.log(this.selectCard, row.posIdx)
+        this.operateMatForm = {
+          porIdx: row.posIdx.toString() || '',
+          trIdx: row.posIdx.toString() || '',
+          planId: row.planId || '',
+          entryMatId: row.matId || '',
+          planNo: row.planNo || '',
+          operation: operation,
+          returnMatId: '',
+          returnWeight: null,
+          returnRemark: '',
+          coilLength: null
         }
-      })
+        this.operateMatStatus = true
+      },
+  
+      // 提交操作表单
+      submitOperateForm() {
+        this.$refs.operateForm.validate(valid => {
+          if (valid) {
+            operateMat(this.operateMatForm).then(() => {
+              this.$message.success('Operation successful') // 操作成功
+              this.operateMatStatus = false
+              this.fetchData()
+            }).catch(err => {
+              console.error('Operation failed:', err) // 操作失败
+              this.$message.error('Operation failed, please retry') // 操作失败，请重试
+            })
+          } else {
+            this.$message.warning('Please complete the form') // 请完善表单信息
+          }
+        })
+      }
+    },
+  
+    async mounted() {
+      await this.fetchData()
+      await this.loadSetupValues()
+      this.initWebSockets()
+    },
+  
+    beforeDestroy() {
+      this.disconnectWebSockets()
     }
-  },
-
-  async mounted() {
-    await this.fetchData()
-    this.initWebSockets()
-  },
-
-  beforeDestroy() {
-    this.disconnectWebSockets()
   }
-}
-</script>
-
-<style scoped>
-.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;
-  font-weight: 500;
-}
-
-.status-working {
-  color: #67c23a;
-}
-
-.status-idle {
-  color: #909399;
-}
-
-.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;
-}
-
-.section-summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 10px;
-  margin: 8px 0 14px;
-}
-
-.summary-item {
-  background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
-  border: 1px solid #e0e6ed;
-  border-radius: 6px;
-  padding: 10px 12px;
-  font-size: 13px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.summary-label {
-  color: #606266;
-  font-weight: 600;
-}
-
-.summary-value {
-  color: #1f2d3d;
-  font-weight: 700;
-}
-
-/* 段落色系 */
-.entry-area .section-header { border-bottom-color: #409eff; }
-.entry-area .summary-value { color: #409eff; }
-.furnace-area .section-header { border-bottom-color: #e6a23c; }
-.furnace-area .summary-value { color: #e6a23c; }
-.coat-area .section-header { border-bottom-color: #67c23a; }
-.coat-area .summary-value { color: #67c23a; }
-.exit-area .section-header { border-bottom-color: #909399; }
-.exit-area .summary-value { color: #909399; }
-
-.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%;
-  font-size: 13px;
-}
-
-.info-table tr {
-  border-bottom: 1px solid #f5f5f5;
-}
-
-.info-table tr:last-child {
-  border-bottom: none;
-}
-
-.info-table td {
-  padding: 8px 0;
-  line-height: 1.6;
-}
-
-.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;
-}
-
-.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;
-  margin-bottom: 4px;
-  font-family: 'Arial', sans-serif;
-}
-
-.data-unit {
-  font-size: 12px;
-  color: #999;
-}
-
-.btn-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.action-btn {
-  margin-bottom: 8px;
-  width: 80px;
-  height: 40px;
-}
-
-/* 加载状态 */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100px 0;
-  color: #409eff;
-  font-size: 16px;
-}
-
-.loading-container .el-icon-loading {
-  font-size: 40px;
-  margin-bottom: 15px;
-  animation: rotating 2s linear infinite;
-}
-
-@keyframes rotating {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* 生产计划队列面板 */
-.plan-queue-panel {
-  background: #fff;
-  border-radius: 8px;
-  margin-bottom: 15px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-}
-
-/* 队列头部 */
-.queue-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 15px;
-  background: #f5f7fa;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.queue-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.queue-title i {
-  font-size: 16px;
-  color: #409eff;
-}
-
-/* Tab切换按钮组 */
-.queue-tabs {
-  display: flex;
-  gap: 0;
-}
-
-.queue-tab {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 13px;
-  color: #606266;
-  background: transparent;
-  border-bottom: 2px solid transparent;
-  user-select: none;
-}
-
-.queue-tab:hover {
-  color: #409eff;
-}
-
-.queue-tab.active {
-  color: #409eff;
-  font-weight: 600;
-  border-bottom-color: #409eff;
-}
-
-.queue-tab i {
-  font-size: 13px;
-}
-
-.queue-tab .tab-badge {
-  margin-left: 4px;
-}
-
-.plan-queue-panel .panel-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* 右侧纵向生产计划列表 */
-.plan-list-vertical {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.plan-item-vertical {
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  padding: 12px;
-  background: #f7f9fc;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.plan-item-vertical:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
-  transform: translateY(-1px);
-}
-
-.plan-item-vertical.plan-producing {
-  background: #f0f9ff;
-  border-color: #67c23a;
-  animation: pulse-green 1.5s infinite;
-}
-
-.plan-item-vertical.plan-online {
-  background: #fdf6ec;
-  border-color: #e6a23c;
-}
-
-.plan-item-vertical.plan-ready {
-  background: #ecf5ff;
-  border-color: #409eff;
-}
-
-.plan-item-vertical.plan-selected {
-  border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
-}
-
-.plan-item-top {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  justify-content: space-between;
-}
-
-.plan-order-dot {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  color: #fff;
-  background: #909399;
-  flex-shrink: 0;
-}
-
-.plan-order-dot.order-producing { background: #67c23a; animation: blink-green-dot 1.2s infinite; }
-.plan-order-dot.order-online { background: #e6a23c; }
-.plan-order-dot.order-ready { background: #409eff; }
-.plan-order-dot.order-new { background: #909399; }
-
-.plan-title-text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
-  color: #303133;
-}
-
-.plan-id { font-weight: 600; }
-.plan-coil { color: #606266; }
-
-.plan-item-bottom {
-  display: flex;
-  gap: 16px;
-  font-size: 12px;
-  color: #606266;
-}
-
-.plan-queue-panel .panel-title i {
-  margin-right: 8px;
-  color: #409eff;
-}
-
-.plan-queue-list {
-  max-height: none;
-  overflow-y: visible;
-  padding: 15px 20px;
-}
-
-.plan-items {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  padding-bottom: 5px;
-}
-
-.plan-item {
-  min-width: 220px;
-  background: #f5f7fa;
-  border: 2px solid #e4e7ed;
-  border-radius: 6px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-
-.plan-item:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
-  transform: translateY(-2px);
-}
-
-.plan-item.plan-producing {
-  background: #f0f9ff;
-  border-color: #67c23a;
-  animation: pulse-green 1.5s infinite;
-}
-
-.plan-item.plan-online {
-  background: #fdf6ec;
-  border-color: #e6a23c;
-}
-
-.plan-item.plan-ready {
-  background: #ecf5ff;
-  border-color: #409eff;
-}
-
-.plan-item.plan-selected {
-  background: #f0f9ff;
-  border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
-}
-
-/* 绿色闪烁动画 */
-@keyframes pulse-green {
-  0%, 100% {
+  </script>
+  
+  <style scoped>
+  .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;
-    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
   }
-  50% {
-    border-color: #85ce61;
-    box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.6), 0 0 15px rgba(103, 194, 58, 0.4);
+  
+  .device-card.has-data:hover {
+    border-color: #67c23a;
+    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
   }
-}
-
-.plan-order {
-  width: 28px;
-  height: 28px;
-  background: #909399;
-  color: #fff;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.plan-order.order-producing {
-  background: #67c23a;
-  animation: blink-green-dot 1.2s infinite;
-}
-
-.plan-order.order-online {
-  background: #e6a23c;
-}
-
-.plan-order.order-ready {
-  background: #409eff;
-}
-
-.plan-order.order-new {
-  background: #909399;
-}
-
-/* 绿色点闪烁动画 */
-@keyframes blink-green-dot {
-  0%, 100% {
+  
+  .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;
+    font-weight: 500;
+  }
+  
+  .status-working {
+    color: #67c23a;
+  }
+  
+  .status-idle {
+    color: #909399;
+  }
+  
+  .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;
+  }
+  
+  .section-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 10px;
+    margin: 8px 0 14px;
+  }
+  
+  .summary-item {
+    background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
+    border: 1px solid #e0e6ed;
+    border-radius: 6px;
+    padding: 10px 12px;
+    font-size: 13px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+  
+  .summary-label {
+    color: #606266;
+    font-weight: 600;
+  }
+  
+  .summary-value {
+    color: #1f2d3d;
+    font-weight: 700;
+  }
+  
+  /* 段落色系 */
+  .entry-area .section-header { border-bottom-color: #409eff; }
+  .entry-area .summary-value { color: #409eff; }
+  .furnace-area .section-header { border-bottom-color: #e6a23c; }
+  .furnace-area .summary-value { color: #e6a23c; }
+  .coat-area .section-header { border-bottom-color: #67c23a; }
+  .coat-area .summary-value { color: #67c23a; }
+  .exit-area .section-header { border-bottom-color: #909399; }
+  .exit-area .summary-value { color: #909399; }
+  
+  .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%;
+    font-size: 13px;
+  }
+  
+  .info-table tr {
+    border-bottom: 1px solid #f5f5f5;
+  }
+  
+  .info-table tr:last-child {
+    border-bottom: none;
+  }
+  
+  .info-table td {
+    padding: 8px 0;
+    line-height: 1.6;
+  }
+  
+  .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;
+  }
+  
+  .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;
+    margin-bottom: 4px;
+    font-family: 'Arial', sans-serif;
+  }
+  
+  .data-unit {
+    font-size: 12px;
+    color: #999;
+  }
+  
+  .btn-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .action-btn {
+    margin-bottom: 8px;
+    width: 80px;
+    height: 40px;
+  }
+  
+  /* 加载状态 */
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100px 0;
+    color: #409eff;
+    font-size: 16px;
+  }
+  
+  .loading-container .el-icon-loading {
+    font-size: 40px;
+    margin-bottom: 15px;
+    animation: rotating 2s linear infinite;
+  }
+  
+  @keyframes rotating {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  
+  /* 生产计划队列面板 */
+  .plan-queue-panel {
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+  }
+  
+  /* 队列头部 */
+  .queue-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 15px;
+    background: #f5f7fa;
+    border-bottom: 1px solid #e4e7ed;
+  }
+  
+  .queue-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  .queue-title i {
+    font-size: 16px;
+    color: #409eff;
+  }
+  
+  /* Tab切换按钮组 */
+  .queue-tabs {
+    display: flex;
+    gap: 0;
+  }
+  
+  .queue-tab {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 13px;
+    color: #606266;
+    background: transparent;
+    border-bottom: 2px solid transparent;
+    user-select: none;
+  }
+  
+  .queue-tab:hover {
+    color: #409eff;
+  }
+  
+  .queue-tab.active {
+    color: #409eff;
+    font-weight: 600;
+    border-bottom-color: #409eff;
+  }
+  
+  .queue-tab i {
+    font-size: 13px;
+  }
+  
+  .queue-tab .tab-badge {
+    margin-left: 4px;
+  }
+  
+  .plan-queue-panel .panel-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  /* 右侧纵向生产计划列表 */
+  .plan-list-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .plan-item-vertical {
+    border: 1px solid #e4e7ed;
+    border-radius: 6px;
+    padding: 12px;
+    background: #f7f9fc;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .plan-item-vertical:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+    transform: translateY(-1px);
+  }
+  
+  .plan-item-vertical.plan-producing {
+    background: #f0f9ff;
+    border-color: #67c23a;
+    animation: pulse-green 1.5s infinite;
+  }
+  
+  .plan-item-vertical.plan-online {
+    background: #fdf6ec;
+    border-color: #e6a23c;
+  }
+  
+  .plan-item-vertical.plan-ready {
+    background: #ecf5ff;
+    border-color: #409eff;
+  }
+  
+  .plan-item-vertical.plan-selected {
+    border-color: #409eff;
+    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  }
+  
+  .plan-item-top {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+  }
+  
+  .plan-order-dot {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: #fff;
+    background: #909399;
+    flex-shrink: 0;
+  }
+  
+  .plan-order-dot.order-producing { background: #67c23a; animation: blink-green-dot 1.2s infinite; }
+  .plan-order-dot.order-online { background: #e6a23c; }
+  .plan-order-dot.order-ready { background: #409eff; }
+  .plan-order-dot.order-new { background: #909399; }
+  
+  .plan-title-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: #303133;
+  }
+  
+  .plan-id { font-weight: 600; }
+  .plan-coil { color: #606266; }
+  
+  .plan-item-bottom {
+    display: flex;
+    gap: 16px;
+    font-size: 12px;
+    color: #606266;
+  }
+  
+  .plan-queue-panel .panel-title i {
+    margin-right: 8px;
+    color: #409eff;
+  }
+  
+  .plan-queue-list {
+    max-height: none;
+    overflow-y: visible;
+    padding: 15px 20px;
+  }
+  
+  .plan-items {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding-bottom: 5px;
+  }
+  
+  .plan-item {
+    min-width: 220px;
+    background: #f5f7fa;
+    border: 2px solid #e4e7ed;
+    border-radius: 6px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    transition: all 0.3s;
+    cursor: pointer;
+  }
+  
+  .plan-item:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .plan-item.plan-producing {
+    background: #f0f9ff;
+    border-color: #67c23a;
+    animation: pulse-green 1.5s infinite;
+  }
+  
+  .plan-item.plan-online {
+    background: #fdf6ec;
+    border-color: #e6a23c;
+  }
+  
+  .plan-item.plan-ready {
+    background: #ecf5ff;
+    border-color: #409eff;
+  }
+  
+  .plan-item.plan-selected {
+    background: #f0f9ff;
+    border-color: #409eff;
+    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  }
+  
+  /* 绿色闪烁动画 */
+  @keyframes pulse-green {
+    0%, 100% {
+      border-color: #67c23a;
+      box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
+    }
+    50% {
+      border-color: #85ce61;
+      box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.6), 0 0 15px rgba(103, 194, 58, 0.4);
+    }
+  }
+  
+  .plan-order {
+    width: 28px;
+    height: 28px;
+    background: #909399;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+  
+  .plan-order.order-producing {
     background: #67c23a;
-    box-shadow: 0 0 5px rgba(103, 194, 58, 0.5);
+    animation: blink-green-dot 1.2s infinite;
   }
-  50% {
-    background: #85ce61;
-    box-shadow: 0 0 10px rgba(103, 194, 58, 0.8);
+  
+  .plan-order.order-online {
+    background: #e6a23c;
+  }
+  
+  .plan-order.order-ready {
+    background: #409eff;
+  }
+  
+  .plan-order.order-new {
+    background: #909399;
+  }
+  
+  /* 绿色点闪烁动画 */
+  @keyframes blink-green-dot {
+    0%, 100% {
+      background: #67c23a;
+      box-shadow: 0 0 5px rgba(103, 194, 58, 0.5);
+    }
+    50% {
+      background: #85ce61;
+      box-shadow: 0 0 10px rgba(103, 194, 58, 0.8);
+    }
+  }
+  
+  .plan-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .plan-row {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+  }
+  
+  .plan-label {
+    color: #909399;
+    min-width: 60px;
+    flex-shrink: 0;
+  }
+  
+  .plan-value {
+    color: #303133;
+    font-weight: 500;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .plan-status {
+    display: flex;
+    justify-content: flex-end;
+  }
+  
+  /* WebSocket 状态栏 */
+  .ws-status-bar {
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+    padding: 10px;
+    background: #f5f7fa;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    align-items: center;
   }
-}
 
-.plan-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
+  .ws-status-left {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+  }
 
-.plan-row {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-}
+  .ws-status-right {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 
-.plan-label {
-  color: #909399;
-  min-width: 60px;
-  flex-shrink: 0;
-}
-
-.plan-value {
-  color: #303133;
-  font-weight: 500;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.plan-status {
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* WebSocket 状态栏 */
-.ws-status-bar {
-  display: flex;
-  gap: 15px;
-  padding: 10px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  align-items: center;
-}
-
-.ws-status-bar i {
-  font-size: 18px;
-  color: #606266;
-  cursor: pointer;
-}
-
-/* 分区头部增强 */
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.section-info {
-  font-size: 13px;
-  color: #67c23a;
-  font-weight: 500;
-}
-
-/* 信号信息面板 */
-.signal-info {
-  padding: 10px 0;
-}
-
-.signal-info.signal-warning {
-  background: #fef0f0;
-  padding: 15px;
-  border-radius: 4px;
-  border: 1px solid #fde2e2;
-}
-
-.signal-info.signal-success {
-  background: #f0f9ff;
-  padding: 15px;
-  border-radius: 4px;
-  border: 1px solid #c6e2ff;
-}
-
-.signal-info.signal-complete {
-  background: #f0f9ff;
-  padding: 15px;
-  border-radius: 4px;
-  border: 1px solid #b3e19d;
-}
-
-.signal-detail {
-  margin-top: 10px;
-  font-size: 13px;
-  line-height: 2;
-}
-
-.signal-detail div {
-  padding: 4px 0;
-}
-
-.text-warning {
-  color: #e6a23c;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.text-success {
-  color: #67c23a;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-/* 计算结果头部 */
-.calc-result-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
-  font-size: 14px;
-}
-
-/* 生产计划详情 */
-.plan-detail-content {
-  overflow-y: auto;
-}
-
-/* 位置信息提示卡片 */
-.position-alert {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 15px;
-  margin-bottom: 15px;
-  background: #f0f9ff;
-  border: 1px solid #b3d8ff;
-  border-left: 4px solid #409eff;
-  border-radius: 4px;
-}
-
-.position-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: #409eff;
-  border-radius: 50%;
-  color: #fff;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.position-info {
-  flex: 1;
-}
-
-.position-label {
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 4px;
-}
-
-.position-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 2px;
-}
-
-.position-code {
-  font-size: 12px;
-  color: #606266;
-  font-family: 'Courier New', monospace;
-}
-
-.plan-time-info {
-  margin-top: 15px;
-  padding-top: 15px;
-  border-top: 1px solid #ebeef5;
-}
-
-.info-subtitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: #606266;
-  margin-bottom: 10px;
-}
-
-.panel-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.panel-title i {
-  margin-right: 5px;
-}
-</style>
+  .ws-status-right .el-button {
+    min-width: 140px;
+    height: 34px;
+    font-weight: 600;
+  }
+  
+  .ws-status-bar i {
+    font-size: 18px;
+    color: #606266;
+    cursor: pointer;
+  }
+  
+  /* 分区头部增强 */
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .section-info {
+    font-size: 13px;
+    color: #67c23a;
+    font-weight: 500;
+  }
+  
+  /* 信号信息面板 */
+  .signal-info {
+    padding: 10px 0;
+  }
+  
+  .signal-info.signal-warning {
+    background: #fef0f0;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #fde2e2;
+  }
+  
+  .signal-info.signal-success {
+    background: #f0f9ff;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #c6e2ff;
+  }
+  
+  .signal-info.signal-complete {
+    background: #f0f9ff;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #b3e19d;
+  }
+  
+  .signal-detail {
+    margin-top: 10px;
+    font-size: 13px;
+    line-height: 2;
+  }
+  
+  .signal-detail div {
+    padding: 4px 0;
+  }
+  
+  .text-warning {
+    color: #e6a23c;
+    font-weight: 600;
+    font-size: 14px;
+  }
+  
+  .text-success {
+    color: #67c23a;
+    font-weight: 600;
+    font-size: 14px;
+  }
+  
+  /* 计算结果头部 */
+  .calc-result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ebeef5;
+    font-size: 14px;
+  }
+  
+  /* 生产计划详情 */
+  .plan-detail-content {
+    overflow-y: auto;
+  }
+  
+  /* 位置信息提示卡片 */
+  .position-alert {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 15px;
+    margin-bottom: 15px;
+    background: #f0f9ff;
+    border: 1px solid #b3d8ff;
+    border-left: 4px solid #409eff;
+    border-radius: 4px;
+  }
+  
+  .position-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: #409eff;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 20px;
+    flex-shrink: 0;
+  }
+  
+  .position-info {
+    flex: 1;
+  }
+  
+  .position-label {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 4px;
+  }
+  
+  .position-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 2px;
+  }
+  
+  .position-code {
+    font-size: 12px;
+    color: #606266;
+    font-family: 'Courier New', monospace;
+  }
+  
+  .plan-time-info {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #ebeef5;
+  }
+  
+  .info-subtitle {
+    font-size: 13px;
+    font-weight: 600;
+    color: #606266;
+    margin-bottom: 10px;
+  }
+  
+  .panel-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .panel-title i {
+    margin-right: 5px;
+  }
+  </style>
+  
\ No newline at end of file