diff --git a/apps/l2/src/api/business/dashboard.js b/apps/l2/src/api/business/dashboard.js
new file mode 100644
index 0000000..4f3f643
--- /dev/null
+++ b/apps/l2/src/api/business/dashboard.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 获取当前生产中的计划信息
+export function getCurrentProducingPlan() {
+  return request({
+    url: '/api/business/dashboard/currentPlan',
+    method: 'get'
+  })
+}
+
+// 获取当前生产卷的关键工艺参数
+export function getCurrentProcessParams() {
+  return request({
+    url: '/api/business/dashboard/currentProcess',
+    method: 'get'
+  })
+}
+
diff --git a/apps/l2/src/api/l2/sendJob.js b/apps/l2/src/api/l2/sendJob.js
new file mode 100644
index 0000000..22ce6a7
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/api/l2/sendTemplate.js b/apps/l2/src/api/l2/sendTemplate.js
new file mode 100644
index 0000000..b152e4d
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/api/l2/setupValue.js b/apps/l2/src/api/l2/setupValue.js
new file mode 100644
index 0000000..82eabc3
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/api/l2/template.js b/apps/l2/src/api/l2/template.js
new file mode 100644
index 0000000..d1d319e
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/components/FloatingPanel.vue b/apps/l2/src/components/FloatingPanel.vue
new file mode 100644
index 0000000..0ee79a7
--- /dev/null
+++ b/apps/l2/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: 2000;
+  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/apps/l2/src/components/TrackMeasure/index.vue b/apps/l2/src/components/TrackMeasure/index.vue
index 46827de..48dbc85 100644
--- a/apps/l2/src/components/TrackMeasure/index.vue
+++ b/apps/l2/src/components/TrackMeasure/index.vue
@@ -80,10 +80,10 @@ export default {
     // 图表类型，使用i18n动态生成
     chartTypes() {
       return [
-        { value: 'entry', label: this.$t('track.entryDataMonitor') },
-        { value: 'furnace', label: this.$t('track.furnaceDataMonitor') },
-        { value: 'coat', label: this.$t('track.coatDataMonitor') },
-        { value: 'exit', label: this.$t('track.exitDataMonitor') }
+        { value: 'entry', label: this.$t('track.entrySection') },
+        { value: 'furnace', label: this.$t('track.furnaceSection') },
+        { value: 'coat', label: this.$t('track.coatingSection') },
+        { value: 'exit', label: this.$t('track.exitSection') }
       ];
     }
   },
diff --git a/apps/l2/src/i18n/zh-CN.js b/apps/l2/src/i18n/zh-CN.js
index 2fb7ddd..a38d80d 100644
--- a/apps/l2/src/i18n/zh-CN.js
+++ b/apps/l2/src/i18n/zh-CN.js
@@ -1,3 +1,5 @@
+import track from './zh-CN/track'
+
 export default {
   common: {
     title: '镀锌机组及生产工艺管理系统',
@@ -348,128 +350,5 @@ export default {
     getDataFailed: '获取数据失败，请稍后重试',
     startTimeNotLaterThanEndTime: '开始时间不能晚于结束时间'
   },
-  track: {
-    deviceList: '设备列表',
-    loading: '加载状态',
-    websocketConnectionStatus: 'WebSocket 连接状态指示',
-    entrySection: '入口段区域',
-    furnaceSection: '熔炉段区域',
-    coatingSection: '涂层段区域',
-    exitSection: '出口段区域',
-    otherSection: '其他段',
-    productionPlan: '生产计划',
-    noProductionPlan: '暂无生产计划',
-    planId: '计划ID',
-    coilid: '钢卷号',
-    steelGrade: '钢种',
-    sequence: '顺序',
-    productionPlanDetail: '生产计划详情',
-    currentPosition: '当前位置',
-    seqid: '顺序号',
-    status: '状态',
-    entryThickness: '入口厚度',
-    entryWidth: '入口宽度',
-    entryWeight: '入口重量',
-    entryLength: '入口长度',
-    orderNo: '订单号',
-    unitCode: '机组号',
-    planType: '计划类型',
-    timeInfo: '时间信息',
-    onlineDate: '上线时间',
-    startDate: '开始时间',
-    endDate: '结束时间',
-    recentOperation: '最近操作',
-    manualOperation: '手动操作',
-    autoOperation: '自动操作',
-    operationType: '操作类型',
-    por: '开卷机',
-    tr: '卷取机',
-    virtualCoil: '虚拟卷',
-    operation: '操作',
-    coilOnline: '钢卷上线',
-    manualUnload: '手动卸卷',
-    allReturn: '整卷回退',
-    halfReturn: '半卷回退',
-    unloadAndBlock: '卸卷并封闭',
-    basicInfo: '基本信息',
-    positionName: '位置名称',
-    positionCode: '位置代号',
-    realTimeData: '设备实时数据',
-    adjustmentTool: '调整工具',
-    currentPosition: '当前位置',
-    targetPosition: '目标位置',
-    confirmAdjustment: '确认调整',
-    calculationSetupResult: '计算设定结果',
-    calculationSuccess: '计算成功',
-    calculationFailed: '计算失败',
-    passno: '道次号',
-    entryThick: '入口厚度(mm)',
-    exitThick: '出口厚度(mm)',
-    reduction: '压下率(%)',
-    rollSpeed: '轧制速度',
-    rollForce: '轧制力(kN)',
-    entryTension: '入口张力',
-    exitTension: '出口张力',
-    noCalculationResult: '无计算结果数据',
-    porIdx: '开卷机编号',
-    trIdx: '卷取机编号',
-    pleaseInputPlanId: '请输入计划ID',
-    pleaseInputCoilid: '请输入钢卷号',
-    operationType: '操作类型',
-    returnMatId: '回退卷号',
-    pleaseInputReturnMatId: '请输入回退卷号',
-    returnWeight: '回退重量',
-    pleaseInputReturnWeight: '请输入回退重量',
-    producing: '生产中',
-    product: '生产完成',
-    payOver: '甩尾',
-    throwTail: '甩尾',
-    onlineNotice: '钢卷上线通知',
-    unloadNotice: '卸卷操作通知',
-    producingNotice: '生产状态变更',
-    productNotice: '生产完成通知',
-    payOverNotice: '甩尾操作提示',
-    throwTailNotice: '甩尾操作提示',
-    allReturnNotice: '整卷回退通知',
-    halfReturnNotice: '半卷回退通知',
-    blockNotice: '封闭操作通知',
-    operationNotice: '操作通知',
-    returnRemark: '回退备注',
-    coilLength: '钢卷长度',
-    outputCoilLength: '产出钢卷长度',
-    pleaseInputOutputCoilLength: '请输入产出钢卷长度',
-    tensionPorBr1: '开卷张力1#',
-    tensionPorBr2: '开卷张力2#',
-    stripSpeed: '带钢速度',
-    weldStatus: '焊机状态',
-    celLength: '入口活套位置',
-    celCapacity: '入口活套套量',
-    tensionCel: '入口活套张力',
-    cleaningVoltage: '清洗电压',
-    cleaningCurrent: '清洗电流',
-    alkaliConcentration: '碱液浓度',
-    alkaliTemperature: '碱液温度',
-    phfExitStripTemp: 'PH炉出口温度',
-    potTemperature: '锌锅温度',
-    gasConsumption: '燃气消耗',
-    rtfExitStripTemp: '加热段出口温度',
-    zincPotPower: '锌锅功率',
-    jcsExitStripTemp: '冷却段出口温度',
-    coolingTowerStripTemp: '冷却塔温度',
-    scsExitStripTemp: '均衡段出口温度',
-    tensionBr5Tm: 'BR5-TM张力',
-    stripSpeedTmExit: 'TM出口速度',
-    tmElongation: '光整延伸率',
-    tensionTlBr7: 'TL-BR7张力',
-    tlElongation: '拉矫延伸率',
-    cxlLength: '出口活套位置',
-    cxlCapacity: '出口活套套量',
-    tensionCxl: '出口活套张力',
-    inspectionStatus: '检查状态',
-    coilLength: '钢卷长度',
-    speedExitSection: '出口段速度',
-    tensionBr9Tr: 'BR9-TR张力',
-    avrCoatingWeightTop: '顶部涂重',
-    avrCoatingWeightBottom: '底部涂重'
-  },
+  track
 }
diff --git a/apps/l2/src/i18n/zh-CN/track.js b/apps/l2/src/i18n/zh-CN/track.js
new file mode 100644
index 0000000..07b31d7
--- /dev/null
+++ b/apps/l2/src/i18n/zh-CN/track.js
@@ -0,0 +1,130 @@
+const track = {
+  chartView: '图表视图',
+  connectionStatus: '连接状态',
+  connected: '已连接',
+  connecting: '连接中',
+  deviceList: '设备列表',
+  loading: '加载状态',
+  websocketConnectionStatus: 'WebSocket 连接状态指示',
+  entrySection: '入口段区域',
+  furnaceSection: '熔炉段区域',
+  coatingSection: '涂层段区域',
+  exitSection: '出口段区域',
+  otherSection: '其他段',
+  productionPlan: '生产计划',
+  noProductionPlan: '暂无生产计划',
+  planId: '计划ID',
+  coilid: '钢卷号',
+  steelGrade: '钢种',
+  sequence: '顺序',
+  productionPlanDetail: '生产计划详情',
+  currentPosition: '当前位置',
+  seqid: '顺序号',
+  status: '状态',
+  entryThickness: '入口厚度',
+  entryWidth: '入口宽度',
+  entryWeight: '入口重量',
+  entryLength: '入口长度',
+  orderNo: '订单号',
+  unitCode: '机组号',
+  planType: '计划类型',
+  timeInfo: '时间信息',
+  onlineDate: '上线时间',
+  startDate: '开始时间',
+  endDate: '结束时间',
+  recentOperation: '最近操作',
+  manualOperation: '手动操作',
+  autoOperation: '自动操作',
+  operationType: '操作类型',
+  por: '开卷机',
+  tr: '卷取机',
+  virtualCoil: '虚拟卷',
+  operation: '操作',
+  coilOnline: '钢卷上线',
+  manualUnload: '手动卸卷',
+  allReturn: '整卷回退',
+  halfReturn: '半卷回退',
+  unloadAndBlock: '卸卷并封闭',
+  basicInfo: '基本信息',
+  positionName: '位置名称',
+  positionCode: '位置代号',
+  realTimeData: '设备实时数据',
+  adjustmentTool: '调整工具',
+  currentPosition: '当前位置',
+  targetPosition: '目标位置',
+  confirmAdjustment: '确认调整',
+  calculationSetupResult: '计算设定结果',
+  calculationSuccess: '计算成功',
+  calculationFailed: '计算失败',
+  passno: '道次号',
+  entryThick: '入口厚度(mm)',
+  exitThick: '出口厚度(mm)',
+  reduction: '压下率(%)',
+  rollSpeed: '轧制速度',
+  rollForce: '轧制力(kN)',
+  entryTension: '入口张力',
+  exitTension: '出口张力',
+  noCalculationResult: '无计算结果数据',
+  porIdx: '开卷机编号',
+  trIdx: '卷取机编号',
+  pleaseInputPlanId: '请输入计划ID',
+  pleaseInputCoilid: '请输入钢卷号',
+  operationType: '操作类型',
+  returnMatId: '回退卷号',
+  pleaseInputReturnMatId: '请输入回退卷号',
+  returnWeight: '回退重量',
+  pleaseInputReturnWeight: '请输入回退重量',
+  producing: '生产中',
+  product: '生产完成',
+  payOver: '甩尾',
+  throwTail: '甩尾',
+  onlineNotice: '钢卷上线通知',
+  unloadNotice: '卸卷操作通知',
+  producingNotice: '生产状态变更',
+  productNotice: '生产完成通知',
+  payOverNotice: '甩尾操作提示',
+  throwTailNotice: '甩尾操作提示',
+  allReturnNotice: '整卷回退通知',
+  halfReturnNotice: '半卷回退通知',
+  blockNotice: '封闭操作通知',
+  operationNotice: '操作通知',
+  returnRemark: '回退备注',
+  coilLength: '钢卷长度',
+  outputCoilLength: '产出钢卷长度',
+  pleaseInputOutputCoilLength: '请输入产出钢卷长度',
+  tensionPorBr1: '开卷张力1#',
+  tensionPorBr2: '开卷张力2#',
+  stripSpeed: '带钢速度',
+  weldStatus: '焊机状态',
+  celLength: '入口活套位置',
+  celCapacity: '入口活套套量',
+  tensionCel: '入口活套张力',
+  cleaningVoltage: '清洗电压',
+  cleaningCurrent: '清洗电流',
+  alkaliConcentration: '碱液浓度',
+  alkaliTemperature: '碱液温度',
+  phfExitStripTemp: 'PH炉出口温度',
+  potTemperature: '锌锅温度',
+  gasConsumption: '燃气消耗',
+  rtfExitStripTemp: '加热段出口温度',
+  zincPotPower: '锌锅功率',
+  jcsExitStripTemp: '冷却段出口温度',
+  coolingTowerStripTemp: '冷却塔温度',
+  scsExitStripTemp: '均衡段出口温度',
+  tensionBr5Tm: 'BR5-TM张力',
+  stripSpeedTmExit: 'TM出口速度',
+  tmElongation: '光整延伸率',
+  tensionTlBr7: 'TL-BR7张力',
+  tlElongation: '拉矫延伸率',
+  cxlLength: '出口活套位置',
+  cxlCapacity: '出口活套套量',
+  tensionCxl: '出口活套张力',
+  inspectionStatus: '检查状态',
+  coilLength: '钢卷长度',
+  speedExitSection: '出口段速度',
+  tensionBr9Tr: 'BR9-TR张力',
+  avrCoatingWeightTop: '顶部涂重',
+  avrCoatingWeightBottom: '底部涂重'
+}
+
+export default track
\ No newline at end of file
diff --git a/apps/l2/src/views/index.vue b/apps/l2/src/views/index.vue
index 7bae193..d6e6273 100644
--- a/apps/l2/src/views/index.vue
+++ b/apps/l2/src/views/index.vue
@@ -1,64 +1,181 @@
 <template>
-  <div class="tech-homepage">
-    <!-- 时间与主体区域 -->
-    <el-row :gutter="20" style="padding: 20px;">
-      <el-col :span="18">
-        <HomeMain :feature-cards="featureCards" />
-      </el-col>
-      <el-col :span="6">
+  <div class="industrial-dashboard">
+    <!-- Header: 系统标题和当前时间 -->
+    <div class="dashboard-header">
+      <div class="header-left">
+        <h1 class="system-title">生产监控大屏</h1>
+        <p class="system-subtitle">实时生产数据与设备状态</p>
+      </div>
+      <div class="header-right">
         <CurrentTime />
+      </div>
+    </div>
+
+    <!-- KPI指标区域 -->
+    <el-row :gutter="20" class="kpi-section">
+      <el-col :span="6" v-for="(kpi, index) in kpiData" :key="index">
+        <el-card class="kpi-card" :class="`kpi-${index}`">
+          <div class="kpi-content">
+            <div class="kpi-icon">
+              <i :class="kpi.icon"></i>
+            </div>
+            <div class="kpi-info">
+              <div class="kpi-label">{{ kpi.label }}</div>
+              <div class="kpi-value">{{ kpi.value }}</div>
+              <div class="kpi-unit">{{ kpi.unit }}</div>
+            </div>
+            <div class="kpi-trend" :class="kpi.trend">
+              <i :class="kpi.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
+              <span>{{ kpi.change }}</span>
+            </div>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
 
-    <!-- 表格区域 -->
-    <el-row :gutter="5" style="padding: 0 20px 20px;">
-      <el-col :span="10">
+    <!-- 生产状态区域 -->
+    <el-row :gutter="20" class="status-section">
+      <el-col :span="12">
+        <el-card class="status-card">
+          <div slot="header" class="card-header">
+            <span>生产状态</span>
+            <el-tag :type="productionStatus.type" size="small">{{ productionStatus.text }}</el-tag>
+          </div>
+          <div class="status-content">
+            <div class="status-item">
+              <span class="status-label">当前钢卷号：</span>
+              <span class="status-value">{{ productionStatus.currentCoilId || '无' }}</span>
+            </div>
+            <div class="status-item">
+              <span class="status-label">带钢速度：</span>
+              <span class="status-value">{{ productionStatus.stripSpeed || '0' }} m/min</span>
+            </div>
+            <div class="status-item">
+              <span class="status-label">产线效率：</span>
+              <span class="status-value">{{ productionStatus.efficiency || '0' }}%</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="status-card">
+          <div slot="header" class="card-header">
+            <span>设备状态</span>
+          </div>
+          <div class="equipment-grid">
+            <div class="equipment-item" v-for="(equipment, index) in equipmentStatus" :key="index">
+              <div class="equipment-name">{{ equipment.name }}</div>
+              <el-tag :type="equipment.status === 'running' ? 'success' : equipment.status === 'warning' ? 'warning' : 'danger'" size="mini">
+                {{ equipment.statusText }}
+              </el-tag>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 数据表格区域 -->
+    <el-row :gutter="20" class="table-section">
+      <el-col :span="12">
         <el-card>
-          <div slot="header"><span>{{ $t('dashboard.alarmInfo') }}</span></div>
-          <!-- 第一个表格：绑定API获取的数据和列配置 -->
+          <div slot="header" class="card-header">
+            <span>系统告警信息</span>
+            <el-badge :value="alarmData.length" class="alarm-badge" v-if="alarmData.length > 0"></el-badge>
+          </div>
           <MiniTable 
             v-loading="tableLoading"
             :columns="alarmColumns" 
             :data="alarmData"
             :highlightOnRowClick="true"
-            tableHeight="300px"
+            tableHeight="280px"
           />
         </el-card>
       </el-col>
-      <el-col :span="14">
+      <el-col :span="12">
         <el-card>
-          <div slot="header"><span>{{ $t('dashboard.rollChangeInfo') }}</span></div>
+          <div slot="header" class="card-header">
+            <span>换辊信息</span>
+          </div>
           <MiniTable 
             v-loading="rollHistoryLoading"
             :columns="rollHistoryColumns"
             :data="rollHistoryData"
-            tableHeight="300px"
+            tableHeight="280px"
           />
         </el-card>
       </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="table-section">
       <el-col :span="24">
         <el-card>
-          <div slot="header"><span>{{ $t('dashboard.productionPlan') }}</span></div>
+          <div slot="header" class="card-header">
+            <span>生产计划</span>
+            <el-button type="text" size="small" @click="$router.push('/plan')">
+              查看全部
+              <i class="el-icon-arrow-right"></i>
+            </el-button>
+          </div>
           <MiniTable 
             v-loading="planLoading"
             :columns="planColumns"
             :data="planData"
-            tableHeight="300px"
+            tableHeight="280px"
           />
         </el-card>
       </el-col>
+    </el-row>
+
+    <!-- 过程跟踪区域 -->
+    <el-row :gutter="20" class="table-section">
       <el-col :span="24">
         <el-card>
-          <div slot="header"><span>{{ $t('dashboard.processTracking') }}</span></div>
+          <div slot="header" class="card-header">
+            <span>过程跟踪</span>
+            <el-button type="text" size="small" @click="$router.push('/track')">
+              查看详情
+              <i class="el-icon-arrow-right"></i>
+            </el-button>
+          </div>
           <TrackMeasure 
             v-loading="measureLoading"
             :columns="measureColumns"
             :data="measureData"
-            tableHeight="300px"
+            tableHeight="280px"
           />
         </el-card>
       </el-col>
     </el-row>
+
+    <!-- 快速访问菜单 -->
+    <el-row :gutter="20" class="quick-access-section">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="card-header">
+            <span>快速访问</span>
+          </div>
+          <div class="quick-access-grid">
+            <div 
+              class="access-item" 
+              v-for="(card, index) in featureCards" 
+              :key="index"
+              @click="$router.push(card.path)"
+            >
+              <div class="access-icon">
+                <i :class="`el-icon-${card.icon}`"></i>
+              </div>
+              <div class="access-info">
+                <div class="access-title">{{ card.title }}</div>
+                <div class="access-desc">{{ card.desc }}</div>
+              </div>
+              <div class="access-arrow">
+                <i class="el-icon-arrow-right"></i>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template> 
 
@@ -66,17 +183,113 @@
 import CurrentTime from "./components/CurrentTime.vue";
 import HomeMain from "./components/HomeMain.vue";
 import MiniTable from "./components/MiniTable.vue";
-// 引入日志API
+// 引入日志API / 生产相关API
 import { getLogDataPage } from "@/api/l2/log"; 
 import { getRollHistorytList } from '@/api/l2/roller'
 import { listPlan } from "@/api/l2/plan";
 import TrackMeasure from "@/components/TrackMeasure/index.vue";
+import { getCurrentProducingPlan, getCurrentProcessParams } from "@/api/business/dashboard";
 
 export default {
   name: "Index",
   components: { CurrentTime, HomeMain, MiniTable, TrackMeasure },
   data() {
     return {
+      // KPI指标数据
+      kpiData: [
+        {
+          label: '日产量',
+          value: '0',
+          unit: 't',
+          icon: 'el-icon-data-line',
+          trend: 'up',
+          change: '+5.2%'
+        },
+        {
+          label: '成材率',
+          value: '0',
+          unit: '%',
+          icon: 'el-icon-pie-chart',
+          trend: 'up',
+          change: '+1.8%'
+        },
+        {
+          label: '成品卷数',
+          value: '0',
+          unit: '卷',
+          icon: 'el-icon-box',
+          trend: 'up',
+          change: '+12'
+        },
+        {
+          label: '产线效率',
+          value: '0',
+          unit: '%',
+          icon: 'el-icon-cpu',
+          trend: 'down',
+          change: '-2.1%'
+        }
+      ],
+      // 生产状态
+      productionStatus: {
+        type: 'success',
+        text: '运行中',
+        currentCoilId: '',
+        stripSpeed: '0',
+        efficiency: '0'
+      },
+      // 设备状态
+      equipmentStatus: [
+        { name: '入口段', status: 'running', statusText: '运行中' },
+        { name: '炉区', status: 'running', statusText: '运行中' },
+        { name: '镀层段', status: 'running', statusText: '运行中' },
+        { name: '出口段', status: 'running', statusText: '运行中' },
+        { name: '张力控制', status: 'running', statusText: '运行中' },
+        { name: '温度控制', status: 'running', statusText: '运行中' }
+      ],
+      // 快速访问功能卡片
+      featureCards: [
+        { title: "生产计划", desc: "生产计划管理", icon: "s-order", path: "/plan" },
+        { title: "日志记录", desc: "日志记录管理", icon: "document", path: "/log" },
+        { title: "轧辊管理", desc: "轧辊管理", icon: "setting", path: "/roller" },
+        { title: "停机管理", desc: "停机管理", icon: "warning", path: "/stop" },
+        { title: "过程跟踪", desc: "实时过程监控", icon: "monitor", path: "/track" },
+        { title: "实绩数据", desc: "查看生产实绩数据", icon: "data-analysis", path: "/pdo" }
+      ],
+      // 表格列配置（与日志字段对应）
+      alarmColumns: [
+        { label: "发生时间", prop: "timestamp", width: "200px" },
+        { label: "报警模块", prop: "module", width: "120px" },
+        { label: "报警类型", prop: "logtype", width: "120px" },
+        { label: "警报内容", prop: "logtext" },
+      ],
+      rollHistoryColumns: [
+        { label: "换辊号", prop: "changeid", width: "120px" },
+        { label: "轧辊号", prop: "rollid", width: "120px" },
+        { label: "机组", prop: "seton", width: "80px" },
+        { label: "班次", prop: "shift", width: "80px" },
+        { label: "班组", prop: "crew", width: "80px" },
+        { label: "机架号", prop: "standid", width: "100px" },
+        { label: "位置", prop: "position", width: "80px" },
+        { label: '直径', prop: 'diameter', width: '100px' },
+        { label: '粗糙度', prop: 'rough', width: '100px' },
+        { label: '凸度', prop: 'crown', width: '100px' },
+        { label: '成分', prop: 'composition', width: '100px' },
+      ],
+      planColumns: [
+        { label: '顺序号', prop: 'seqid', width: '80px' },
+        { label: '钢卷号', prop: 'coilid', width: '120px' },
+        { label: '机组号', prop: 'unitCode', width: '100px' },
+        { label: '计划号', prop: 'planid', width: '120px' },
+        { label: '计划类型', prop: 'planType', width: '100px' },
+        { label: '钢种', prop: 'steelGrade', width: '120px' },
+        { label: '出口卷号', prop: 'exitCoilid', width: '120px' },
+        { label: '订单号', prop: 'orderNo', width: '120px' },
+        { label: '客户代码', prop: 'custommerCode', width: '120px' },
+        { label: '上线时间', prop: 'onlineDate', width: '160px' },
+        { label: '开始时间', prop: 'startDate', width: '160px' },
+        { label: '结束时间', prop: 'endDate', width: '160px' },
+      ],
       alarmData: [], // 表格数据（从API获取）
       queryForm: { pageNum: 1, pageSize: 10 }, // 分页参数
       tableLoading: false, // 加载状态
@@ -84,92 +297,66 @@ export default {
       rollHistoryLoading: false, // 轧辊历史数据加载状态
       planData: [], // 生产计划数据
       planLoading: false, // 生产计划数据加载状态
+      measureData: [], // 过程跟踪数据
+      measureLoading: false, // 过程跟踪加载状态
+      measureColumns: [] // 过程跟踪列配置
     };
   },
-  computed: {
-    // 功能卡片配置
-    featureCards() {
-      return [
-        { title: this.$t('dashboard.productionPlan'), desc: this.$t('dashboard.productionPlanDesc'), icon: "table", path: "/plan" },
-        { title: this.$t('dashboard.logRecord'), desc: this.$t('dashboard.logRecordDesc'), icon: "log", path: "/log" },
-        { title: this.$t('dashboard.rollManagement'), desc: this.$t('dashboard.rollManagementDesc'), icon: "redis", path: "/roller" },
-        { title: this.$t('dashboard.shutdownManagement'), desc: this.$t('dashboard.shutdownManagementDesc'), icon: "bug", path: "/stop" },
-      ];
-    },
-    // 表格列配置（与日志字段对应）
-    alarmColumns() {
-      return [
-        { label: this.$t('dashboard.occurTime'), prop: "timestamp", width: "200px" },
-        { label: this.$t('dashboard.alarmModule'), prop: "module", width: "60px" },
-        { label: this.$t('dashboard.alarmType'), prop: "logtype" },
-      ];
-    },
-    rollHistoryColumns() {
-      return [
-        { label: this.$t('dashboard.rollChangeId'), prop: "changeid" },
-        { label: this.$t('dashboard.rollId'), prop: "rollid" },
-        { label: this.$t('dashboard.unit'), prop: "seton", width: "80px" },
-        { label: this.$t('dashboard.shift'), prop: "shift", width: "60px" },
-        { label: this.$t('dashboard.crew'), prop: "crew", width: "60px" },
-        { label: this.$t('dashboard.standId'), prop: "standid", width: "80px" },
-        { label: this.$t('dashboard.position'), prop: "position", width: "50px" },
-        { label: this.$t('dashboard.diameter'), prop: 'diameter', width: '100px' },
-        { label: this.$t('dashboard.roughness'), prop: 'rough', width: '100px' },
-        { label: this.$t('dashboard.crown'), prop: 'crown', width: '100px' },
-        { label: this.$t('dashboard.composition'), prop: 'composition', width: '100px' },
-      ];
-    },
-    planColumns() {
-      return [
-        { label: this.$t('dashboard.seqId'), prop: 'seqid', width: '80px' },
-        { label: this.$t('dashboard.coilId'), prop: 'coilid', width: '120px' },
-        { label: this.$t('dashboard.unitCode'), prop: 'unitCode', width: '100px' },
-        { label: this.$t('dashboard.planId'), prop: 'planid', width: '120px' },
-        { label: this.$t('dashboard.planType'), prop: 'planType', width: '80px' },
-        { label: this.$t('dashboard.steelGrade'), prop: 'steelGrade', width: '120px' },
-        { label: this.$t('dashboard.exitCoilId'), prop: 'exitCoilid', width: '100px' },
-        { label: this.$t('dashboard.orderNo'), prop: 'orderNo', width: '100px' },
-        { label: this.$t('dashboard.customerCode'), prop: 'custommerCode', width: '100px' },
-        { label: this.$t('dashboard.onlineDate'), prop: 'onlineDate' },
-        { label: this.$t('dashboard.startDate'), prop: 'startDate' },
-        { label: this.$t('dashboard.endDate'), prop: 'endDate' },
-        { label: this.$t('dashboard.furInDate'), prop: 'furInDate' },
-        { label: this.$t('dashboard.furOutDate'), prop: 'furOutDate' },
-      ];
-    },
-  },
   created() {
     // 页面加载时调用API获取数据
     this.getLogData();
     this.getRollHistorytList();
     this.getPlanList();
+    this.refreshDashboard();
+    // 定期刷新数据
+    this.refreshTimer = setInterval(() => {
+      this.getLogData();
+      this.getRollHistorytList();
+      this.getPlanList();
+      this.refreshDashboard();
+    }, 30000); // 每30秒刷新一次
+  },
+  beforeDestroy() {
+    // 组件销毁时清除定时器
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+    }
   },
   methods: {
+    // 获取日志数据
     getLogData() {
       this.tableLoading = true;
       getLogDataPage(this.queryForm)
         .then((response) => {
           this.tableLoading = false;
-          this.alarmData = response.data.list; // 赋值表格数据
+          this.alarmData = response.data.list || []; // 赋值表格数据
         })
         .catch((error) => {
           this.tableLoading = false;
-          console.error("获取日志数据失败:", error);
-          this.$message.error(this.$t('dashboard.getLogDataFailed'));
+          console.error("获取日志数据失败：", error);
+          this.$message.error("获取日志数据失败，请稍后重试");
         });
     },
+    // 获取轧辊历史列表
     getRollHistorytList() {
+      this.rollHistoryLoading = true;
       getRollHistorytList(this.queryForm)
         .then((response) => {
           this.rollHistoryLoading = false;
-          this.rollHistoryData = response.data.list; // 赋值表格数据
+          this.rollHistoryData = response.data.list || []; // 赋值表格数据
         })
+        .catch((error) => {
+          this.rollHistoryLoading = false;
+          console.error("获取轧辊历史数据失败：", error);
+        });
     },
+    // 获取生产计划列表
     getPlanList() {
+      this.planLoading = true;
       listPlan(this.queryForm)
         .then((response) => {
           this.planLoading = false;
-          this.planData = response.data.map(item => {
+          this.planData = (response.data || []).map(item => {
             return {
               ...item,
               onlineDate: item.onlineDate?.replace('T', ' '),
@@ -180,13 +367,55 @@ export default {
             }
           }); // 赋值表格数据
         })
+        .catch((error) => {
+          this.planLoading = false;
+          console.error("获取计划数据失败：", error);
+        });
+    },
+    // 从后端刷新首页仪表板数据
+    refreshDashboard() {
+      // 1) 当前生产计划
+      getCurrentProducingPlan().then(res => {
+        const data = res.data || {};
+        // 更新生产状态中的卷号等信息
+        this.productionStatus.currentCoilId = data.coilid || '';
+        // 这里可以根据需要扩展更多字段，例如钢种、入口规格等
+      });
+
+      // 2) 当前生产卷的工艺参数
+      getCurrentProcessParams().then(res => {
+        const data = res.data || {};
+        // 带钢速度示例：优先取出口段TR的speedExitSection，其次取入口段POR1/POR2的stripSpeed
+        let stripSpeed = 0;
+        const exit = data.exitSection || {};
+        const entry = data.entrySection || {};
+
+        if (exit.TR && (exit.TR.speedExitSection || exit.TR.stripSpeed)) {
+          stripSpeed = exit.TR.speedExitSection || exit.TR.stripSpeed;
+        } else if (entry.POR1 && entry.POR1.stripSpeed) {
+          stripSpeed = entry.POR1.stripSpeed;
+        } else if (entry.POR2 && entry.POR2.stripSpeed) {
+          stripSpeed = entry.POR2.stripSpeed;
+        }
+
+        this.productionStatus.stripSpeed = stripSpeed || 0;
+
+        // 产线效率目前后端没有直接指标，可根据需要后续扩展，这里先保持0或从其他接口获取
+        // this.productionStatus.efficiency = ...;
+
+        // KPI 区域暂时用真实卷号和速度填充一部分，其他可根据后端需要扩展
+        this.kpiData[0].value = (stripSpeed || 0).toFixed(1); // 用带钢速度临时占位，后续可改为产量
+        this.kpiData[1].value = '0';
+        this.kpiData[2].value = '0';
+        this.kpiData[3].value = this.productionStatus.efficiency || '0';
+      });
     }
   },
 };
 </script>
 
 <style scoped lang="scss">
-/* 主题色与布局样式（保持原有） */
+/* 主题色与布局样式 */
 $theme-primary: #a7acb4;
 $theme-light: rgba(167, 172, 180, 0.8);
 $theme-dark: rgba(140, 145, 153, 0.8);
@@ -195,4 +424,287 @@ $theme-bg2: #454c51;
 $theme-bg3: #1E2227;
 $theme-text-light: #f0f0f0;
 $theme-text-gray: #c9cdcf;
+
+.industrial-dashboard {
+  padding: 20px;
+  background: #f2f3f5; // 工业风浅灰背景，避免过深色
+  min-height: calc(100vh - 60px);
+}
+
+/* 仪表板头部 */
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #ffffff; // 简洁白色背景，避免低级渐变色
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  .header-left {
+    .system-title {
+      color: #000;
+      font-size: 28px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+    }
+
+    .system-subtitle {
+      color: #000;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+/* KPI区域 */
+.kpi-section {
+  margin-bottom: 20px;
+
+  .kpi-card {
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    }
+
+    .kpi-content {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+
+      .kpi-icon {
+        font-size: 40px;
+        margin-right: 16px;
+        color: #409eff;
+      }
+
+      .kpi-info {
+        flex: 1;
+
+        .kpi-label {
+          font-size: 14px;
+          color: #909399;
+          margin-bottom: 8px;
+        }
+
+        .kpi-value {
+          font-size: 28px;
+          font-weight: 600;
+          color: #303133;
+          line-height: 1;
+        }
+
+        .kpi-unit {
+          font-size: 12px;
+          color: #909399;
+          margin-top: 4px;
+        }
+      }
+
+      .kpi-trend {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 4px;
+
+        &.up {
+          color: #67c23a;
+          background: rgba(103, 194, 58, 0.1);
+        }
+
+        &.down {
+          color: #f56c6c;
+          background: rgba(245, 108, 108, 0.1);
+        }
+
+        i {
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.kpi-0 .kpi-icon { color: #409eff; }
+    &.kpi-1 .kpi-icon { color: #67c23a; }
+    &.kpi-2 .kpi-icon { color: #e6a23c; }
+    &.kpi-3 .kpi-icon { color: #f56c6c; }
+  }
+}
+
+/* 状态区域 */
+.status-section {
+  margin-bottom: 20px;
+
+  .status-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 600;
+    }
+
+    .status-content {
+      padding: 10px 0;
+
+      .status-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        border-bottom: 1px solid #ebeef5;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .status-label {
+          color: #909399;
+          font-size: 14px;
+        }
+
+        .status-value {
+          color: #303133;
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .equipment-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      padding: 10px 0;
+
+      .equipment-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px;
+        background: #f5f7fa;
+        border-radius: 6px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: #ecf5ff;
+        }
+
+        .equipment-name {
+          font-size: 13px;
+          color: #606266;
+          margin-bottom: 8px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+/* 表格区域 */
+.table-section {
+  margin-bottom: 20px;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .alarm-badge {
+      margin-left: 10px;
+    }
+  }
+}
+
+/* 快速访问区域 */
+.quick-access-section {
+  .quick-access-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    padding: 10px 0;
+
+    .access-item {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      background: #fff;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+        transform: translateY(-2px);
+      }
+
+      .access-icon {
+        font-size: 32px;
+        color: #409eff;
+        margin-right: 16px;
+      }
+
+      .access-info {
+        flex: 1;
+
+        .access-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .access-desc {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+
+      .access-arrow {
+        color: #c0c4cc;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .quick-access-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .kpi-section .el-col {
+    margin-bottom: 16px;
+  }
+
+  .status-section .el-col {
+    margin-bottom: 16px;
+  }
+
+  .equipment-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .quick-access-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .header-right {
+      margin-top: 16px;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/log/index.vue b/apps/l2/src/views/l2/log/index.vue
index aa3af15..f1998ee 100644
--- a/apps/l2/src/views/l2/log/index.vue
+++ b/apps/l2/src/views/l2/log/index.vue
@@ -1,76 +1,106 @@
 <template>
   <div class="log-data-page">
     <el-card>
-      <!-- 查询表单 -->
+      <!-- Query form / 查询表单 -->
       <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px">
-        <el-form-item :label="$t('log.startTime')" prop="startTime">
-          <el-date-picker v-model="queryForm.startTime" type="datetime" placeholder="选择开始时间"
-            value-format="yyyy-MM-dd HH:mm:ss" :clearable="true" :placeholder="$t('log.chooseStartTime')"></el-date-picker>
+        <el-form-item label="Start Time" prop="startTime">
+          <!-- 开始时间 -->
+          <!-- Select start time / 选择开始时间 -->
+          <el-date-picker v-model="queryForm.startTime" type="datetime" placeholder="Select start time"
+            value-format="yyyy-MM-dd HH:mm:ss" :clearable="true"></el-date-picker>
         </el-form-item>
 
-        <el-form-item :label="$t('log.endTime')" prop="endTime">
-          <el-date-picker v-model="queryForm.endTime" type="datetime" placeholder="选择结束时间"
-            value-format="yyyy-MM-dd HH:mm:ss" :clearable="true" :placeholder="$t('log.chooseEndTime')"></el-date-picker>
+        <el-form-item label="End Time" prop="endTime">
+          <!-- 结束时间 -->
+          <!-- Select end time / 选择结束时间 -->
+          <el-date-picker v-model="queryForm.endTime" type="datetime" placeholder="Select end time"
+            value-format="yyyy-MM-dd HH:mm:ss" :clearable="true"></el-date-picker>
         </el-form-item>
 
-        <el-form-item :label="$t('log.alarmType')" prop="logtype">
-          <el-select v-model="queryForm.logtype" :placeholder="$t('log.chooseAlarmType')" clearable>
-            <el-option :label="$t('log.systemAlarm')" value="system"></el-option>
-            <el-option :label="$t('log.deviceAlarm')" value="device"></el-option>
-            <el-option :label="$t('log.networkAlarm')" value="network"></el-option>
-            <el-option :label="$t('log.securityAlarm')" value="security"></el-option>
+        <el-form-item label="Alarm Type" prop="logtype">
+          <!-- 报警类型 -->
+          <el-select v-model="queryForm.logtype" placeholder="Please select alarm type" clearable>
+            <!-- 请选择报警类型 -->
+            <el-option label="System Alarm" value="system"></el-option>
+            <!-- 系统报警 -->
+            <el-option label="Device Alarm" value="device"></el-option>
+            <!-- 设备报警 -->
+            <el-option label="Network Alarm" value="network"></el-option>
+            <!-- 网络报警 -->
+            <el-option label="Security Alarm" value="security"></el-option>
+            <!-- 安全报警 -->
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('log.alarmModule')" prop="module">
-          <el-select v-model="queryForm.module" :placeholder="$t('log.chooseAlarmModule')" clearable>
-            <el-option :label="$t('log.monitorModule')" value="monitor"></el-option>
-            <el-option :label="$t('log.adminModule')" value="admin"></el-option>
-            <el-option :label="$t('log.analysisModule')" value="analysis"></el-option>
-            <el-option :label="$t('log.storageModule')" value="storage"></el-option>
+        <el-form-item label="Alarm Module" prop="module">
+          <!-- 报警模块 -->
+          <el-select v-model="queryForm.module" placeholder="Please select alarm module" clearable>
+            <!-- 请选择报警模块 -->
+            <el-option label="Monitor Module" value="monitor"></el-option>
+            <!-- 监控模块 -->
+            <el-option label="Admin Module" value="admin"></el-option>
+            <!-- 管理模块 -->
+            <el-option label="Analysis Module" value="analysis"></el-option>
+            <!-- 分析模块 -->
+            <el-option label="Storage Module" value="storage"></el-option>
+            <!-- 存储模块 -->
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('log.alarmContent')" prop="logtext">
-          <el-input v-model="queryForm.logtext" :placeholder="$t('log.enterAlarmContent')" clearable style="width: 200px;"></el-input>
+        <el-form-item label="Alarm Content" prop="logtext">
+          <!-- 警报内容 -->
+          <el-input v-model="queryForm.logtext" placeholder="Please enter alarm content" clearable style="width: 200px;"></el-input>
+          <!-- 请输入警报内容 -->
         </el-form-item>
 
-        <el-form-item :label="$t('log.alarmStatus')" prop="status">
-          <el-select v-model="queryForm.status" :placeholder="$t('log.chooseAlarmStatus')" clearable>
-            <el-option :label="$t('log.untreated')" value="0"></el-option>
-            <el-option :label="$t('log.processed')" value="1"></el-option>
-            <el-option :label="$t('log.ignored')" value="2"></el-option>
+        <el-form-item label="Alarm Status" prop="status">
+          <!-- 报警状态 -->
+          <el-select v-model="queryForm.status" placeholder="Please select alarm status" clearable>
+            <!-- 请选择报警状态 -->
+            <el-option label="Unhandled" value="0"></el-option>
+            <!-- 未处理 -->
+            <el-option label="Handled" value="1"></el-option>
+            <!-- 已处理 -->
+            <el-option label="Ignored" value="2"></el-option>
+            <!-- 已忽略 -->
           </el-select>
         </el-form-item>
 
         <el-form-item>
           <el-button type="primary" @click="handleQuery" :loading="btnLoading">
-            <i class="el-icon-search"></i> {{ $t('common.search') }}
+            <i class="el-icon-search"></i> Query
           </el-button>
+          <!-- 查询 -->
           <el-button @click="handleReset">
-            <i class="el-icon-refresh"></i> {{ $t('common.reset') }}
+            <i class="el-icon-refresh"></i> Reset
           </el-button>
+          <!-- 重置 -->
         </el-form-item>
       </el-form>
 
-      <!-- 数据表格 -->
+      <!-- Data table / 数据表格 -->
       <el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
         @row-click="handleRowClick" highlight-current-row>
-        <el-table-column prop="seqid" :label="$t('log.serialNumber')" width="80" align="center"></el-table-column>
-        <el-table-column prop="timestamp" :label="$t('log.occurTime')" width="180" align="center"></el-table-column>
-        <el-table-column prop="module" :label="$t('log.alarmModule')" align="center">
+        <el-table-column prop="seqid" label="No." width="80" align="center"></el-table-column>
+        <!-- 序号 -->
+        <el-table-column prop="timestamp" label="Occurrence Time" width="180" align="center"></el-table-column>
+        <!-- 发生时间 -->
+        <el-table-column prop="module" label="Alarm Module" align="center">
+          <!-- 报警模块 -->
           <template slot-scope="scope">
             <!-- <el-tag>{{ formatModule(scope.row.module) }}</el-tag> -->
             <dict-tag :options="dict.type.main_log_module" :value="scope.row.module" />
           </template>
         </el-table-column>
-        <el-table-column prop="logtype" :label="$t('log.alarmType')" align="center">
+        <el-table-column prop="logtype" label="Alarm Type" align="center">
+          <!-- 报警类型 -->
           <template slot-scope="scope">
             <!-- <el-tag :type="getLogTypeTagType(scope.row.logtype)">{{ formatLogType(scope.row.logtype) }}</el-tag> -->
             <dict-tag :options="dict.type.main_log_type" :value="scope.row.logtype" />
           </template>
         </el-table-column>
-        <el-table-column prop="logtext" :label="$t('log.alarmContent')" min-width="200"></el-table-column>
+        <el-table-column prop="logtext" label="Alarm Content" min-width="200"></el-table-column>
+        <!-- 警报内容 -->
         <!-- <el-table-column prop="status" label="状态" align="center">
           <template slot-scope="scope">
             <el-tag :type="getStatusTagType(scope.row.status)">
@@ -102,37 +132,46 @@
 
     </el-card>
 
-    <!-- 详情弹窗 -->
-    <el-dialog :title="$t('log.historyDetail')" :visible.sync="detailDialogVisible" width="60%" :close-on-click-modal="false">
+    <!-- Detail dialog / 详情弹窗 -->
+    <el-dialog title="History Record Details" :visible.sync="detailDialogVisible" width="60%" :close-on-click-modal="false">
+      <!-- 历史记录详情 -->
       <el-descriptions column="1" border>
-        <el-descriptions-item :label="$t('log.serialNumber')">{{ currentRow.seqid }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('log.occurTime')">{{ currentRow.timestamp }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('log.alarmModule')">{{ formatModule(currentRow.module) }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('log.alarmType')">{{ formatLogType(currentRow.logtype) }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('log.alarmContent')">{{ currentRow.logtext }}</el-descriptions-item>
-        <el-descriptions-item :label="$t('log.status')">
+        <el-descriptions-item label="No.">{{ currentRow.seqid }}</el-descriptions-item>
+        <!-- 序号 -->
+        <el-descriptions-item label="Occurrence Time">{{ currentRow.timestamp }}</el-descriptions-item>
+        <!-- 发生时间 -->
+        <el-descriptions-item label="Alarm Module">{{ formatModule(currentRow.module) }}</el-descriptions-item>
+        <!-- 报警模块 -->
+        <el-descriptions-item label="Alarm Type">{{ formatLogType(currentRow.logtype) }}</el-descriptions-item>
+        <!-- 报警类型 -->
+        <el-descriptions-item label="Alarm Content">{{ currentRow.logtext }}</el-descriptions-item>
+        <!-- 警报内容 -->
+        <el-descriptions-item label="Status">
+          <!-- 状态 -->
           <el-tag :type="getStatusTagType(currentRow.status)">
             {{ formatStatus(currentRow.status) }}
           </el-tag>
         </el-descriptions-item>
-        <el-descriptions-item :label="$t('log.confirmTime')">{{ currentRow.confirmTime || $t('log.notConfirmed') }}</el-descriptions-item>
+        <el-descriptions-item label="Confirm Time">{{ currentRow.confirmTime || 'Unconfirmed' }}</el-descriptions-item>
+        <!-- 确认时间 / 未确认 -->
       </el-descriptions>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="detailDialogVisible = false">{{ $t('common.close') }}</el-button>
+        <el-button @click="detailDialogVisible = false">Close</el-button>
+        <!-- 关闭 -->
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getLogDataPage, alarmAck } from '@/api/l2/log'; // 假设API文件路径
+import { getLogDataPage, alarmAck } from '@/api/l2/log'; // Assume API file path / 假设API文件路径
 
 export default {
   name: 'LogDataTable',
   dicts: ['main_log_type', 'main_log_module'],
   data() {
     return {
-      // 查询表单数据
+      // Query form data / 查询表单数据
       queryForm: {
         startTime: '',
         endTime: '',
@@ -143,25 +182,25 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
-      // 表格数据
+      // Table data / 表格数据
       tableData: [],
-      // 总条数
+      // Total count / 总条数
       total: 0,
-      // 加载状态
+      // Loading state / 加载状态
       tableLoading: false,
       btnLoading: false,
-      // 详情弹窗
+      // Detail dialog / 详情弹窗
       detailDialogVisible: false,
-      // 当前选中行
+      // Current selected row / 当前选中行
       currentRow: {}
     };
   },
   created() {
-    // 页面加载时默认查询一次
+    // Query once by default when page loads / 页面加载时默认查询一次
     this.getLogData();
   },
   methods: {
-    // 获取日志数据
+    // Get log data / 获取日志数据
     getLogData() {
       this.tableLoading = true;
       getLogDataPage(this.queryForm)
@@ -174,26 +213,26 @@ export default {
         .catch(error => {
           this.tableLoading = false;
           this.btnLoading = false;
-          console.error('获取数据失败:', error);
-          this.$message.error(this.$t('log.getLogDataFailed'));
+          console.error('Failed to fetch data:', error); // 获取数据失败
+          this.$message.error('Failed to fetch data, please retry later'); // 获取数据失败，请稍后重试
         });
     },
 
-    // 处理查询
+    // Handle query / 处理查询
     handleQuery() {
-      // 验证开始时间不能晚于结束时间
+      // Validate that start time cannot be later than end time / 验证开始时间不能晚于结束时间
       if (this.queryForm.startTime && this.queryForm.endTime &&
         new Date(this.queryForm.startTime) > new Date(this.queryForm.endTime)) {
-        this.$message.warning(this.$t('log.startTimeNotLaterThanEndTime'));
+        this.$message.warning('Start time cannot be later than end time'); // 开始时间不能晚于结束时间
         return;
       }
 
       this.btnLoading = true;
-      this.queryForm.pageNum = 1; // 重置为第一页
+      this.queryForm.pageNum = 1; // Reset to first page / 重置为第一页
       this.getLogData();
     },
 
-    // 处理重置
+    // Handle reset / 处理重置
     handleReset() {
       this.$refs.queryForm.resetFields();
       this.queryForm.pageNum = 1;
@@ -201,53 +240,53 @@ export default {
       this.getLogData();
     },
 
-    // 处理每页条数变化
+    // Handle page size change / 处理每页条数变化
     handleSizeChange(val) {
       this.queryForm.pageSize = val;
-      this.queryForm.pageNum = 1; // 重置为第一页
+      this.queryForm.pageNum = 1; // Reset to first page / 重置为第一页
       this.getLogData();
     },
 
-    // 处理页码变化
+    // Handle page number change / 处理页码变化
     handleCurrentChange(val) {
       this.queryForm.pageNum = val;
       this.getLogData();
     },
 
-    // 行点击事件
+    // Row click event / 行点击事件
     handleRowClick(row) {
       this.currentRow = row;
     },
 
-    // 查看详情
+    // View detail / 查看详情
     handleViewDetail(row) {
       this.currentRow = { ...row };
       this.detailDialogVisible = true;
     },
 
-    // 格式化报警模块显示
+    // Format alarm module display / 格式化报警模块显示
     formatModule(module) {
       const moduleMap = {
-        'monitor': this.$t('log.monitorModule'),
-        'admin': this.$t('log.adminModule'),
-        'analysis': this.$t('log.analysisModule'),
-        'storage': this.$t('log.storageModule')
+        'monitor': 'Monitor Module', // 监控模块
+        'admin': 'Admin Module', // 管理模块
+        'analysis': 'Analysis Module', // 分析模块
+        'storage': 'Storage Module' // 存储模块
       };
-      return moduleMap[module] || module || this.$t('common.unknown');
+      return moduleMap[module] || module || 'Unknown'; // 未知
     },
 
-    // 格式化报警类型显示
+    // Format alarm type display / 格式化报警类型显示
     formatLogType(logtype) {
       const logtypeMap = {
-        'system': this.$t('log.systemAlarm'),
-        'device': this.$t('log.deviceAlarm'),
-        'network': this.$t('log.networkAlarm'),
-        'security': this.$t('log.securityAlarm')
+        'system': 'System Alarm', // 系统报警
+        'device': 'Device Alarm', // 设备报警
+        'network': 'Network Alarm', // 网络报警
+        'security': 'Security Alarm' // 安全报警
       };
-      return logtypeMap[logtype] || logtype || this.$t('common.unknown');
+      return logtypeMap[logtype] || logtype || 'Unknown'; // 未知
     },
 
-    // 获取报警类型标签样式
+    // Get alarm type tag style / 获取报警类型标签样式
     getLogTypeTagType(logtype) {
       const typeMap = {
         'system': 'info',
@@ -258,17 +297,17 @@ export default {
       return typeMap[logtype] || 'default';
     },
 
-    // 格式化状态显示
+    // Format status display / 格式化状态显示
     formatStatus(status) {
       const statusMap = {
-        0: this.$t('log.untreated'),
-        1: this.$t('log.processed'),
-        2: this.$t('log.ignored')
+        0: 'Unhandled', // 未处理
+        1: 'Handled', // 已处理
+        2: 'Ignored' // 已忽略
       };
-      return statusMap[status] || this.$t('common.unknown');
+      return statusMap[status] || 'Unknown'; // 未知
     },
 
-    // 获取状态标签样式
+    // Get status tag style / 获取状态标签样式
     getStatusTagType(status) {
       const typeMap = {
         0: 'danger',
@@ -283,7 +322,7 @@ export default {
       this.loading = true;
       alarmAck(seqid)
         .then(response => {
-          this.$message.success(this.$t('log.confirmSuccess'));
+          this.$message.success('Acknowledge successful'); // 确认成功
           this.getLogData();
         })
     }
diff --git a/apps/l2/src/views/l2/pdo/components/DataCorrection.vue b/apps/l2/src/views/l2/pdo/components/DataCorrection.vue
index 91d459f..ac58119 100644
--- a/apps/l2/src/views/l2/pdo/components/DataCorrection.vue
+++ b/apps/l2/src/views/l2/pdo/components/DataCorrection.vue
@@ -6,218 +6,256 @@
     :rules="formRules"
   >
     <el-row :gutter="20">
-      <!-- 成品卷 -->
+      <!-- Finished Coil / 成品卷 -->
       <el-col :span="8">
-        <el-form-item label="成品卷" prop="exitMatId">
+        <el-form-item label="Finished Coil" prop="exitMatId">
+          <!-- 成品卷 -->
           <el-input v-model="formData.exitMatId"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 来料卷 -->
+      <!-- Entry Coil / 来料卷 -->
       <el-col :span="8">
-        <el-form-item label="来料卷" prop="entryMatId">
+        <el-form-item label="Entry Coil" prop="entryMatId">
+          <!-- 来料卷 -->
           <el-input v-model="formData.entryMatId"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 分切数 -->
+      <!-- Split Count / 分切数 -->
       <el-col :span="8">
-        <el-form-item label="分切数" prop="subId">
+        <el-form-item label="Split Count" prop="subId">
+          <!-- 分切数 -->
           <el-input-number v-model="formData.subId" :min="0" :step="1" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 开始位置 -->
+      <!-- Start Position / 开始位置 -->
       <el-col :span="8">
-        <el-form-item label="开始位置" prop="startPosition">
+        <el-form-item label="Start Position" prop="startPosition">
+          <!-- 开始位置 -->
           <el-input-number v-model="formData.startPosition" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 结束位置 -->
+      <!-- End Position / 结束位置 -->
       <el-col :span="8">
-        <el-form-item label="结束位置" prop="endPosition">
+        <el-form-item label="End Position" prop="endPosition">
+          <!-- 结束位置 -->
           <el-input-number v-model="formData.endPosition" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 计划ID -->
+      <!-- Plan ID / 计划ID -->
       <el-col :span="8">
-        <el-form-item label="计划ID" prop="planId">
+        <el-form-item label="Plan ID" prop="planId">
+          <!-- 计划ID -->
           <el-input-number v-model="formData.planId" :step="1" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 计划号 -->
+      <!-- Plan No / 计划号 -->
       <el-col :span="8">
-        <el-form-item label="计划号" prop="planNo">
+        <el-form-item label="Plan No" prop="planNo">
+          <!-- 计划号 -->
           <el-input v-model="formData.planNo"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 产品类型 -->
+      <!-- Product Type / 产品类型 -->
       <el-col :span="8">
-        <el-form-item label="产品类型" prop="prodCode">
+        <el-form-item label="Product Type" prop="prodCode">
+          <!-- 产品类型 -->
           <el-input v-model="formData.prodCode"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 班号 -->
+      <!-- Shift / 班号 -->
       <el-col :span="8">
-        <el-form-item label="班号" prop="groupNo">
+        <el-form-item label="Shift" prop="groupNo">
+          <!-- 班号 -->
           <el-input v-model="formData.groupNo"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 组号 -->
+      <!-- Group / 组号 -->
       <el-col :span="8">
-        <el-form-item label="组号" prop="shiftNo">
+        <el-form-item label="Group" prop="shiftNo">
+          <!-- 组号 -->
           <el-input v-model="formData.shiftNo"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 状态 -->
+      <!-- Status / 状态 -->
       <el-col :span="8">
-        <el-form-item label="状态" prop="status">
+        <el-form-item label="Status" prop="status">
+          <!-- 状态 -->
           <el-input v-model="formData.status"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 钢种 -->
+      <!-- Steel Grade / 钢种 -->
       <el-col :span="8">
-        <el-form-item label="钢种" prop="steelGrade">
+        <el-form-item label="Steel Grade" prop="steelGrade">
+          <!-- 钢种 -->
           <el-input v-model="formData.steelGrade"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 来料厚度 -->
+      <!-- Entry Thickness / 来料厚度 -->
       <el-col :span="8">
-        <el-form-item label="来料厚度" prop="entryThick">
+        <el-form-item label="Entry Thickness" prop="entryThick">
+          <!-- 来料厚度 -->
           <el-input-number v-model="formData.entryThick" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 来料宽度 -->
+      <!-- Entry Width / 来料宽度 -->
       <el-col :span="8">
-        <el-form-item label="来料宽度" prop="entryWidth">
+        <el-form-item label="Entry Width" prop="entryWidth">
+          <!-- 来料宽度 -->
           <el-input-number v-model="formData.entryWidth" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 来料长度 -->
+      <!-- Entry Length / 来料长度 -->
       <el-col :span="8">
-        <el-form-item label="来料长度" prop="entryLength">
+        <el-form-item label="Entry Length" prop="entryLength">
+          <!-- 来料长度 -->
           <el-input-number v-model="formData.entryLength" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 来料重量 -->
+      <!-- Entry Weight / 来料重量 -->
       <el-col :span="8">
-        <el-form-item label="来料重量" prop="entryWeight">
+        <el-form-item label="Entry Weight" prop="entryWeight">
+          <!-- 来料重量 -->
           <el-input-number v-model="formData.entryWeight" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 上表面镀锌 -->
+      <!-- Top Surface Coating / 上表面镀锌 -->
       <el-col :span="8">
-        <el-form-item label="上表面镀锌" prop="weightTop">
+        <el-form-item label="Top Surface Coating" prop="weightTop">
+          <!-- 上表面镀锌 -->
           <el-input-number v-model="formData.weightTop" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 下表面镀锌 -->
+      <!-- Bottom Surface Coating / 下表面镀锌 -->
       <el-col :span="8">
-        <el-form-item label="下表面镀锌" prop="weightBottom">
+        <el-form-item label="Bottom Surface Coating" prop="weightBottom">
+          <!-- 下表面镀锌 -->
           <el-input-number v-model="formData.weightBottom" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 成品长度 -->
+      <!-- Exit Length / 成品长度 -->
       <el-col :span="8">
-        <el-form-item label="成品长度" prop="exitLength">
+        <el-form-item label="Exit Length" prop="exitLength">
+          <!-- 成品长度 -->
           <el-input-number v-model="formData.exitLength" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 成品带涂料重量 -->
+      <!-- Exit Net Weight (with coating) / 成品带涂料重量 -->
       <el-col :span="8">
-        <el-form-item label="成品带涂料重量" prop="exitNetWeight">
+        <el-form-item label="Exit Net Weight (with coating)" prop="exitNetWeight">
+          <!-- 成品带涂料重量 -->
           <el-input-number v-model="formData.exitNetWeight" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 理论重量 -->
+      <!-- Theory Weight / 理论重量 -->
       <el-col :span="8">
-        <el-form-item label="理论重量" prop="theoryWeight">
+        <el-form-item label="Theory Weight" prop="theoryWeight">
+          <!-- 理论重量 -->
           <el-input-number v-model="formData.theoryWeight" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 实际重量 -->
+      <!-- Actual Weight / 实际重量 -->
       <el-col :span="8">
-        <el-form-item label="实际重量" prop="actualWeight">
+        <el-form-item label="Actual Weight" prop="actualWeight">
+          <!-- 实际重量 -->
           <el-input-number v-model="formData.actualWeight" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 成品外径 -->
+      <!-- Exit Outer Diameter / 成品外径 -->
       <el-col :span="8">
-        <el-form-item label="成品外径" prop="exitOuterDiameter">
+        <el-form-item label="Exit Outer Diameter" prop="exitOuterDiameter">
+          <!-- 成品外径 -->
           <el-input-number v-model="formData.exitOuterDiameter" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 成品厚度 -->
+      <!-- Exit Thickness / 成品厚度 -->
       <el-col :span="8">
-        <el-form-item label="成品厚度" prop="exitThickness">
+        <el-form-item label="Exit Thickness" prop="exitThickness">
+          <!-- 成品厚度 -->
           <el-input-number v-model="formData.exitThickness" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 成品宽度 -->
+      <!-- Exit Width / 成品宽度 -->
       <el-col :span="8">
-        <el-form-item label="成品宽度" prop="exitWidth">
+        <el-form-item label="Exit Width" prop="exitWidth">
+          <!-- 成品宽度 -->
           <el-input-number v-model="formData.exitWidth" :step="0.01" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
-      <!-- 客户 -->
+      <!-- Customer / 客户 -->
       <el-col :span="8">
-        <el-form-item label="客户" prop="customer">
+        <el-form-item label="Customer" prop="customer">
+          <!-- 客户 -->
           <el-input v-model="formData.customer"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 上线时间 -->
+      <!-- Online Time / 上线时间 -->
       <el-col :span="8">
-        <el-form-item label="上线时间" prop="onlineTime">
+        <el-form-item label="Online Time" prop="onlineTime">
+          <!-- 上线时间 -->
           <el-date-picker v-model="formData.onlineTime" type="datetime" value-format="yyyy-MM-ddTHH:mm:ss" />
         </el-form-item>
       </el-col>
-      <!-- 开始时间 -->
+      <!-- Start Time / 开始时间 -->
       <el-col :span="8">
-        <el-form-item label="开始时间" prop="startTime">
+        <el-form-item label="Start Time" prop="startTime">
+          <!-- 开始时间 -->
           <el-date-picker v-model="formData.startTime" type="datetime" value-format="yyyy-MM-ddTHH:mm:ss" />
         </el-form-item>
       </el-col>
-      <!-- 结束时间 -->
+      <!-- End Time / 结束时间 -->
       <el-col :span="8">
-        <el-form-item label="结束时间" prop="endTime">
+        <el-form-item label="End Time" prop="endTime">
+          <!-- 结束时间 -->
           <el-date-picker v-model="formData.endTime" type="datetime" value-format="yyyy-MM-ddTHH:mm:ss" />
         </el-form-item>
       </el-col>
-      <!-- 机组号 -->
+      <!-- Unit Code / 机组号 -->
       <el-col :span="8">
-        <el-form-item label="机组号" prop="unitCode">
+        <el-form-item label="Unit Code" prop="unitCode">
+          <!-- 机组号 -->
           <el-input v-model="formData.unitCode"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 工序号 -->
+      <!-- Process Code / 工序号 -->
       <el-col :span="8">
-        <el-form-item label="工序号" prop="processCode">
+        <el-form-item label="Process Code" prop="processCode">
+          <!-- 工序号 -->
           <el-input v-model="formData.processCode"></el-input>
         </el-form-item>
       </el-col>
-      <!-- 是否尾卷 -->
+      <!-- Is Last Coil / 是否尾卷 -->
       <el-col :span="8">
-        <el-form-item label="是否尾卷" prop="lastFlag">
+        <el-form-item label="Is Last Coil" prop="lastFlag">
+          <!-- 是否尾卷 -->
           <el-switch v-model="formData.lastFlag"></el-switch>
         </el-form-item>
       </el-col>
-      <!-- 是否分卷 -->
+      <!-- Is Split Coil / 是否分卷 -->
       <el-col :span="8">
-        <el-form-item label="是否分卷" prop="separateFlag">
+        <el-form-item label="Is Split Coil" prop="separateFlag">
+          <!-- 是否分卷 -->
           <el-switch v-model="formData.separateFlag"></el-switch>
         </el-form-item>
       </el-col>
-      <!-- 计划来源 -->
+      <!-- Plan Origin / 计划来源 -->
       <el-col :span="8">
-        <el-form-item label="计划来源" prop="planOrigin">
-          <el-select v-model="formData.planOrigin" placeholder="请选择计划来源">
-            <el-option label="L3计划" value="L3"></el-option>
-            <el-option label="人工" value="MANUAL"></el-option>
+        <el-form-item label="Plan Origin" prop="planOrigin">
+          <!-- 计划来源 -->
+          <el-select v-model="formData.planOrigin" placeholder="Please select plan origin">
+            <!-- 请选择计划来源 -->
+            <el-option label="L3 Plan" value="L3"></el-option>
+            <!-- L3计划 -->
+            <el-option label="Manual" value="MANUAL"></el-option>
+            <!-- 人工 -->
           </el-select>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <!-- 保存按钮 -->
+    <!-- Save button / 保存按钮 -->
     <div class="dialog-footer">
-      <el-button type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
+      <el-button type="primary" @click="handleSave" :loading="saveLoading">Save</el-button>
+      <!-- 保存 -->
     </div>
   </el-form>
 </template>
@@ -226,18 +264,18 @@
 export default {
   name: 'PdoDataCorrection',
   props: {
-    // 接收父组件传递的详情数据
+    // Receive detail data from parent component / 接收父组件传递的详情数据
     detail: {
       type: Object,
       required: true,
       default: () => ({})
     },
-    // 保存回调函数（父组件处理实际保存逻辑）
+    // Save callback function (parent component handles actual save logic) / 保存回调函数（父组件处理实际保存逻辑）
     saveCallback: {
       type: Function,
       required: true
     },
-    // 保存按钮loading状态（由父组件控制）
+    // Save button loading state (controlled by parent component) / 保存按钮loading状态（由父组件控制）
     saveLoading: {
       type: Boolean,
       required: true,
@@ -246,33 +284,33 @@ export default {
   },
   data() {
     return {
-      // 内部表单数据（拷贝父组件传递的detail，避免直接修改父组件数据）
+      // Internal form data (copy parent component's detail, avoid directly modifying parent data) / 内部表单数据（拷贝父组件传递的detail，避免直接修改父组件数据）
       formData: {},
-      // 表单验证规则
+      // Form validation rules / 表单验证规则
       formRules: {
-        exitMatId: [{ required: true, message: '请输入成品卷号', trigger: 'blur' }],
-        entryMatId: [{ required: true, message: '请输入来料卷号', trigger: 'blur' }],
-        planNo: [{ required: true, message: '请输入计划号', trigger: 'blur' }],
-        steelGrade: [{ required: true, message: '请输入钢种', trigger: 'blur' }]
-        // 可根据实际需求补充其他字段验证规则
+        exitMatId: [{ required: true, message: 'Please enter finished coil ID', trigger: 'blur' }], // 请输入成品卷号
+        entryMatId: [{ required: true, message: 'Please enter entry coil ID', trigger: 'blur' }], // 请输入来料卷号
+        planNo: [{ required: true, message: 'Please enter plan number', trigger: 'blur' }], // 请输入计划号
+        steelGrade: [{ required: true, message: 'Please enter steel grade', trigger: 'blur' }] // 请输入钢种
+        // Can add other field validation rules as needed / 可根据实际需求补充其他字段验证规则
       }
     }
   },
   watch: {
-    // 监听detail变化，深拷贝更新内部formData
+    // Watch detail changes, deep copy to update internal formData / 监听detail变化，深拷贝更新内部formData
     detail: {
       handler(newVal) {
-        // 深拷贝避免引用类型数据相互影响
+        // Deep copy to avoid reference type data interference / 深拷贝避免引用类型数据相互影响
         this.formData = JSON.parse(JSON.stringify(newVal))
-        // 初始化数值类型字段（防止null/undefined导致输入框异常）
+        // Initialize numeric type fields (prevent null/undefined causing input box exceptions) / 初始化数值类型字段（防止null/undefined导致输入框异常）
         this.initNumberFields()
       },
-      immediate: true, // 初始渲染时立即执行
-      deep: true // 深度监听对象内部变化
+      immediate: true, // Execute immediately on initial render / 初始渲染时立即执行
+      deep: true // Deep watch object internal changes / 深度监听对象内部变化
     }
   },
   methods: {
-    // 初始化数值类型字段（确保默认值为0而非null/undefined）
+    // Initialize numeric type fields (ensure default value is 0 instead of null/undefined) / 初始化数值类型字段（确保默认值为0而非null/undefined）
     initNumberFields() {
       const numberFields = [
         'subId', 'startPosition', 'endPosition', 'planId', 'entryThick',
@@ -285,15 +323,15 @@ export default {
           this.formData[field] = 0
         }
       })
-      // 初始化布尔类型字段
+      // Initialize boolean type fields / 初始化布尔类型字段
       this.formData.lastFlag = this.formData.lastFlag ?? false
       this.formData.separateFlag = this.formData.separateFlag ?? false
     },
-    // 处理保存逻辑（先验证表单，通过后触发父组件回调）
+    // Handle save logic (validate form first, then trigger parent component callback) / 处理保存逻辑（先验证表单，通过后触发父组件回调）
     handleSave() {
       this.$refs.correctionForm.validate(valid => {
         if (valid) {
-          // 触发父组件保存回调，传递内部修改后的表单数据
+          // Trigger parent component save callback, pass internally modified form data / 触发父组件保存回调，传递内部修改后的表单数据
           this.saveCallback(this.formData)
         }
       })
diff --git a/apps/l2/src/views/l2/pdo/components/LabelPrint.vue b/apps/l2/src/views/l2/pdo/components/LabelPrint.vue
index 85c90e6..59edadc 100644
--- a/apps/l2/src/views/l2/pdo/components/LabelPrint.vue
+++ b/apps/l2/src/views/l2/pdo/components/LabelPrint.vue
@@ -1,68 +1,79 @@
 <template>
   <div class="label-print-container">
-    <!-- 预览区域（与打印内容一致且可编辑） -->
+    <!-- Preview area (consistent with print content and editable) / 预览区域（与打印内容一致且可编辑） -->
     <div class="label-preview" v-if="Object.keys(editableData).length">
-      <!-- 给打印区域添加一个唯一ID -->
+      <!-- Add a unique ID to the print area / 给打印区域添加一个唯一ID -->
       <div id="printContent" class="label-content">
-        <!-- 公司名称 -->
+        <!-- Company name / 公司名称 -->
         <div class="company-name">
           {{ editableData.companyName }}
         </div>
 
-        <!-- 内容区域：使用Flexbox布局 -->
+        <!-- Content area: Use Flexbox layout / 内容区域：使用Flexbox布局 -->
         <div class="content-grid">
-          <div class="grid-item label">钢卷号</div>
+          <div class="grid-item label">Coil ID</div>
+          <!-- 钢卷号 -->
           <div class="grid-item value">
-            <input v-model="editableData.exitMatId" :border="false" class="editable-input"
-              placeholder="钢卷号"></input>
+            <input v-model="editableData.exitMatId" :border="false" class="editable-input" placeholder="Coil ID">
+            <!-- 钢卷号 -->
           </div>
-          <div class="grid-item label">热卷号</div>
+          <div class="grid-item label">Hot Coil ID</div>
+          <!-- 热卷号 -->
           <div class="grid-item value">
-            <input v-model="editableData.entryMatId" :border="false" class="editable-input"
-              placeholder="热卷号"></input>
+            <input v-model="editableData.entryMatId" :border="false" class="editable-input" placeholder="Hot Coil ID">
+            <!-- 热卷号 -->
           </div>
 
-          <div class="grid-item label">规格</div>
+          <div class="grid-item label">Specification</div>
+          <!-- 规格 -->
           <div class="grid-item value">
-            <input v-model="editableData.spec" :border="false" class="editable-input" placeholder="规格"></input>
+            <input v-model="editableData.spec" :border="false" class="editable-input" placeholder="Specification">
+            <!-- 规格 -->
           </div>
-          <div class="grid-item label">材质</div>
+          <div class="grid-item label">Material</div>
+          <!-- 材质 -->
           <div class="grid-item value">
-            <input v-model="editableData.steelGrade" :border="false" class="editable-input"
-              placeholder="材质"></input>
+            <input v-model="editableData.steelGrade" :border="false" class="editable-input" placeholder="Material">
+            <!-- 材质 -->
           </div>
 
-          <div class="grid-item label">净重</div>
+          <div class="grid-item label">Net Weight</div>
+          <!-- 净重 -->
           <div class="grid-item value">
-            <input v-model="editableData.actualWeight" :border="false" class="editable-input"
-              placeholder="净重"></input>
+            <input v-model="editableData.actualWeight" :border="false" class="editable-input" placeholder="Net Weight">
+            <!-- 净重 -->
           </div>
-          <div class="grid-item label">生产班组</div>
+          <div class="grid-item label">Production Shift</div>
+          <!-- 生产班组 -->
           <div class="grid-item value">
-            <input v-model="editableData.groupNo" :border="false" class="editable-input"
-              placeholder="生产班组"></input>
+            <input v-model="editableData.groupNo" :border="false" class="editable-input" placeholder="Production Shift">
+            <!-- 生产班组 -->
           </div>
 
-          <div class="grid-item label">产品名称</div>
+          <div class="grid-item label">Product Name</div>
+          <!-- 产品名称 -->
           <div class="grid-item value">
-            <input v-model="editableData.prodCode" :border="false" class="editable-input"
-              placeholder="产品名称"></input>
+            <input v-model="editableData.prodCode" :border="false" class="editable-input" placeholder="Product Name">
+            <!-- 产品名称 -->
           </div>
-          <div class="grid-item label">生产日期</div>
+          <div class="grid-item label">Production Date</div>
+          <!-- 生产日期 -->
           <div class="grid-item value">
             <input v-model="editableData.productionDate" :border="false" class="editable-input"
-              placeholder="生产日期"></input>
+              placeholder="Production Date">
+            <!-- 生产日期 -->
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 打印按钮 -->
+    <!-- Print button / 打印按钮 -->
     <div class="print-btn-container">
       <el-button type="primary" @click="handlePrint" icon="el-icon-printer"
         :disabled="!Object.keys(editableData).length">
-        打印标签
+        Print Label
       </el-button>
+      <!-- 打印标签 -->
     </div>
   </div>
 </template>
@@ -70,6 +81,8 @@
 <script>
 import printJS from 'print-js';
 import dayjs from 'dayjs';
+// 导入 dom-to-image 库
+import domtoimage from 'dom-to-image';
 
 export default {
   name: 'PdoLabelPrint',
@@ -82,12 +95,12 @@ export default {
   },
   data() {
     return {
-      // 可编辑的数据对象
+      // Editable data object / 可编辑的数据对象
       editableData: {}
     };
   },
   watch: {
-    // 监听detail变化，初始化可编辑数据
+    // Watch detail changes, initialize editable data / 监听detail变化，初始化可编辑数据
     detail: {
       handler(newVal) {
         if (newVal) {
@@ -99,24 +112,24 @@ export default {
     }
   },
   methods: {
-    // 初始化可编辑数据
+    // Initialize editable data / 初始化可编辑数据
     initEditableData(detail) {
       const {
         exitMatId, entryMatId, exitThickness, exitWidth,
         actualWeight, steelGrade, groupNo, prodCode
       } = detail;
 
-      // 格式化规格
+      // Format specification / 格式化规格
       const spec = exitThickness && exitWidth
         ? `${exitThickness}*${exitWidth}`
         : '';
 
-      // 格式化生产日期
+      // Format production date / 格式化生产日期
       const productionDate = dayjs().format('M月D日');
 
-      // 初始化可编辑数据
+      // Initialize editable data / 初始化可编辑数据
       this.editableData = {
-        companyName: '嘉祥科伦普重工有限公司',
+        companyName: '嘉祥科伦普重工有限公司', // Company name (keep Chinese as it's a company name)
         exitMatId: exitMatId || '',
         entryMatId: entryMatId || '',
         spec: spec || '',
@@ -128,68 +141,28 @@ export default {
       };
     },
 
-    // 处理打印逻辑
-    handlePrint() {
-      // 定义打印样式，确保打印效果与预览一致
-      const printStyle = `
-        .label-content {
-          width: 200mm;
-          height: 160mm;
-          padding: 0;
-          box-sizing: border-box;
-          font-family: SimSun;
-        }
-        .company-name {
-          text-align: center;
-          padding: 8mm 0;
-          font-size: 16pt;
-          font-weight: bold;
-          border: 1px solid #000;
-        }
-        .content-grid {
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr 1fr;
-          gap: 0;
-        }
-        .grid-item {
-          min-height: 15mm;
-          display: flex;
-          border: 1px solid #000;
-          align-items: center;
-          box-sizing: border-box;
-        }
-        .label {
-          font-weight: bold;
-          font-size: 12pt;
-          padding-left: 2mm;
-        }
-        .value {
-          font-size: 12pt;
-        }
-        input {
-          border: none !important;
-          width: 100%;
-          height: 100%;
-          font-size: 12pt;
-          padding: 0 2mm;
-          box-sizing: border-box;
-        }
-      `;
+    // 替换原dom-to-image的转换逻辑
+    async handlePrint() {
+      try {
+        const printElement = document.getElementById('printContent');
+        // 关键：设置scale提升分辨率（建议3-4）
+        const imageBase64 = await domtoimage.toPng(printElement, {
+          backgroundColor: '#ffffff',
+          scale: 2, // 缩放倍数（越大图片越清晰，文件也越大）
+        });
 
-      // 调用printJS进行打印
-      printJS({
-        printable: 'printContent',  // 要打印的元素ID
-        type: 'html',
-        header: null,               // 不显示默认页眉
-        footer: null,               // 不显示默认页脚
-        // style: printStyle,          // 应用打印样式
-        scanStyles: true,          // 不扫描页面现有样式
-        targetStyles: ['*'],        // 允许所有目标样式
-        documentTitle: '标签打印',  // 打印文档标题
-        onPrintDialogClose: () => {
-          console.log('打印对话框已关闭');
-        }
-      });
+        // 打印图片时强制按实际尺寸渲染
+        printJS({
+          printable: imageBase64,
+          type: 'image',
+          imageStyle: `
+            width: 100mm; /* 与标签实际物理尺寸一致 */
+            height: 80mm;
+            object-fit: contain;
+          `,
+          documentTitle: 'Label Print'
+        });
+      } catch (e) { /* 错误处理 */ }
     }
   }
 }
@@ -207,12 +180,17 @@ export default {
 
 /* 标签内容样式（与打印尺寸等比例） */
 .label-content {
-  width: 500px;  /* 200mm × 2.5 = 500px */
-  height: 400px; /* 160mm × 2.5 = 400px */
+  width: 500px;
+  /* 200mm × 2.5 = 500px */
+  height: 400px;
+  /* 160mm × 2.5 = 400px */
   border: 1px solid #ccc;
-  padding: 25px; /* 10mm × 2.5 = 25px */
+  padding: 25px;
+  /* 10mm × 2.5 = 25px */
   box-sizing: border-box;
   font-family: SimSun;
+  background: #ffffff;
+  /* 确保DOM背景为白色，转换图片后样式一致 */
 }
 
 .company-name {
@@ -241,7 +219,7 @@ export default {
 .label {
   font-weight: bold;
   line-height: 60px;
-  font-size: 16px;
+  font-size: 12px;
 }
 
 /* 无边框输入框样式 */
@@ -268,4 +246,4 @@ export default {
   text-align: left;
   margin-top: 10px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/components/ParamEcharts.vue b/apps/l2/src/views/l2/pdo/components/ParamEcharts.vue
new file mode 100644
index 0000000..480a379
--- /dev/null
+++ b/apps/l2/src/views/l2/pdo/components/ParamEcharts.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="param-echarts-container" v-loading="loading">
+    <!-- 图表标题 -->
+    <div class="chart-title">{{ chartTitle }}</div>
+    <!-- ECharts 渲染容器 -->
+    <div ref="chartDom" class="chart-content"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getSegmentList } from '@/api/business/segment'
+
+export default {
+  name: 'ParamEcharts',
+  // 接收父组件传入的核心参数
+  props: {
+    enCoilID: {
+      type: String,
+      required: true,
+      description: '线圈ID，用于请求对应数据'
+    },
+    paramField: {
+      type: String,
+      required: true,
+      description: '参数字段名（对应原 paramFields 的 value）'
+    }
+  },
+  data() {
+    return {
+      chartInstance: null, // ECharts 实例
+      loading: false, // 数据加载状态
+      chartDataObj: { // 图表数据
+        timeStamps: [],
+        chartData: [],
+        originalTimeStamps: [],
+        originalChartData: []
+      },
+      stat: { // 参数统计值
+        latestValue: 0,
+        maxValue: 0,
+        minValue: 0,
+        avgValue: 0
+      },
+      maxXAxisLabels: 40, // X轴最大显示标签数
+      paramLabelMap: { // 参数字段与标签的映射（与父组件保持一致）
+        stripSpeed: 'Strip Speed',
+        tensionPorBr1: 'Pay-off Tension 1#',
+        tensionPorBr2: 'Pay-off Tension 2#',
+        cleaningVoltage: 'Cleaning Voltage',
+        cleaningCurrent: 'Cleaning Current',
+        alkaliConcentration: 'Alkali Concentration',
+        alkaliTemperature: 'Alkali Temperature',
+        phfExitStripTemp: 'PH Furnace Exit Temp',
+        rtfExitStripTemp: 'Heating Section Exit Temp',
+        jcsExitStripTemp: 'Cooling Section Exit Temp',
+        scsExitStripTemp: 'Equilibrium Section Exit Temp',
+        potTemperature: 'Pot Temperature',
+        zincPotPower: 'Zinc Pot Power',
+        gasConsumption: 'Gas Consumption',
+        coolingTowerStripTemp: 'Cooling Tower Temp',
+        tensionBr5Tm: 'TM Tension',
+        stripSpeedTmExit: 'TM Exit Speed',
+        tlElongation: 'TL Elongation',
+        tensionTlBr7: 'TL Tension'
+      }
+    }
+  },
+  computed: {
+    // 图表标题（根据 paramField 自动匹配）
+    chartTitle() {
+      return this.paramLabelMap[this.paramField] || this.paramField
+    }
+  },
+  watch: {
+    // 监听线圈ID变化，重新请求数据
+    enCoilID: {
+      handler(newVal) {
+        this.fetchChartData()
+      },
+      immediate: true
+    },
+    // 监听参数字段变化，重新请求数据
+    paramField: {
+      handler(newVal) {
+        this.fetchChartData()
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // 初始化 ECharts 实例
+    this.initEchartsInstance()
+    // 监听窗口 resize，自适应图表尺寸
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    // 销毁 ECharts 实例，释放资源
+    if (this.chartInstance && this.chartInstance.dispose) {
+      this.chartInstance.dispose()
+    }
+    // 移除 resize 监听
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    // 初始化 ECharts 实例
+    initEchartsInstance() {
+      this.$nextTick(() => {
+        const chartDom = this.$refs.chartDom
+        if (!chartDom) {
+          console.warn('ECharts 渲染容器未找到，初始化失败')
+          return
+        }
+        // 创建 ECharts 实例
+        this.chartInstance = echarts.init(chartDom)
+        // 初始绘制空图表
+        this.drawEmptyChart()
+      })
+    },
+
+    // 获取图表数据
+    fetchChartData() {
+      // 前置校验：参数无效时绘制空图表并关闭加载
+      if (!this.enCoilID || !this.paramField) {
+        this.drawEmptyChart()
+        this.loading = false
+        return
+      }
+
+      // 开启加载状态
+      this.loading = true
+
+      // 请求数据
+      getSegmentList({
+        enCoilID: this.enCoilID,
+        paramField: this.paramField
+      }).then(res => {
+        if (res.data && res.data.length > 0) {
+          // 处理数据
+          const processedData = this.processChartData(res.data)
+          this.chartDataObj = processedData
+          this.stat = processedData.stat
+          // 绘制折线图
+          this.drawLineChart()
+        } else {
+          // 无数据时绘制无数据图表
+          this.drawNoDataChart()
+        }
+      }).catch(err => {
+        console.error(`获取${this.paramField}数据失败:`, err)
+        // 数据请求失败时绘制错误图表
+        this.drawErrorChart()
+      }).finally(() => {
+        // 无论成功失败，都关闭加载状态
+        this.loading = false
+      })
+    },
+
+    // 处理原始数据
+    processChartData(rawData) {
+      // 按 segNo 排序
+      rawData.sort((a, b) => a.segNo - b.segNo)
+      const originalTimeStamps = rawData.map(item => item.segNo)
+      const originalChartData = rawData.map(item => parseFloat(item.value))
+
+      let timeStamps = originalTimeStamps
+      let chartData = originalChartData
+
+      // X轴标签过多时进行采样（保持原有逻辑）
+      if (rawData.length > this.maxXAxisLabels) {
+        const sampleInterval = Math.ceil(rawData.length / this.maxXAxisLabels)
+        timeStamps = []
+        chartData = []
+        for (let i = 0; i < rawData.length; i += sampleInterval) {
+          timeStamps.push(rawData[i].segNo)
+          chartData.push(parseFloat(rawData[i].value))
+        }
+        // 确保最后一个数据点被保留
+        if (timeStamps[timeStamps.length - 1] !== rawData[rawData.length - 1].segNo) {
+          timeStamps.push(rawData[rawData.length - 1].segNo)
+          chartData.push(parseFloat(rawData[rawData.length - 1].value))
+        }
+      }
+
+      // 计算统计值
+      let stat = { latestValue: 0, maxValue: 0, minValue: 0, avgValue: 0 }
+      if (originalChartData.length) {
+        stat.latestValue = originalChartData[originalChartData.length - 1]
+        stat.maxValue = Math.max(...originalChartData)
+        stat.minValue = Math.min(...originalChartData)
+        stat.avgValue = originalChartData.reduce((sum, val) => sum + val, 0) / originalChartData.length
+      }
+
+      return {
+        timeStamps,
+        chartData,
+        originalTimeStamps,
+        originalChartData,
+        stat
+      }
+    },
+
+    // 绘制折线图（核心逻辑）
+    drawLineChart() {
+      if (!this.chartInstance || !this.chartDataObj.timeStamps.length) {
+        return
+      }
+
+      const option = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'line' },
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderColor: '#d4d4d4',
+          borderWidth: 1,
+          textStyle: { color: '#333' },
+          formatter: (params) => {
+            const paramItem = params[0]
+            return `
+              Sequence: ${paramItem.name}<br>
+              Value: ${paramItem.value.toFixed(2)}<br>
+              Unit: ${this.getParamUnit()}
+            `
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.chartDataObj.timeStamps,
+          axisLine: { lineStyle: { color: '#d4d4d4' } },
+          axisLabel: {
+            color: '#666',
+            rotate: 45,
+            interval: (index) => {
+              return index % Math.max(1, Math.ceil(this.chartDataObj.timeStamps.length / this.maxXAxisLabels)) === 0
+            }
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.getParamUnit(),
+          nameLocation: 'middle',
+          nameGap: 30,
+          nameTextStyle: { color: '#666' },
+          axisLine: { lineStyle: { color: '#d4d4d4' } },
+          axisLabel: { color: '#666' },
+          splitLine: {
+            lineStyle: { color: '#e8e8e8', type: 'dashed' }
+          }
+        },
+        series: [
+          {
+            name: this.chartTitle,
+            type: 'line',
+            data: this.chartDataObj.chartData,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 4,
+            lineStyle: { color: '#666', width: 2 },
+            itemStyle: { color: '#999' },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(153, 153, 153, 0.3)' },
+                  { offset: 1, color: 'rgba(153, 153, 153, 0.05)' }
+                ]
+              }
+            },
+            markPoint: {
+              data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }],
+              itemStyle: { color: '#999' },
+              label: { color: '#333' }
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Average' }],
+              lineStyle: { color: '#999', type: 'dashed' },
+              label: { color: '#333' }
+            }
+          }
+        ]
+      }
+
+      this.chartInstance.setOption(option, true)
+    },
+
+    // 绘制空图表（初始无参数/无线圈ID时）
+    drawEmptyChart() {
+      if (!this.chartInstance) return
+
+      const option = {
+        graphic: {
+          elements: [
+            {
+              type: 'text',
+              left: 'center',
+              top: 'center',
+              style: {
+                text: 'Please select performance',
+                fontSize: 16,
+                fontWeight: 'bold',
+                fill: '#999'
+              }
+            }
+          ]
+        },
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: []
+      }
+
+      this.chartInstance.setOption(option)
+    },
+
+    // 绘制无数据图表
+    drawNoDataChart() {
+      if (!this.chartInstance) return
+
+      const option = {
+        graphic: {
+          elements: [
+            {
+              type: 'text',
+              left: 'center',
+              top: 'center',
+              style: {
+                text: 'No data',
+                fontSize: 16,
+                fontWeight: 'bold',
+                fill: '#999'
+              }
+            }
+          ]
+        },
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: []
+      }
+
+      this.chartInstance.setOption(option)
+    },
+
+    // 绘制数据加载失败图表
+    drawErrorChart() {
+      if (!this.chartInstance) return
+
+      const option = {
+        graphic: {
+          elements: [
+            {
+              type: 'text',
+              left: 'center',
+              top: 'center',
+              style: {
+                text: 'Data loading failed',
+                fontSize: 16,
+                fontWeight: 'bold',
+                fill: '#f56c6c'
+              }
+            }
+          ]
+        },
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: []
+      }
+
+      this.chartInstance.setOption(option)
+    },
+
+    // 窗口 resize 时自适应图表尺寸
+    handleResize() {
+      if (this.chartInstance && this.chartInstance.resize) {
+        this.chartInstance.resize()
+      }
+    },
+
+    // 获取参数单位（保持原有逻辑）
+    getParamUnit() {
+      switch (this.paramField) {
+        case 'stripSpeed':
+        case 'stripSpeedTmExit':
+          return 'm/s'
+        case 'tensionPorBr1':
+        case 'tensionPorBr2':
+        case 'tensionBr5Tm':
+        case 'tensionTlBr7':
+          return 'N'
+        case 'cleaningVoltage':
+          return 'V'
+        case 'cleaningCurrent':
+          return 'A'
+        case 'alkaliConcentration':
+        case 'tlElongation':
+          return '%'
+        case 'alkaliTemperature':
+        case 'phfExitStripTemp':
+        case 'rtfExitStripTemp':
+        case 'jcsExitStripTemp':
+        case 'scsExitStripTemp':
+        case 'potTemperature':
+        case 'coolingTowerStripTemp':
+          return '°C'
+        case 'zincPotPower':
+          return 'kW'
+        case 'gasConsumption':
+          return 'm³/h'
+        default:
+          return ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-echarts-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.chart-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.chart-content {
+  width: 100%;
+  height: calc(100% - 24px);
+  box-sizing: border-box;
+  min-height: 180px; /* 兜底高度，确保 ECharts 初始化有尺寸 */
+}
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/components/PdoSummary.vue b/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
index 1b47d22..5efcc53 100644
--- a/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
+++ b/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
@@ -2,18 +2,18 @@
 <template>
   <el-descriptions 
     class="summary-content" 
-    :column="1" 
+    :column="6" 
     :style="{ width: '100%' }"
     size="mini"
   >
-    <!-- 循环渲染汇总项，从计算属性获取数据 -->
+    <!-- Loop render summary items, get data from computed property / 循环渲染汇总项，从计算属性获取数据 -->
     <el-descriptions-item 
       v-for="(item, index) in summaryResult" 
       :key="index" 
       :label="item.label"
       label-class="summary-label"
     >
-      <!-- 根据类型格式化显示（重量/百分比/数量） -->
+      <!-- Format display based on type (weight/percentage/count) / 根据类型格式化显示（重量/百分比/数量） -->
       <span :class="item.type === 'rate' ? 'summary-rate' : ''">
         {{ item.value }}
         {{ item.unit }}
@@ -26,44 +26,44 @@
 export default {
   name: 'PdoSummary',
   props: {
-    // 接收表格原始数据（父组件传递）
+    // Receive table raw data (passed from parent component) / 接收表格原始数据（父组件传递）
     tableData: {
       type: Array,
       required: true,
-      default: () => [] // 默认空数组，避免无数据时报错
+      default: () => [] // Default empty array to avoid errors when no data / 默认空数组，避免无数据时报错
     }
   },
   computed: {
-    // 核心：根据tableData计算汇总结果
+    // Core: Calculate summary result based on tableData / 核心：根据tableData计算汇总结果
     summaryResult() {
-      // 1. 基础数值汇总（处理字符串转数字，避免NaN）
+      // 1. Basic numerical summary (handle string to number conversion, avoid NaN) / 基础数值汇总（处理字符串转数字，避免NaN）
       const totalEntryWeight = this.tableData.reduce((sum, item) => {
         return sum + (Number(item.entryWeight) || 0)
-      }, 0) // 原料总重（来料重量求和）
+      }, 0) // Total entry weight (sum of entry weights) / 原料总重（来料重量求和）
 
       const totalExitWeight = this.tableData.reduce((sum, item) => {
         return sum + (Number(item.exitNetWeight) || 0)
-      }, 0) // 产品总重（成品带涂料重量求和）
+      }, 0) // Total exit weight (sum of finished product weights with coating) / 产品总重（成品带涂料重量求和）
 
-      const totalZincRemoved = totalEntryWeight - totalExitWeight // 去锌总理重（原料总重 - 产品总重）
+      const totalZincRemoved = totalEntryWeight - totalExitWeight // Total zinc removed weight (entry weight - exit weight) / 去锌总理重（原料总重 - 产品总重）
 
-      // 2. 成材率计算（避免除数为0）
+      // 2. Yield rate calculation (avoid division by zero) / 成材率计算（避免除数为0）
       const yieldRate = totalEntryWeight > 0 
         ? ((totalExitWeight / totalEntryWeight) * 100).toFixed(2) 
         : '0.00'
 
-      // 3. 卷数统计（原料/成品卷数默认按表格行数，可根据实际业务调整，如去重entryMatId）
-      const totalEntryCoils = this.tableData.length // 原料总卷数
-      const totalExitCoils = this.tableData.length // 成品总卷数
+      // 3. Coil count statistics (entry/finished coil count defaults to table row count, can be adjusted based on actual business, e.g., deduplicate entryMatId) / 卷数统计（原料/成品卷数默认按表格行数，可根据实际业务调整，如去重entryMatId）
+      const totalEntryCoils = this.tableData.length // Total entry coils / 原料总卷数
+      const totalExitCoils = this.tableData.length // Total exit coils / 成品总卷数
 
-      // 4. 返回格式化后的汇总项
+      // 4. Return formatted summary items / 返回格式化后的汇总项
       return [
-        { label: '原料总重', value: totalEntryWeight.toFixed(1), unit: 't', type: 'weight' },
-        { label: '去锌总理重', value: totalZincRemoved.toFixed(1), unit: 't', type: 'weight' },
-        { label: '产品总重', value: totalExitWeight.toFixed(1), unit: 't', type: 'weight' },
-        { label: '成材率', value: yieldRate, unit: '%', type: 'rate' },
-        { label: '原料总卷数', value: totalEntryCoils, unit: '卷', type: 'count' },
-        { label: '成品总卷数', value: totalExitCoils, unit: '卷', type: 'count' }
+        { label: 'Total Entry Weight', value: totalEntryWeight.toFixed(1), unit: 't', type: 'weight' }, // 原料总重
+        // { label: 'Total Zinc Removed', value: totalZincRemoved.toFixed(1), unit: 't', type: 'weight' }, // 去锌总理重
+        { label: 'Total Exit Weight', value: totalExitWeight.toFixed(1), unit: 't', type: 'weight' }, // 产品总重
+        { label: 'Yield Rate', value: yieldRate, unit: '%', type: 'rate' }, // 成材率
+        { label: 'Total Entry Coils', value: totalEntryCoils, unit: 'coils', type: 'count' }, // 原料总卷数
+        { label: 'Total Exit Coils', value: totalExitCoils, unit: 'coils', type: 'count' } // 成品总卷数
       ]
     }
   }
@@ -73,7 +73,6 @@ export default {
 <style lang="scss" scoped>
 .summary-content {
   padding: 10px;
-  flex: 1;
   
   &::-webkit-scrollbar {
     width: 4px;
diff --git a/apps/l2/src/views/l2/pdo/components/QualityCertificate.vue b/apps/l2/src/views/l2/pdo/components/QualityCertificate.vue
new file mode 100644
index 0000000..2d831e3
--- /dev/null
+++ b/apps/l2/src/views/l2/pdo/components/QualityCertificate.vue
@@ -0,0 +1,694 @@
+<template>
+  <div class="quality-certificate-container">
+    <div id="qualityCertificateContent" class="certificate-content">
+      <!-- Header / 头部 -->
+      <div class="certificate-header">
+        <div class="header-top">
+          <div class="company-logo">
+            <!-- Company logo placeholder / 公司Logo占位 -->
+          </div>
+          <div class="header-title">
+            <h1>Product Quality Certificate</h1>
+            <!-- 产品质量证明书 -->
+            <div class="document-number">Document No.: {{ certificateData.documentNo || '-' }}</div>
+            <!-- 文档编号 -->
+          </div>
+          <div class="qr-code-placeholder">
+            <!-- QR code placeholder / 二维码占位 -->
+          </div>
+        </div>
+
+        <div class="header-info">
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Licence No.:</span>
+              <!-- 许可证号 -->
+              <span class="info-value">{{ certificateData.licenceNo || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Purchaser:</span>
+              <!-- 订货单位 -->
+              <span class="info-value">{{ certificateData.purchaser || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Customer:</span>
+              <!-- 收货单位 -->
+              <span class="info-value">{{ certificateData.customer || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Contract No.:</span>
+              <!-- 合同编号 -->
+              <span class="info-value">{{ certificateData.contractNo || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Trade Mark:</span>
+              <!-- 品种名称 -->
+              <span class="info-value">{{ certificateData.tradeMark || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Technique Standard:</span>
+              <!-- 技术条件 -->
+              <span class="info-value">{{ certificateData.techniqueStandard || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Odd No.:</span>
+              <!-- 结齐单号 -->
+              <span class="info-value">{{ certificateData.oddNo || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Delivery Condition:</span>
+              <!-- 交货状态 -->
+              <span class="info-value">{{ certificateData.deliveryCondition || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Certificate No.:</span>
+              <!-- 证明书号 -->
+              <span class="info-value">{{ certificateData.certificateNo || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Destination:</span>
+              <!-- 到站 -->
+              <span class="info-value">{{ certificateData.destination || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="info-label">Wagon No.:</span>
+              <!-- 车号 -->
+              <span class="info-value">{{ certificateData.wagonNo || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Delivery Date:</span>
+              <!-- 发货日期 -->
+              <span class="info-value">{{ certificateData.deliveryDate || '-' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main data table / 主数据表格 -->
+      <div class="certificate-table">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th rowspan="2" style="width: 3%;">No.</th>
+              <!-- 序号 -->
+              <th rowspan="2" style="width: 8%;">Coil No.</th>
+              <!-- 钢卷号 -->
+              <th rowspan="2" style="width: 7%;">Heat No.</th>
+              <!-- 熔炼号 -->
+              <th colspan="3" style="width: 9%;">Size</th>
+              <!-- 规格 -->
+              <th rowspan="2" style="width: 5%;">Weight (t)</th>
+              <!-- 重量 -->
+              <th colspan="5" style="width: 12%;">Chemical Composition (%)</th>
+              <!-- 化学成分 -->
+              <th colspan="5" style="width: 15%;">Tension Test</th>
+              <!-- 拉伸试验 -->
+              <th colspan="2" style="width: 8%;">Zinc-coating & Cold Bend</th>
+              <!-- 锌层冷弯 -->
+              <th style="width: 6%;">Zinc Coating Thickness</th>
+              <!-- 锌层厚度 -->
+              <th colspan="2" style="width: 8%;">Hardness</th>
+              <!-- 硬度 -->
+              <th rowspan="2" style="width: 6%;">Coating Weight (g/m²)</th>
+              <!-- 镀层重量 -->
+              <th rowspan="2" style="width: 6%;">Surface Quality</th>
+              <!-- 表面组别 -->
+              <th rowspan="2" style="width: 6%;">Flatness</th>
+              <!-- 不平度 -->
+            </tr>
+            <tr>
+              <th style="width: 3%;">Thickness (mm)</th>
+              <!-- 厚 -->
+              <th style="width: 3%;">Width (mm)</th>
+              <!-- 宽 -->
+              <th style="width: 3%;">Length (m)</th>
+              <!-- 长 -->
+              <th style="width: 2.4%;">C</th>
+              <th style="width: 2.4%;">Si</th>
+              <th style="width: 2.4%;">Mn</th>
+              <th style="width: 2.4%;">P</th>
+              <th style="width: 2.4%;">S</th>
+              <th style="width: 3%;">Yield (MPa)</th>
+              <!-- 屈服 -->
+              <th style="width: 3%;">Tensile (MPa)</th>
+              <!-- 抗拉 -->
+              <th style="width: 3%;">Elongation (%)</th>
+              <!-- 伸长 -->
+              <th style="width: 3%;">n Value</th>
+              <!-- n值 -->
+              <th style="width: 3%;">r Value</th>
+              <!-- r值 -->
+              <th style="width: 4%;">Types</th>
+              <!-- 类型 -->
+              <th style="width: 4%;">Value</th>
+              <!-- 值 -->
+              <th style="width: 6%;">Thickness</th>
+              <!-- 厚度 -->
+              <th style="width: 4%;">Types</th>
+              <!-- 类型 -->
+              <th style="width: 4%;">Value</th>
+              <!-- 值 -->
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(coil, index) in certificateData.coils" :key="index">
+              <td>{{ index + 1 }}</td>
+              <td>{{ coil.coilNo || '-' }}</td>
+              <td>{{ coil.heatNo || '-' }}</td>
+              <td>{{ formatNumber(coil.thickness) }}</td>
+              <td>{{ formatNumber(coil.width) }}</td>
+              <td>{{ formatNumber(coil.length) }}</td>
+              <td>{{ formatNumber(coil.weight) }}</td>
+              <td>{{ formatNumber(coil.c) }}</td>
+              <td>{{ formatNumber(coil.si) }}</td>
+              <td>{{ formatNumber(coil.mn) }}</td>
+              <td>{{ formatNumber(coil.p) }}</td>
+              <td>{{ formatNumber(coil.s) }}</td>
+              <td>{{ formatNumber(coil.yield) }}</td>
+              <td>{{ formatNumber(coil.tensile) }}</td>
+              <td>{{ formatNumber(coil.elongation) }}</td>
+              <td>{{ formatNumber(coil.nValue) }}</td>
+              <td>{{ formatNumber(coil.rValue) }}</td>
+              <td>{{ coil.zincCoatingType || '-' }}</td>
+              <td>{{ coil.zincCoatingValue || '-' }}</td>
+              <td>{{ formatNumber(coil.zincCoatingThickness) }}</td>
+              <td>{{ coil.hardnessType || '-' }}</td>
+              <td>{{ coil.hardnessValue || '-' }}</td>
+              <td>{{ formatNumber(coil.coatingWeight) }}</td>
+              <td>{{ coil.surfaceQuality || '-' }}</td>
+              <td>{{ coil.flatness || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="certificate-charts">
+        <div class="charts-title">Production Process Curves</div>
+        <!-- 生产过程曲线标题 -->
+        <div class="charts-wrapper">
+          <!-- 带钢速度曲线：stripSpeed -->
+          <div class="chart-item">
+            <div class="chart-subtitle">Strip Speed (m/s)</div>
+            <ParamEcharts :enCoilID="getEnCoilID" paramField="stripSpeed" />
+          </div>
+          <!-- 1#放卷张力曲线：tensionPorBr1 -->
+          <div class="chart-item">
+            <div class="chart-subtitle">Pay-off Tension 1# (N)</div>
+            <ParamEcharts :enCoilID="getEnCoilID" paramField="tensionPorBr1" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer information / 底部信息 -->
+      <div class="certificate-footer">
+        <div class="footer-row">
+          <div class="footer-item">
+            <span class="footer-label">Steel Grade:</span>
+            <!-- 牌号 -->
+            <span class="footer-value">{{ certificateData.steelGrade || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Surface Structure:</span>
+            <!-- 表面结构 -->
+            <span class="footer-value">{{ certificateData.surfaceStructure || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Edge:</span>
+            <!-- 边缘状态 -->
+            <span class="footer-value">{{ certificateData.edge || '-' }}</span>
+          </div>
+        </div>
+        <div class="footer-row">
+          <div class="footer-item">
+            <span class="footer-label">Coat Type:</span>
+            <!-- 镀层种类 -->
+            <span class="footer-value">{{ certificateData.coatType || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Size Precision:</span>
+            <!-- 尺寸精度 -->
+            <span class="footer-value">{{ certificateData.sizePrecision || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Surface Treatment:</span>
+            <!-- 表面处理 -->
+            <span class="footer-value">{{ certificateData.surfaceTreatment || '-' }}</span>
+          </div>
+        </div>
+        <div class="footer-row">
+          <div class="footer-item">
+            <span class="footer-label">Total Number:</span>
+            <!-- 总卷(包)数 -->
+            <span class="footer-value">{{ certificateData.totalNumber || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Note:</span>
+            <!-- 注释 -->
+            <span class="footer-value">{{ certificateData.note || '-' }}</span>
+          </div>
+          <div class="footer-item">
+            <span class="footer-label">Total Weight (t):</span>
+            <!-- 总重量 -->
+            <span class="footer-value">{{ certificateData.totalWeight || '-' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Remarks / 备注 -->
+      <div class="certificate-remarks">
+        <div class="remarks-title">Remarks:</div>
+        <!-- 备注 -->
+        <div class="remarks-content">
+          <p>1. It is certified herein that the products have been produced and tested according to above standards and
+            the products are all qualified.</p>
+          <!-- 本产品已按上述标准生产和检验,其结果符合要求,特此证明。 -->
+          <p>2. The original quality certificate is the basis for acceptance, copies are for reference only and not to
+            be used as acceptance vouchers.</p>
+          <!-- 质量证明书原件是验收依据,复印件仅供参考,不作为验收凭证。 -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Print button / 打印按钮 -->
+    <div class="print-btn-container">
+      <el-button type="primary" @click="handlePrint" icon="el-icon-printer">
+        Print Certificate
+        <!-- 打印质保书 -->
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import printJS from 'print-js';
+import dayjs from 'dayjs';
+// 1. 导入 dom-to-image 库
+import domtoimage from 'dom-to-image';
+// 获取生产过程曲线数据
+import ParamEcharts from './ParamEcharts.vue'
+
+export default {
+  name: 'QualityCertificate',
+  components: {
+    ParamEcharts
+  },
+  props: {
+    // Single coil detail / 单卷详情
+    detail: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      certificateData: {}
+    };
+  },
+  watch: {
+    // Only watch single coil detail / 仅监听单卷详情
+    detail: {
+      handler(newVal) {
+        if (newVal) {
+          this.initCertificateData(newVal);
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+    getEnCoilID() {
+      // 优先从detail中取有效线圈ID（与后端接口保持一致）
+      return this.detail.enCoilID || this.detail.exitMatId || this.detail.coilid || '';
+    }
+  },
+  methods: {
+    // Initialize certificate data for single coil / 初始化单卷质保书数据
+    initCertificateData(detail) {
+      const coils = [detail]; // 单卷：永远只有一个卷
+
+      this.certificateData = {
+        documentNo: detail.documentNo || `QG/GFJL(Y) 164-2004`,
+        licenceNo: detail.licenceNo || '',
+        purchaser: detail.purchaser || '',
+        customer: detail.customer || '',
+        contractNo: detail.contractNo || detail.planNo || '',
+        tradeMark: detail.tradeMark || detail.prodCode || '',
+        techniqueStandard: detail.techniqueStandard || '',
+        oddNo: detail.oddNo || '',
+        deliveryCondition: detail.deliveryCondition || detail.prodCode || '',
+        certificateNo: detail.certificateNo || detail.exitMatId || '',
+        destination: detail.destination || '',
+        wagonNo: detail.wagonNo || '',
+        deliveryDate: detail.deliveryDate || dayjs().format('YYYY-MM-DD'),
+        steelGrade: detail.steelGrade || '',
+        surfaceStructure: detail.surfaceStructure || 'Smooth',
+        edge: detail.edge || 'Untrimmed',
+        coatType: detail.coatType || '',
+        sizePrecision: detail.sizePrecision || 'Normal',
+        surfaceTreatment: detail.surfaceTreatment || '',
+        totalNumber: 1, // 单卷固定为1
+        note: detail.note || '',
+        totalWeight: this.calculateTotalWeight(coils),
+        coils: this.formatCoilsData(coils)
+      };
+    },
+
+    // Format coils data / 格式化卷数据
+    formatCoilsData(coils) {
+      return coils.map(coil => ({
+        coilNo: coil.exitMatId || coil.coilid || '-',
+        heatNo: coil.heatNo || coil.heatNo || '-',
+        thickness: coil.exitThickness || coil.entryThick || '-',
+        width: coil.exitWidth || coil.entryWidth || '-',
+        length: coil.exitLength || coil.entryLength || '-',
+        weight: coil.exitNetWeight || coil.actualWeight || coil.entryWeight || '-',
+        c: coil.c || coil.chemicalC || '-',
+        si: coil.si || coil.chemicalSi || '-',
+        mn: coil.mn || coil.chemicalMn || '-',
+        p: coil.p || coil.chemicalP || '-',
+        s: coil.s || coil.chemicalS || '-',
+        yield: coil.yield || coil.yieldStrength || '-',
+        tensile: coil.tensile || coil.tensileStrength || '-',
+        elongation: coil.elongation || coil.elongationPercent || '-',
+        nValue: coil.nValue || '-',
+        rValue: coil.rValue || '-',
+        zincCoatingType: coil.zincCoatingType || '-',
+        zincCoatingValue: coil.zincCoatingValue || (coil.weightTop && coil.weightBottom ? 'Qualified' : '-'),
+        zincCoatingThickness: coil.zincCoatingThickness || coil.zincCoatingThickness || '-', // 添加锌层厚度字段
+        hardnessType: coil.hardnessType || '-',
+        hardnessValue: coil.hardnessValue || '-',
+        coatingWeight: coil.coatingWeight || coil.weightTop || '-',
+        surfaceQuality: coil.surfaceQuality || coil.surfaceGroup || 'Premium',
+        flatness: coil.flatness || 'Premium'
+      }));
+    },
+
+    // Calculate total weight / 计算总重量
+    calculateTotalWeight(coils) {
+      const total = coils.reduce((sum, coil) => {
+        const weight = parseFloat(coil.exitNetWeight || coil.actualWeight || coil.entryWeight || 0);
+        return sum + (isNaN(weight) ? 0 : weight);
+      }, 0);
+      return total > 0 ? total.toFixed(2) : '-';
+    },
+
+    // Format number / 格式化数字
+    formatNumber(value) {
+      if (value === null || value === undefined || value === '' || value === '-') {
+        return '-';
+      }
+      const num = parseFloat(value);
+      if (isNaN(num)) {
+        return value;
+      }
+      // Keep 2 decimal places for most numbers, but show more precision for small values / 大多数数字保留2位小数，但小数值显示更多精度
+      if (Math.abs(num) < 1) {
+        return num.toFixed(3);
+      }
+      return num.toFixed(2);
+    },
+
+    // 2. 重构打印方法：DOM -> 高清图片 -> 打印
+    async handlePrint() {
+      try {
+        // 获取打印目标DOM元素
+        const printElement = document.getElementById('qualityCertificateContent');
+        if (!printElement) {
+          this.$message?.error('未找到质保书打印内容');
+          return;
+        }
+
+        // 将DOM转为高清PNG图片（base64格式），解决虚化问题
+        const imageBase64 = await domtoimage.toPng(printElement, {
+          backgroundColor: '#ffffff', // 强制白色背景，避免透明区域
+          scale: 4, // 缩放倍数（3-4最佳，越大越清晰，文件体积略有增加）
+          quality: 1.0 // 图片质量拉满
+        });
+
+        // 调用printJS打印图片（适配A4横向布局）
+        printJS({
+          printable: imageBase64, // 传入base64图片
+          type: 'image', // 打印类型改为image（关键变更）
+          header: null,
+          footer: null,
+          documentTitle: 'Quality Certificate',
+          // 配置图片打印样式，适配A4横向，防止变形
+          imageStyle: `
+            width: 100%;
+            max-width: 297mm; /* A4横向宽度（297mm×210mm） */
+            height: auto;
+            object-fit: contain;
+          `,
+          onPrintDialogClose: () => {
+            console.log('Print dialog closed');
+          }
+        });
+      } catch (error) {
+        // 捕获转换或打印异常，提升用户体验
+        console.error('质保书打印失败：', error);
+        this.$message?.error('打印失败，请重试');
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.quality-certificate-container {
+  padding: 20px;
+  background: #fff;
+}
+
+.certificate-content {
+  width: 100%;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  color: #000;
+}
+
+/* Header styles / 头部样式 */
+.certificate-header {
+  margin-bottom: 20px;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #000;
+}
+
+.company-logo {
+  width: 80px;
+  height: 80px;
+  border: 1px solid #ccc;
+  background: #f5f5f5;
+}
+
+.header-title {
+  flex: 1;
+  text-align: center;
+}
+
+.header-title h1 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.document-number {
+  font-size: 11px;
+  color: #666;
+}
+
+.qr-code-placeholder {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #ccc;
+  background: #f5f5f5;
+}
+
+.header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-row {
+  display: flex;
+  gap: 30px;
+}
+
+.info-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.info-label {
+  font-weight: bold;
+  min-width: 120px;
+  margin-right: 8px;
+}
+
+.info-value {
+  flex: 1;
+}
+
+/* Table styles / 表格样式 */
+.certificate-table {
+  margin: 20px 0;
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 10px;
+  border: 2px solid #000;
+  table-layout: fixed;
+}
+
+.data-table th,
+.data-table td {
+  border: 1px solid #000;
+  padding: 6px 4px;
+  text-align: center;
+  vertical-align: middle;
+  word-wrap: break-word;
+  font-size: 10px;
+}
+
+.data-table th {
+  background: #f0f0f0;
+  font-weight: bold;
+  font-size: 9px;
+}
+
+.data-table tbody tr:nth-child(even) {
+  background: #fafafa;
+}
+
+.data-table tbody tr:hover {
+  background: #f0f0f0;
+}
+
+/* Footer styles / 底部样式 */
+.certificate-footer {
+  margin: 20px 0;
+  padding: 10px 0;
+  border-top: 1px solid #000;
+}
+
+.footer-row {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 8px;
+}
+
+.footer-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.footer-label {
+  font-weight: bold;
+  min-width: 120px;
+  margin-right: 8px;
+}
+
+.footer-value {
+  flex: 1;
+}
+
+/* Remarks styles / 备注样式 */
+.certificate-remarks {
+  margin-top: 20px;
+  padding-top: 10px;
+  border-top: 1px solid #000;
+}
+
+.remarks-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.remarks-content p {
+  margin: 5px 0;
+  line-height: 1.6;
+}
+
+/* Print button / 打印按钮 */
+.print-btn-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+/* 生产过程曲线区域样式 */
+.certificate-charts {
+  margin: 20px 0;
+  padding: 10px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+}
+
+.charts-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 15px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.charts-wrapper {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  height: 300px; /* 固定图表区域高度，确保ECharts正常渲染 */
+}
+
+.chart-item {
+  flex: 1; /* 两个图表平分宽度 */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-subtitle {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+
+/* Print styles / 打印样式（仅隐藏按钮，图片打印样式已在printJS中配置） */
+@media print {
+  .print-btn-container {
+    display: none;
+  }
+
+  .quality-certificate-container {
+    padding: 0;
+    background: #fff;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/components/line.vue b/apps/l2/src/views/l2/pdo/components/line.vue
index f254e17..7f11e85 100644
--- a/apps/l2/src/views/l2/pdo/components/line.vue
+++ b/apps/l2/src/views/l2/pdo/components/line.vue
@@ -1,23 +1,45 @@
 <template>
   <div class="monitoring-container">
-    <div class="chart-wrapper" v-loading="loading">
-      <!-- 参数选择下拉框 -->
-      <el-select v-model="paramField" class="param-select" @change="handleParamChange" size="mini">
-        <el-option v-for="item in paramFields" :key="item.value" :label="item.label" :value="item.value"></el-option>
-      </el-select>
+    <div style="height: 100%; display: flex; box-sizing: border-box;">
+      <!-- 左侧树形选择器（最多勾选4个） -->
+      <div style="height: 100%; width: 320px; overflow-y: scroll; border-right: 1px solid #e8e8e8; padding: 10px;">
+        <el-tree :data="paramFields" :props="treeProps" node-key="value" show-checkbox @check="handleCheckChange"
+          ref="paramTree" :check-strictly="true"></el-tree>
+      </div>
 
-      <!-- 图表容器 -->
-      <div ref="chart" class="chart-content"></div>
+      <!-- 右侧图表布局容器（总高度100%） -->
+      <div class="charts-layout-wrapper"
+        :style="{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }">
+        <!-- 核心：根据勾选数量动态控制布局样式 -->
+        <div class="charts-container" :class="{
+          'count-1': checkedCount === 1,
+          'count-2': checkedCount === 2,
+          'count-3': checkedCount === 3,
+          'count-4': checkedCount === 4
+        }" :style="{ height: '100%', width: '100%' }">
+          <!-- 替换为封装后的 ECharts 组件，循环渲染 -->
+          <div v-for="(param, index) in checkedNodes" :key="param.value" class="preset-chart-item"
+            :style="{ display: index < maxCheckCount ? 'block' : 'none' }">
+            <!-- 传入 enCoilID 和 paramField（即 param.value） -->
+            <ParamEcharts :enCoilID="enCoilID" :paramField="param.value" />
+          </div>
+
+          <!-- 无勾选时显示提示 -->
+          <div v-if="checkedCount === 0" class="no-param-tip">
+            Please place the parameter on the left to display the chart. (Max 4)
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { getSegmentList } from '@/api/business/segment'
+import ParamEcharts from './ParamEcharts.vue' // 引入封装后的 ECharts 组件
 
 export default {
   name: 'DeviceMonitoring',
+  components: { ParamEcharts }, // 注册组件
   props: {
     enCoilID: {
       type: String,
@@ -26,476 +48,72 @@ export default {
   },
   data() {
     return {
-      // 参数列表来源于 DeviceEnum 定义的监测字段
+      // 参数列表
       paramFields: [
-        { label: '带钢速度', value: 'stripSpeed' },
-        { label: '开卷张力1#', value: 'tensionPorBr1' },
-        { label: '开卷张力2#', value: 'tensionPorBr2' },
-        { label: '清洗电压', value: 'cleaningVoltage' },
-        { label: '清洗电流', value: 'cleaningCurrent' },
-        { label: '碱液浓度', value: 'alkaliConcentration' },
-        { label: '碱液温度', value: 'alkaliTemperature' },
-        { label: 'PH炉出口温度', value: 'phfExitStripTemp' },
-        { label: '加热段出口温度', value: 'rtfExitStripTemp' },
-        { label: '冷却段出口温度', value: 'jcsExitStripTemp' },
-        { label: '均衡段出口温度', value: 'scsExitStripTemp' },
-        { label: '锌锅温度', value: 'potTemperature' },
-        { label: '锌锅功率', value: 'zincPotPower' },
-        { label: '燃气消耗', value: 'gasConsumption' },
-        { label: '冷却塔温度', value: 'coolingTowerStripTemp' },
-        { label: '光整机张力', value: 'tensionBr5Tm' },
-        { label: 'TM出口速度', value: 'stripSpeedTmExit' },
-        { label: '拉矫延伸率', value: 'tlElongation' },
-        { label: '拉矫张力', value: 'tensionTlBr7' }
+        { label: 'Strip Speed', value: 'stripSpeed' },
+        { label: 'Pay-off Tension 1#', value: 'tensionPorBr1' },
+        { label: 'Pay-off Tension 2#', value: 'tensionPorBr2' },
+        { label: 'Cleaning Voltage', value: 'cleaningVoltage' },
+        { label: 'Cleaning Current', value: 'cleaningCurrent' },
+        { label: 'Alkali Concentration', value: 'alkaliConcentration' },
+        { label: 'Alkali Temperature', value: 'alkaliTemperature' },
+        { label: 'PH Furnace Exit Temp', value: 'phfExitStripTemp' },
+        { label: 'Heating Section Exit Temp', value: 'rtfExitStripTemp' },
+        { label: 'Cooling Section Exit Temp', value: 'jcsExitStripTemp' },
+        { label: 'Equilibrium Section Exit Temp', value: 'scsExitStripTemp' },
+        { label: 'Pot Temperature', value: 'potTemperature' },
+        { label: 'Zinc Pot Power', value: 'zincPotPower' },
+        { label: 'Gas Consumption', value: 'gasConsumption' },
+        { label: 'Cooling Tower Temp', value: 'coolingTowerStripTemp' },
+        { label: 'TM Tension', value: 'tensionBr5Tm' },
+        { label: 'TM Exit Speed', value: 'stripSpeedTmExit' },
+        { label: 'TL Elongation', value: 'tlElongation' },
+        { label: 'TL Tension', value: 'tensionTlBr7' }
       ],
-      paramField: 'stripSpeed',
       treeProps: {
         children: 'children',
         label: 'label'
       },
-      currentParam: null, // 当前选中的参数
-      chart: null, // 图表实例
-      chartData: [], // 图表数据
-      timeStamps: [], // 时间戳
-      originalTimeStamps: [], // 原始时间戳（用于采样）
-      originalChartData: [], // 原始图表数据（用于采样）
-      timeRange: '1', // 时间范围(分钟)
-      socket: null, // 模拟socket
-      latestValue: 0,
-      maxValue: 0,
-      minValue: 0,
-      avgValue: 0,
-      loading: false,
-      maxXAxisLabels: 40 // X轴最多显示的标签数量
+      checkedNodes: [], // 已勾选参数列表
+      checkedCount: 0, // 已勾选数量（用于布局控制）
+      maxCheckCount: 4 // 最大勾选数量
     }
   },
   watch: {
+    // 监听线圈ID变化，无需手动更新图表（子组件已自行监听）
     enCoilID: {
       handler(newVal) {
-        console.log('enCoilID 变化:', newVal);
-        if (newVal) {
-          this.fetchChartData();
-        } else {
-          this.drawEmptyChart();
-        }
+        console.log('enCoilID changed:', newVal);
       },
       immediate: true
     },
-  },
-  mounted() {
-    // 初始化图表
-    this.initChart();
-  },
-  beforeDestroy() {
-    // 销毁图表实例和事件监听
-    if (this.chart) {
-      this.chart.dispose();
+    // 监听勾选数量变化，触发布局更新
+    checkedCount: {
+      handler() {
+        this.$nextTick(() => {
+          // 窗口resize强制刷新（可选，子组件已监听resize，此处为兜底）
+          window.dispatchEvent(new Event('resize'))
+        });
+      }
     }
-    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
-    // 初始化图表
-    initChart() {
-      this.$nextTick(() => {
-        if (this.$refs.chart) {
-          this.chart = echarts.init(this.$refs.chart);
-          // 监听窗口大小变化，调整图表尺寸
-          window.addEventListener('resize', this.handleResize);
+    // 处理树形节点勾选（限制最多4个）
+    handleCheckChange() {
+      const checkedNodes = this.$refs.paramTree.getCheckedNodes();
+      const checkedCount = checkedNodes.length;
 
-          // 初始显示
-          if (this.enCoilID) {
-            this.fetchChartData();
-          } else {
-            this.drawEmptyChart();
-          }
-        }
-      });
-    },
-
-    // 处理窗口大小变化
-    handleResize() {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    },
-
-    // 获取图表数据
-    fetchChartData() {
-      if (!this.enCoilID || !this.paramField) {
-        this.drawNoDataChart();
-      }
-      this.loading = true;
-      getSegmentList({
-        enCoilID: this.enCoilID,
-        paramField: this.paramField
-      }).then(res => {
-        // 假设res.data格式为[{ segNo: '时间戳', value: '数值' }]
-        if (res.data && res.data.length) {
-          this.processChartData(res.data);
-          this.drawLineChart();
-          console.log('有数据，绘制折线图')
-        } else {
-          this.drawNoDataChart();
-          console.log('无数据，清空折线图')
-        }
-      }).catch(err => {
-        console.error('获取数据失败:', err);
-        this.drawErrorChart();
-      }).finally(_ => {
-        this.loading = false;
-      });
-    },
-
-    // 处理图表数据
-    processChartData(rawData) {
-      // 排序数据（按segNo，假设是时间戳或序号）
-      rawData.sort((a, b) => a.segNo - b.segNo);
-
-      // 保存原始数据
-      this.originalTimeStamps = rawData.map(item => item.segNo);
-      this.originalChartData = rawData.map(item => parseFloat(item.value));
-
-      // 根据数据量决定是否采样
-      // if (rawData.length > this.maxXAxisLabels) {
-      //   // 数据采样 - 均匀采样
-      //   this.sampleData(rawData);
-      // } else {
-        // 数据量适中，直接使用全部数据
-        this.timeStamps = this.originalTimeStamps;
-        this.chartData = this.originalChartData;
-      // }
-
-      // 计算统计值（基于原始数据）
-      if (this.originalChartData.length) {
-        this.latestValue = this.originalChartData[this.originalChartData.length - 1];
-        this.maxValue = Math.max(...this.originalChartData);
-        this.minValue = Math.min(...this.originalChartData);
-        this.avgValue = this.originalChartData.reduce((sum, val) => sum + val, 0) / this.originalChartData.length;
-      }
-    },
-
-    // 数据采样方法
-    sampleData(rawData) {
-      const total = rawData.length;
-      const sampleInterval = Math.ceil(total / this.maxXAxisLabels);
-
-      // 初始化采样数组
-      this.timeStamps = [];
-      this.chartData = [];
-
-      // 均匀采样
-      for (let i = 0; i < total; i += sampleInterval) {
-        this.timeStamps.push(rawData[i].segNo);
-        this.chartData.push(parseFloat(rawData[i].value));
+      // 超过4个时取消最后一个并提示
+      if (checkedCount > this.maxCheckCount) {
+        this.$message.warning(`Please select up to ${this.maxCheckCount} parameters.`);
+        const lastNode = checkedNodes[checkedNodes.length - 1];
+        this.$refs.paramTree.setChecked(lastNode.value, false, false);
+        return;
       }
 
-      // 确保最后一个数据点被包含
-      if (this.timeStamps[this.timeStamps.length - 1] !== rawData[total - 1].segNo) {
-        this.timeStamps.push(rawData[total - 1].segNo);
-        this.chartData.push(parseFloat(rawData[total - 1].value));
-      }
-    },
-
-    // 绘制折线图
-    drawLineChart() {
-      if (!this.chart) return;
-
-      // 清理旧图层，避免“暂无数据”残留
-      this.chart.clear();
-
-      const option = {
-        backgroundColor: 'transparent',
-        graphic: [], // 清除占位/无数据图层
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line'
-          },
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          borderColor: '#d4d4d4',
-          borderWidth: 1,
-          textStyle: {
-            color: '#333'
-          },
-          formatter: (params) => {
-            const param = params[0];
-            return `
-              序号: ${param.name}<br>
-              值: ${param.value.toFixed(2)}<br>
-              单位: ${this.getParamUnit()}
-            `;
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '10%', // 增加底部空间，防止标签被截断
-          top: '15%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          // data: this.timeStamps,
-          // axisLine: {
-          //   lineStyle: {
-          //     color: '#d4d4d4'
-          //   }
-          // },
-          // axisLabel: {
-          //   color: '#666',
-          //   rotate: 45,
-          //   // 动态计算标签显示间隔
-          //   interval: (index, value) => {
-          //     // 如果数据量大于maxXAxisLabels，按采样后的间隔显示
-          //     return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
-          //   }
-          // },
-          splitLine: {
-            show: false
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: this.getParamUnit(),
-          nameLocation: 'middle',
-          nameGap: 30,
-          nameTextStyle: {
-            color: '#666'
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#d4d4d4'
-            }
-          },
-          axisLabel: {
-            color: '#666'
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#e8e8e8',
-              type: 'dashed'
-            }
-          }
-        },
-        series: [
-          {
-            name: this.getParamLabel(),
-            type: 'line',
-            data: this.chartData,
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 4,
-            lineStyle: {
-              color: '#666',
-              width: 2
-            },
-            itemStyle: {
-              color: '#999'
-            },
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  { offset: 0, color: 'rgba(153, 153, 153, 0.3)' },
-                  { offset: 1, color: 'rgba(153, 153, 153, 0.05)' }
-                ]
-              }
-            },
-            markPoint: {
-              data: [
-                { type: 'max', name: '最大值' },
-                { type: 'min', name: '最小值' }
-              ],
-              itemStyle: {
-                color: '#999'
-              },
-              label: {
-                color: '#333'
-              }
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' }
-              ],
-              lineStyle: {
-                color: '#999',
-                type: 'dashed'
-              },
-              label: {
-                color: '#333'
-              }
-            }
-          }
-        ]
-      };
-
-      this.chart.setOption(option, true);
-    },
-
-    // 绘制空图表（未选择实绩）
-    drawEmptyChart() {
-      if (!this.chart) return;
-
-      const option = {
-        graphic: {
-          elements: [
-            {
-              type: 'text',
-              left: 'center',
-              top: 'center',
-              style: {
-                text: '请选择实绩',
-                fontSize: 16,
-                fontWeight: 'bold',
-                fill: '#999'
-              }
-            }
-          ]
-        },
-        xAxis: {
-          type: 'category',
-          data: []
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: []
-      };
-
-      this.chart.setOption(option);
-    },
-
-    // 绘制无数据图表
-    drawNoDataChart() {
-      if (!this.chart) return;
-
-      // 先清除原有图表内容
-      this.chart.clear();
-
-      const option = {
-        graphic: {
-          elements: [
-            {
-              type: 'text',
-              left: 'center',
-              top: 'center',
-              style: {
-                text: '暂无数据',
-                fontSize: 16,
-                fontWeight: 'bold',
-                fill: '#999'
-              }
-            }
-          ]
-        },
-        xAxis: {
-          type: 'category',
-          data: []
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: []
-      };
-
-      this.chart.setOption(option);
-    },
-
-    // 绘制错误图表
-    drawErrorChart() {
-      if (!this.chart) return;
-
-      const option = {
-        graphic: {
-          elements: [
-            {
-              type: 'text',
-              left: 'center',
-              top: 'center',
-              style: {
-                text: '数据加载失败',
-                fontSize: 16,
-                fontWeight: 'bold',
-                fill: '#f56c6c'
-              }
-            }
-          ]
-        },
-        xAxis: {
-          type: 'category',
-          data: []
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: []
-      };
-
-      this.chart.setOption(option);
-    },
-
-    // 处理参数变更
-    handleParamChange() {
-      // 清空现有数据
-      this.chartData = [];
-      this.timeStamps = [];
-      this.originalTimeStamps = [];
-      this.originalChartData = [];
-
-      // 重新获取数据
-      if (this.enCoilID) {
-        this.fetchChartData();
-      }
-    },
-
-    // 获取参数标签
-    getParamLabel() {
-      const param = this.paramFields.find(item => item.value === this.paramField);
-      return param ? param.label : this.paramField;
-    },
-
-    // 获取参数单位
-    getParamUnit() {
-      // 根据不同参数返回不同单位
-      switch (this.paramField) {
-        case 'stripSpeed':
-          return 'm/s';
-        case 'tensionPorBr1':
-        case 'tensionPorBr2':
-          return 'N';
-        case 'cleaningVoltage':
-          return 'V';
-        case 'cleaningCurrent':
-          return 'A';
-        case 'alkaliConcentration':
-          return '%';
-        case 'alkaliTemperature':
-        case 'phfExitStripTemp':
-        case 'rtfExitStripTemp':
-        case 'jcsExitStripTemp':
-        case 'scsExitStripTemp':
-        case 'potTemperature':
-        case 'coolingTowerStripTemp':
-          return '°C';
-        case 'zincPotPower':
-          return 'kW';
-        case 'gasConsumption':
-          return 'm³/h';
-        case 'tensionBr5Tm':
-        case 'tensionTlBr7':
-          return 'N';
-        case 'stripSpeedTmExit':
-          return 'm/s';
-        case 'tlElongation':
-          return '%';
-        default:
-          return '';
-      }
+      // 更新勾选列表和数量
+      this.checkedNodes = this.$refs.paramTree.getCheckedNodes();
+      this.checkedCount = this.checkedNodes.length;
     }
   }
 }
@@ -507,29 +125,66 @@ export default {
   box-sizing: border-box;
 }
 
-.chart-wrapper {
-  position: relative;
+.charts-container {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
 }
 
-.param-select {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
-  width: 150px;
+/* 1个勾选：占满所有空间 */
+.count-1 {
+  display: flex;
+  flex-direction: column;
 
-  ::v-deep .el-input__inner {
-    border-color: #d4d4d4;
+  .preset-chart-item {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
   }
 }
 
-.chart-content {
+/* 2个勾选：纵向排布，横向占满，上下各50% */
+.count-2 {
+  display: flex;
+  flex-direction: column;
+  gap: 10px; /* 上下图表间距 */
+
+  .preset-chart-item {
+    width: 100%;
+    height: calc(50% - 5px); /* 减去间距的一半，保证总高度100% */
+    box-sizing: border-box;
+  }
+}
+
+/* 3个/4个勾选：2*2格子布局 */
+.count-3,
+.count-4 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* 图表间距 */
+
+  .preset-chart-item {
+    width: calc(50% - 5px); /* 横向两列，减去间距的一半 */
+    height: calc(50% - 5px); /* 纵向两行，减去间距的一半 */
+    box-sizing: border-box;
+  }
+}
+
+/* 图表项容器样式 */
+.preset-chart-item {
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* 无勾选提示 */
+.no-param-tip {
   width: 100%;
-  flex: 1;
-  min-height: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #999;
 }
 </style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/index.vue b/apps/l2/src/views/l2/pdo/index.vue
index f7aad9b..6755c22 100644
--- a/apps/l2/src/views/l2/pdo/index.vue
+++ b/apps/l2/src/views/l2/pdo/index.vue
@@ -1,221 +1,189 @@
 <template>
   <div class="pdo-container">
-    <!-- 查询表单区域 -->
+    <!-- Query form area / 查询表单区域 -->
     <div class="pdo-header">
       <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px" size="small">
-        <el-form-item :label="$t('pdo.coilid')" prop="coilid">
-          <el-input v-model="queryForm.coilid" :placeholder="$t('pdo.pleaseInputCoilid')"></el-input>
+        <el-form-item label="Coil ID" prop="coilid">
+          <!-- 钢卷号 -->
+          <el-input v-model="queryForm.coilid" placeholder="Please enter coil ID"></el-input>
+          <!-- 请输入钢卷号 -->
         </el-form-item>
-        <el-form-item :label="$t('pdo.startDate')" prop="startDate">
-          <el-date-picker v-model="queryForm.startDate" type="date" :placeholder="$t('pdo.chooseStartDate')" value-format="yyyy-MM-dd"
-            clearable></el-date-picker>
+        <el-form-item label="Start Date" prop="startDate">
+          <!-- 开始日期 -->
+          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="Select start date"
+            value-format="yyyy-MM-dd" clearable></el-date-picker>
+          <!-- 选择开始日期 -->
         </el-form-item>
-        <el-form-item :label="$t('pdo.endDate')" prop="endDate">
-          <el-date-picker v-model="queryForm.endDate" type="date" :placeholder="$t('pdo.chooseEndDate')" value-format="yyyy-MM-dd"
-            clearable></el-date-picker>
+        <el-form-item label="End Date" prop="endDate">
+          <!-- 结束日期 -->
+          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="Select end date"
+            value-format="yyyy-MM-dd" clearable></el-date-picker>
+          <!-- 选择结束日期 -->
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">{{ $t('pdo.query') }}</el-button>
-          <el-button @click="handleReset" icon="el-icon-refresh">{{ $t('pdo.reset') }}</el-button>
-          <el-button type="success" @click="handleAdd" icon="el-icon-plus">{{ $t('pdo.add') }}</el-button>
+          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">Query</el-button>
+          <!-- 查询 -->
+          <el-button @click="handleReset" icon="el-icon-refresh">Reset</el-button>
+          <!-- 重置 -->
+          <el-button type="success" @click="handleAdd" icon="el-icon-plus">Add Record</el-button>
+
+          <span v-if="currentRow.exitMatId" style="margin-left: 10px; border: 1px solid #d4d4d4; border-radius: 2px; padding: 5px;">
+            <el-button size="mini" type="text" icon="el-icon-view"
+              @click.stop="handlePrint(currentRow)">Print</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(currentRow)">Edit</el-button>
+
+            <el-button size="mini" type="text" icon="el-icon-document"
+              @click.stop="handleQualityCertificate(currentRow)">Quality Certificate</el-button>
+
+            <el-button size="mini" type="text" icon="el-icon-delete" :loading="currentRow.deleteLoading"
+              @click.stop="handleDelete(currentRow)">Delete</el-button>
+          </span>
+          <!-- 补录 -->
         </el-form-item>
       </el-form>
     </div>
 
-    <!-- 卡片网格布局 -->
-    <div v-loading="tableLoading" class="card-grid-container">
-      <el-row :gutter="10">
-        <el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
-          class="card-col">
-          <el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
-            :class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
-            <div slot="header" class="card-header">
-              <div class="card-title">{{ $t('pdo.finishedCoil') }}: {{ item.exitMatId || '-' }}</div>
-              <div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
-            </div>
-            <div class="card-body">
-              <div class="param-groups-row">
-                <!-- 基本信息 -->
-                <div class="param-group">
-                  <div class="group-title">{{ $t('pdo.basicInfo') }}</div>
-                  <div class="param-list">
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.status') }}:</span>
-                      <span class="param-value">{{ item.status || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.steelGrade') }}:</span>
-                      <span class="param-value">{{ item.steelGrade || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.productType') }}:</span>
-                      <span class="param-value">{{ item.prodCode || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.customer') }}:</span>
-                      <span class="param-value">{{ item.customer || '-' }}</span>
-                    </div>
-                  </div>
-                </div>
+    <!-- Card grid layout / 卡片网格布局 -->
+    <div v-loading="tableLoading">
+      <el-table :data="tableData" style="width: 100%" border stripe @row-click="handleRowClick" highlight-current-row height="300px">
+        <el-table-column prop="exitMatId" label="exitMat"></el-table-column>
+        <el-table-column prop="entryMatId" label="entryMat"></el-table-column>
+        <el-table-column prop="planNo" label="PlanNo"></el-table-column>
 
-                <!-- 来料信息 -->
-                <div class="param-group">
-                  <div class="group-title">{{ $t('pdo.materialInfo') }}</div>
-                  <div class="param-list">
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.thickness') }}:</span>
-                      <span class="param-value">{{ item.entryThick || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.width') }}:</span>
-                      <span class="param-value">{{ item.entryWidth || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.length') }}:</span>
-                      <span class="param-value">{{ item.entryLength || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.weight') }}:</span>
-                      <span class="param-value">{{ item.entryWeight || '-' }}</span>
-                    </div>
-                  </div>
-                </div>
+        <el-table-column prop="status" label="Status"></el-table-column>
+        <el-table-column prop="steelGrade" label="SteelGrade"></el-table-column>
+        <el-table-column prop="prodCode" label="ProductType"></el-table-column>
+        <el-table-column prop="customer" label="Customer"></el-table-column>
 
-                <!-- 成品信息 -->
-                <div class="param-group">
-                  <div class="group-title">{{ $t('pdo.productInfo') }}</div>
-                  <div class="param-list">
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.thickness') }}:</span>
-                      <span class="param-value">{{ item.exitThickness || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.width') }}:</span>
-                      <span class="param-value">{{ item.exitWidth || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.length') }}:</span>
-                      <span class="param-value">{{ item.exitLength || '-' }}</span>
-                    </div>
-                    <div class="param-line">
-                      <span class="param-label">{{ $t('pdo.weight') }}:</span>
-                      <span class="param-value">{{ item.exitNetWeight || '-' }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="card-footer">
-              <el-button size="mini" type="text" icon="el-icon-view" @click.stop="handlePrint(item)">{{ $t('pdo.print') }}</el-button>
-              <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">{{ $t('pdo.operate') }}</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
-                @click.stop="handleDelete(item)">{{ $t('pdo.delete') }}</el-button>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
+        <el-table-column prop="entryThick" label="EntryThickness"></el-table-column>
+        <el-table-column prop="entryWidth" label="EntryWidth"></el-table-column>
+        <el-table-column prop="entryLength" label="EntryLength"></el-table-column>
+        <el-table-column prop="entryWeight" label="EntryWeight"></el-table-column>
+
+        <el-table-column prop="exitThickness" label="ExitThickness"></el-table-column>
+        <el-table-column prop="exitWidth" label="ExitWidth"></el-table-column>
+        <el-table-column prop="exitLength" label="ExitLength"></el-table-column>
+        <el-table-column prop="exitNetWeight" label="ExitNetWeight"></el-table-column>
+
+        <!-- <el-table-column label="Operation">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-view"
+              @click.stop="handlePrint(scope.row)">Print</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(scope.row)">Edit</el-button>
+
+            <el-button size="mini" type="text" icon="el-icon-document"
+              @click.stop="handleQualityCertificate(scope.row)">Quality Certificate</el-button>
+
+            <el-button size="mini" type="text" icon="el-icon-delete" :loading="scope.row.deleteLoading"
+              @click.stop="handleDelete(scope.row)">Delete</el-button>
+          </template>
+        </el-table-column> -->
+      </el-table>
       <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
-        <el-empty :description="$t('pdo.noData')"></el-empty>
+        <el-empty description="No data"></el-empty>
+        <!-- 暂无数据 -->
       </div>
     </div>
 
-    <!-- 统计汇总和图表区域 -->
+    <div>
+      <pdo-summary :table-data="tableData" />
+    </div>
+    
+
+    <!-- Statistics summary and chart area / 统计汇总和图表区域 -->
     <div class="statistics-container">
       <div class="statistics-header">
         <div class="selected-info" v-if="currentRow && currentRow.entryMatId">
           <i class="el-icon-check"></i>
-          <span class="selected-label">{{ $t('pdo.selected') }}</span>
-          <span class="selected-value">{{ $t('pdo.finishedCoil') }} {{ currentRow.exitMatId }}</span>
-          <span class="selected-detail" v-if="currentRow.entryMatId">({{ $t('pdo.entryMatId') }}: {{ currentRow.entryMatId }})</span>
+          <span class="selected-label">Selected:</span>
+          <!-- 已选中 -->
+          <span class="selected-value">Finished Coil {{ currentRow.exitMatId }}</span>
+          <!-- 成品卷 -->
+          <span class="selected-detail" v-if="currentRow.entryMatId">(Entry Coil: {{ currentRow.entryMatId }})</span>
+          <!-- 来料卷 -->
         </div>
         <div class="selected-info empty" v-else>
           <i class="el-icon-info"></i>
-          <span>{{ $t('pdo.pleaseSelect') }}</span>
+          <span>Please select a card above to view details</span>
+          <!-- 请选择上方卡片查看详情 -->
         </div>
       </div>
       <el-row :gutter="15" class="statistics-content">
-        <el-col :span="4" class="summary-col">
-          <div class="summary-wrapper">
-            <div class="summary-header">{{ $t('pdo.statisticsSummary') }}</div>
-            <pdo-summary :table-data="tableData" />
-          </div>
-        </el-col>
-        <el-col :span="20" class="chart-col">
-          <div class="chart-wrapper">
-            <line-chart :enCoilID="currentRow.entryMatId" />
-          </div>
-        </el-col>
+        <div class="chart-wrapper">
+          <line-chart :enCoilID="currentRow.entryMatId" />
+        </div>
       </el-row>
     </div>
 
-    <!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
+    <!-- Edit/Add dialog: render content based on isAdd condition / 编辑/新增弹窗：根据isAdd条件渲染内容 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
-      <!-- 补录（新增）：仅显示数据修正组件，无tab -->
+      <!-- Add record (new): only show data correction component, no tab / 补录（新增）：仅显示数据修正组件，无tab -->
       <div v-if="isAdd">
         <pdo-data-correction :detail="formData" :save-callback="handleSave"
           :save-loading="saveLoading"></pdo-data-correction>
       </div>
-
-      <!-- 编辑：保留原有tab，显示数据修正+标签打印 -->
-      <!-- <el-tabs v-else v-model="activeTab"> -->
-        <!-- <el-tab-pane label="数据修正" name="basicInfo"> -->
-          <pdo-data-correction :detail="formData" :save-callback="handleSave"
-            :save-loading="saveLoading"></pdo-data-correction>
-        <!-- </el-tab-pane> -->
-        <!-- <el-tab-pane label="标签打印" name="labelPrint"> -->
-          
-        <!-- </el-tab-pane>
-      </el-tabs> -->
+      <!-- 数据修正 -->
+      <pdo-data-correction :detail="formData" :save-callback="handleSave"
+        :save-loading="saveLoading"></pdo-data-correction>
     </el-dialog>
 
-    <el-dialog :title="$t('pdo.labelPrint')" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
+    <el-dialog title="Label Print" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
+      <!-- 标签打印 -->
       <div style="display: flex; justify-content: center; align-items: center;">
         <pdo-label-print :detail="formData"></pdo-label-print>
       </div>
     </el-dialog>
+
+    <el-dialog title="Quality Certificate" :visible.sync="certificateVisible" width="90%" :close-on-click-modal="false">
+      <!-- 质保书（单卷） -->
+      <quality-certificate :detail="formData"></quality-certificate>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getPdoList, addPdo, updatePdo, deletePdo } from '@/api/l2/pdo'
 import LineChart from './components/line.vue'
-// 引入封装的两个组件
+// Import two encapsulated components / 引入封装的两个组件
 import PdoDataCorrection from './components/DataCorrection.vue'
 import PdoLabelPrint from './components/LabelPrint.vue'
 import PdoSummary from './components/PdoSummary.vue'
+import QualityCertificate from './components/QualityCertificate.vue'
 
 export default {
   name: 'PdoManagement',
   dicts: ['pdo_plan_origin'],
   components: {
     LineChart,
-    PdoDataCorrection, // 注册数据修正组件
-    PdoLabelPrint,      // 注册标签打印组件
-    PdoSummary
+    PdoDataCorrection, // Register data correction component / 注册数据修正组件
+    PdoLabelPrint,      // Register label print component / 注册标签打印组件
+    PdoSummary,
+    QualityCertificate  // Register quality certificate component / 注册质保书组件
   },
   data() {
     return {
       activeTab: 'basicInfo',
       queryForm: { coilid: '', startDate: '', endDate: '' },
       printOpen: false,
+      certificateVisible: false, // Quality certificate dialog visibility / 质保书对话框显示状态
       tableData: [],
       tableLoading: false,
       btnLoading: false,
       dialogVisible: false,
-      dialogTitle: '',
-      // 新增：区分「补录（新增）」和「编辑」的状态标识
+      dialogTitle: 'Add Performance', // 新增实绩
+      // New: status flag to distinguish "Add Record (New)" and "Edit" / 新增：区分「补录（新增）」和「编辑」的状态标识
       isAdd: false,
-      // 传递给子组件的详情数据（父组件仅做数据中转，不直接修改）
+      // Detail data passed to child component (parent component only does data transfer, does not directly modify) / 传递给子组件的详情数据（父组件仅做数据中转，不直接修改）
       formData: {},
       saveLoading: false,
       currentRow: {},
       socketType: [
-        { value: 'alarm', label: '报警' },
-        { value: 'track_position', label: '跟踪位置' },
-        { value: 'track_measure', label: '跟踪测量' },
-        { value: 'track_signal', label: '跟踪信号' },
-        { value: 'track_matmap', label: '跟踪料号' },
-        { value: 'calc_setup_result', label: '计算结果' }
+        { value: 'alarm', label: 'Alarm' }, // 报警
+        { value: 'track_position', label: 'Track Position' }, // 跟踪位置
+        { value: 'track_measure', label: 'Track Measure' }, // 跟踪测量
+        { value: 'track_signal', label: 'Track Signal' }, // 跟踪信号
+        { value: 'track_matmap', label: 'Track Material ID' }, // 跟踪料号
+        { value: 'calc_setup_result', label: 'Calculation Result' } // 计算结果
       ]
     }
   },
@@ -223,43 +191,43 @@ export default {
     this.getPdoList()
   },
   methods: {
-    // 获取列表数据（保持不变）
+    // Get list data (unchanged) / 获取列表数据（保持不变）
     getPdoList() {
       this.tableLoading = true
       getPdoList(this.queryForm).then(res => {
         this.tableData = res.data.map(item => ({ ...item, deleteLoading: false }))
       }).catch(err => {
         console.error(err)
-        this.$message.error(this.$t('pdo.getDataFailed'))
+        this.$message.error('Failed to fetch data') // 获取数据失败
       }).finally(() => {
         this.tableLoading = false
         this.btnLoading = false
       })
     },
-    // 查询（保持不变）
+    // Query (unchanged) / 查询（保持不变）
     handleQuery() {
       this.btnLoading = true;
       this.getPdoList()
     },
-    // 重置（保持不变）
+    // Reset (unchanged) / 重置（保持不变）
     handleReset() {
       this.$refs.queryForm.resetFields();
       this.getPdoList()
     },
-    // 行点击（保持不变）
+    // Row click (unchanged) / 行点击（保持不变）
     handleRowClick(row) {
       this.currentRow = row;
     },
-    // 格式化时间
+    // Format time / 格式化时间
     formatTime(time) {
       if (!time) return '-';
       return this.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
     },
-    // 补录（新增）：设置isAdd=true，初始化空表单
+    // Add record (new): set isAdd=true, initialize empty form / 补录（新增）：设置isAdd=true，初始化空表单
     handleAdd() {
-      this.isAdd = true; // 标记为「补录」
-      this.dialogTitle = this.$t('pdo.addPdo');
-      // 初始化空表单数据（传递给子组件）
+      this.isAdd = true; // Mark as "Add Record" / 标记为「补录」
+      this.dialogTitle = 'Add Performance'; // 新增实绩
+      // Initialize empty form data (passed to child component) / 初始化空表单数据（传递给子组件）
       this.formData = {
         subId: 0,
         startPosition: 0,
@@ -283,42 +251,50 @@ export default {
       };
       this.dialogVisible = true
     },
-    // 编辑：设置isAdd=false，赋值行数据
+    // Edit: set isAdd=false, assign row data / 编辑：设置isAdd=false，赋值行数据
     handleEdit(row) {
-      this.isAdd = false; // 标记为「编辑」
-      this.dialogTitle = this.$t('pdo.editPdo');
-      // 深拷贝行数据（避免直接修改表格数据）
+      this.isAdd = false; // Mark as "Edit" / 标记为「编辑」
+      this.dialogTitle = 'Edit Performance'; // 编辑实绩
+      // Deep copy row data (avoid directly modifying table data) / 深拷贝行数据（避免直接修改表格数据）
       this.formData = JSON.parse(JSON.stringify(row));
       this.dialogVisible = true
     },
     handlePrint(row) {
-      // 深拷贝行数据（避免直接修改表格数据）
+      // Deep copy row data (avoid directly modifying table data) / 深拷贝行数据（避免直接修改表格数据）
       this.formData = JSON.parse(JSON.stringify(row));
       this.printOpen = true
     },
-    // 删除（保持不变）
+    // Handle quality certificate / 处理质保书（单卷）
+    handleQualityCertificate(row) {
+      // Deep copy row data / 深拷贝行数据
+      this.formData = JSON.parse(JSON.stringify(row));
+      // 单卷质保书：只显示当前成品卷
+      this.certificateVisible = true;
+    },
+    // Delete (unchanged) / 删除（保持不变）
     handleDelete(row) {
-      this.$confirm(`${this.$t('common.confirm')}${this.$t('pdo.delete')}${this.$t('pdo.finishedCoil')} ${row.exitMatId}?`, this.$t('pdo.confirmDelete'), { type: 'danger' }).then(() => {
+      this.$confirm(`Are you sure to delete finished coil ${row.exitMatId}?`, 'Confirm Delete', { type: 'danger' }).then(() => {
+        // 确定删除成品卷 / 确认删除
         row.deleteLoading = true
         deletePdo(row.exitMatId, row.planId).then(res => {
           if (res.code === 200) {
-            this.$message.success(this.$t('pdo.deleteSuccess'));
+            this.$message.success('Delete successful'); // 删除成功
             this.getPdoList()
-          } else this.$message.error(res.msg || this.$t('pdo.deleteFailed'))
+          } else this.$message.error(res.msg || 'Delete failed') // 删除失败
         }).finally(() => row.deleteLoading = false)
       })
     },
-    // 保存回调（子组件触发，处理实际API调用）
+    // Save callback (triggered by child component, handles actual API call) / 保存回调（子组件触发，处理实际API调用）
     handleSave(formData) {
       this.saveLoading = true
-      // 根据是否有id判断是新增还是编辑
+      // Determine if it's add or edit based on whether id exists / 根据是否有id判断是新增还是编辑
       const request = formData.id ? updatePdo(formData) : addPdo(formData)
       request.then(res => {
         if (res.code === 200) {
-          this.$message.success(this.$t('pdo.saveSuccess'));
+          this.$message.success('Save successful'); // 保存成功
           this.dialogVisible = false;
-          this.getPdoList() // 刷新列表
-        } else this.$message.error(res.msg || this.$t('pdo.saveFailed'))
+          this.getPdoList() // Refresh list / 刷新列表
+        } else this.$message.error(res.msg || 'Save failed') // 保存失败
       }).finally(() => {
         this.saveLoading = false
       })
@@ -329,7 +305,7 @@ export default {
 
 <style lang="scss" scoped>
 .pdo-container {
-  height: calc(100vh - 84px);
+  // height: calc(100vh - 84px);
   display: flex;
   flex-direction: column;
   padding: 15px;
@@ -338,16 +314,13 @@ export default {
 }
 
 .pdo-header {
-  background: #ffffff;
-  border: 1px solid #d4d4d4;
   border-radius: 2px;
-  padding: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
   flex-shrink: 0;
 }
 
 .card-grid-container {
-  flex: 1;
+  flex: 3;
   min-height: 0;
   overflow-y: auto;
   padding-right: 5px;
@@ -490,14 +463,14 @@ export default {
 }
 
 .statistics-container {
-  flex: 0 0 auto;
+  flex: 1 0 auto;
   background: #ffffff;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
   padding: 0;
   display: flex;
   flex-direction: column;
-  height: 280px;
+  // min-height: 400px;
 }
 
 .statistics-header {
@@ -546,7 +519,7 @@ export default {
 }
 
 .statistics-content {
-  flex: 1;
+  flex: 5;
   min-height: 0;
   padding: 12px 15px;
 }
diff --git a/apps/l2/src/views/l2/plan/components/PlanRecommendPanel.vue b/apps/l2/src/views/l2/plan/components/PlanRecommendPanel.vue
index da78ba6..93c2863 100644
--- a/apps/l2/src/views/l2/plan/components/PlanRecommendPanel.vue
+++ b/apps/l2/src/views/l2/plan/components/PlanRecommendPanel.vue
@@ -3,8 +3,10 @@
     <div class="recommend-section steel-panel">
       <div class="section-header">
         <div>
-          <div class="section-title">钢种推荐</div>
-          <div class="section-subtitle">锁定钢种后自动调取面板库中的典型工艺主数据</div>
+          <div class="section-title">Steel Grade Recommendation</div>
+          <!-- 钢种推荐 -->
+          <div class="section-subtitle">After locking steel grade, automatically retrieve typical process master data from panel library</div>
+          <!-- 锁定钢种后自动调取面板库中的典型工艺主数据 -->
         </div>
         <el-tag v-if="steelGradeName" size="mini" effect="dark">{{ steelGradeName }}</el-tag>
       </div>
@@ -19,34 +21,41 @@
             >
               <div class="card-header">
                 <div class="card-title">
-                  {{ item.steelGradeLabel || '钢种' }}
+                  {{ item.steelGradeLabel || 'Steel Grade' }}
+                  <!-- 钢种 -->
                 </div>
                 <el-tag size="mini" type="info">
-                  厚度 {{ formatNumber(item.entryThick) }} mm
+                  Thickness {{ formatNumber(item.entryThick) }} mm
+                  <!-- 厚度 -->
                 </el-tag>
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">屈服点</span>
+                  <span class="label">Yield Point</span>
+                  <!-- 屈服点 -->
                   <span class="value">{{ formatNumber(item.yieldPoint) }}</span>
                 </div>
                 <div>
-                  <span class="label">延伸率</span>
+                  <span class="label">Elongation</span>
+                  <!-- 延伸率 -->
                   <span class="value">{{ formatNumber(item.spmElongation) }}</span>
                 </div>
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">轧制力</span>
+                  <span class="label">Roll Force</span>
+                  <!-- 轧制力 -->
                   <span class="value">{{ formatNumber(item.spmRollforce) }}</span>
                 </div>
                 <div>
-                  <span class="label">更新时间</span>
+                  <span class="label">Update Time</span>
+                  <!-- 更新时间 -->
                   <span class="value">{{ formatDate(item.updateTime) }}</span>
                 </div>
               </div>
               <div class="card-footer">
-                <span>点击写入钢种及主键</span>
+                <span>Click to write steel grade and primary key</span>
+                <!-- 点击写入钢种及主键 -->
                 <i class="el-icon-top-right" />
               </div>
             </div>
@@ -54,17 +63,20 @@
         </template>
         <el-empty
           v-else
-          description="选择钢种后即可联动查询"
+          description="Select steel grade to enable linked query"
           :image-size="100"
         />
+        <!-- 选择钢种后即可联动查询 -->
       </div>
     </div>
 
     <div class="recommend-section thickness-panel">
       <div class="section-header">
         <div>
-          <div class="section-title">厚度 / 屈服点联动</div>
-          <div class="section-subtitle">输入厚度后，自动搜集多面板库对应的屈服点档案</div>
+          <div class="section-title">Thickness / Yield Point Linkage</div>
+          <!-- 厚度 / 屈服点联动 -->
+          <div class="section-subtitle">After entering thickness, automatically collect corresponding yield point records from multiple panel libraries</div>
+          <!-- 输入厚度后，自动搜集多面板库对应的屈服点档案 -->
         </div>
         <el-tag v-if="entryThick" size="mini" effect="plain">{{ formatNumber(entryThick) }} mm</el-tag>
       </div>
@@ -82,21 +94,25 @@
                   {{ formatNumber(item.entryThick) }} mm
                 </div>
                 <el-tag size="mini" type="success">
-                  屈服点 {{ formatNumber(item.yieldPoint) }}
+                  Yield Point {{ formatNumber(item.yieldPoint) }}
+                  <!-- 屈服点 -->
                 </el-tag>
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">钢种</span>
+                  <span class="label">Steel Grade</span>
+                  <!-- 钢种 -->
                   <span class="value">{{ item.steelGradeLabel || '-' }}</span>
                 </div>
                 <div>
-                  <span class="label">数据来源</span>
+                  <span class="label">Data Source</span>
+                  <!-- 数据来源 -->
                   <span class="value">{{ item.sourceLabel }}</span>
                 </div>
               </div>
               <div class="card-footer">
-                <span>{{ item.updateTime ? '最近更新 ' + formatDate(item.updateTime) : '点击写入厚度/屈服点' }}</span>
+                <span>{{ item.updateTime ? 'Recently updated ' + formatDate(item.updateTime) : 'Click to write thickness/yield point' }}</span>
+                <!-- 最近更新 / 点击写入厚度/屈服点 -->
                 <i class="el-icon-top-right" />
               </div>
             </div>
@@ -104,17 +120,20 @@
         </template>
         <el-empty
           v-else
-          description="填写厚度后可获取推荐屈服点"
+          description="Fill in thickness to get recommended yield point"
           :image-size="100"
         />
+        <!-- 填写厚度后可获取推荐屈服点 -->
       </div>
     </div>
 
     <div class="recommend-section width-panel">
       <div class="section-header">
         <div>
-          <div class="section-title">宽度 / 弯辊联动</div>
-          <div class="section-subtitle">根据宽度 & 轧制力，匹配弯辊力与宽度组合</div>
+          <div class="section-title">Width / Bending Force Linkage</div>
+          <!-- 宽度 / 弯辊联动 -->
+          <div class="section-subtitle">Match bending force and width combination based on width & roll force</div>
+          <!-- 根据宽度 & 轧制力，匹配弯辊力与宽度组合 -->
         </div>
         <el-tag v-if="entryWidth" size="mini" type="info">{{ formatNumber(entryWidth) }} mm</el-tag>
       </div>
@@ -129,20 +148,24 @@
             >
               <div class="card-header">
                 <div class="card-title">{{ formatNumber(item.width) }} mm</div>
-                <el-tag size="mini" effect="plain">轧制力 {{ formatNumber(item.rollForce) }}</el-tag>
+                <el-tag size="mini" effect="plain">Roll Force {{ formatNumber(item.rollForce) }}</el-tag>
+                <!-- 轧制力 -->
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">弯辊力</span>
+                  <span class="label">Bending Force</span>
+                  <!-- 弯辊力 -->
                   <span class="value">{{ formatNumber(item.bendForce) }}</span>
                 </div>
                 <div>
-                  <span class="label">数据来源</span>
+                  <span class="label">Data Source</span>
+                  <!-- 数据来源 -->
                   <span class="value">{{ item.sourceLabel }}</span>
                 </div>
               </div>
               <div class="card-footer">
-                <span>点击写入宽度 / 轧制力</span>
+                <span>Click to write width / roll force</span>
+                <!-- 点击写入宽度 / 轧制力 -->
                 <i class="el-icon-top-right" />
               </div>
             </div>
@@ -150,17 +173,20 @@
         </template>
         <el-empty
           v-else
-          description="填写宽度后可获取推荐"
+          description="Fill in width to get recommendations"
           :image-size="100"
         />
+        <!-- 填写宽度后可获取推荐 -->
       </div>
     </div>
 
     <div class="recommend-section rollforce-panel">
       <div class="section-header">
         <div>
-          <div class="section-title">轧制力反查</div>
-          <div class="section-subtitle">输入轧制力后，反查对应厚度 / 屈服点组合</div>
+          <div class="section-title">Roll Force Reverse Lookup</div>
+          <!-- 轧制力反查 -->
+          <div class="section-subtitle">After entering roll force, reverse lookup corresponding thickness / yield point combination</div>
+          <!-- 输入轧制力后，反查对应厚度 / 屈服点组合 -->
         </div>
         <el-tag v-if="spmRollforce" size="mini" type="warning">{{ formatNumber(spmRollforce) }}</el-tag>
       </div>
@@ -179,26 +205,31 @@
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">厚度</span>
+                  <span class="label">Thickness</span>
+                  <!-- 厚度 -->
                   <span class="value">{{ formatNumber(item.entryThick) }} mm</span>
                 </div>
                 <div>
-                  <span class="label">屈服点</span>
+                  <span class="label">Yield Point</span>
+                  <!-- 屈服点 -->
                   <span class="value">{{ formatNumber(item.yieldPoint) }}</span>
                 </div>
               </div>
               <div class="card-meta">
                 <div>
-                  <span class="label">延伸率</span>
+                  <span class="label">Elongation</span>
+                  <!-- 延伸率 -->
                   <span class="value">{{ formatNumber(item.spmElongation) }}</span>
                 </div>
                 <div>
-                  <span class="label">钢种</span>
+                  <span class="label">Steel Grade</span>
+                  <!-- 钢种 -->
                   <span class="value">{{ item.steelGradeLabel || '-' }}</span>
                 </div>
               </div>
               <div class="card-footer">
-                <span>点击写入相关字段</span>
+                <span>Click to write related fields</span>
+                <!-- 点击写入相关字段 -->
                 <i class="el-icon-top-right" />
               </div>
             </div>
@@ -206,9 +237,10 @@
         </template>
         <el-empty
           v-else
-          description="填写轧制力后可获取推荐"
+          description="Fill in roll force to get recommendations"
           :image-size="100"
         />
+        <!-- 填写轧制力后可获取推荐 -->
       </div>
     </div>
   </div>
@@ -361,7 +393,7 @@ export default {
         this.steelRecommendations = rows.map(row => this.mapRollforceRow(row))
       } catch (error) {
         console.error('fetchSteelRecommendations error:', error)
-        this.$message?.error('钢种推荐获取失败，请稍后重试')
+        this.$message?.error('Failed to get steel grade recommendation, please retry later') // 钢种推荐获取失败，请稍后重试
         this.steelRecommendations = []
       } finally {
         if (token === this.steelFetchToken) {
@@ -391,7 +423,7 @@ export default {
         const records = []
         if (rollforceRes.status === 'fulfilled') {
           const rows = Array.isArray(rollforceRes.value.rows) ? rollforceRes.value.rows : []
-          records.push(...rows.map(row => this.mapRollforceRow(row, '光整机轧制力')))
+          records.push(...rows.map(row => this.mapRollforceRow(row, 'TM Roll Force'))) // 光整机轧制力
         }
         if (tensionRes.status === 'fulfilled') {
           const rows = Array.isArray(tensionRes.value.rows) ? tensionRes.value.rows : []
@@ -400,7 +432,7 @@ export default {
         this.thicknessRecommendations = this.uniqueRecords(records).slice(0, 8)
       } catch (error) {
         console.error('fetchThicknessRecommendations error:', error)
-        this.$message?.error('厚度推荐获取失败，请稍后重试')
+        this.$message?.error('Failed to get thickness recommendation, please retry later') // 厚度推荐获取失败，请稍后重试
         this.thicknessRecommendations = []
       } finally {
         if (token === this.thicknessFetchToken) {
@@ -434,7 +466,7 @@ export default {
         this.widthRecommendations = matches.slice(0, 6)
       } catch (error) {
         console.error('fetchWidthRecommendations error:', error)
-        this.$message?.error('宽度推荐获取失败，请稍后重试')
+        this.$message?.error('Failed to get width recommendation, please retry later') // 宽度推荐获取失败，请稍后重试
         this.widthRecommendations = []
       } finally {
         if (token === this.widthFetchToken) {
@@ -468,7 +500,7 @@ export default {
         this.rollforceFocusRecommendations = matches.slice(0, 6)
       } catch (error) {
         console.error('fetchRollforceFocus error:', error)
-        this.$message?.error('轧制力推荐获取失败，请稍后重试')
+        this.$message?.error('Failed to get roll force recommendation, please retry later') // 轧制力推荐获取失败，请稍后重试
         this.rollforceFocusRecommendations = []
       } finally {
         if (token === this.rollforceFetchToken) {
@@ -476,7 +508,7 @@ export default {
         }
       }
     },
-    mapRollforceRow(row, sourceLabel = '光整机轧制力') {
+    mapRollforceRow(row, sourceLabel = 'TM Roll Force') { // 光整机轧制力
       const gradeLabel =
         row.steelGradeName ||
         row.steelGradeLabel ||
@@ -496,7 +528,7 @@ export default {
     },
     mapRollforceByValueRow(row) {
       return {
-        ...this.mapRollforceRow(row, '轧制力面板'),
+        ...this.mapRollforceRow(row, 'Roll Force Panel'), // 轧制力面板
         _id: `rollforce-focus-${row.id || createId()}`,
         spmRollforce: row.value1
       }
@@ -505,7 +537,7 @@ export default {
       const gradeLabel = row.steelGradeName || this.getSteelGradeLabel(row.steelGrade) || row.steelGrade
       return {
         _id: `tension-${row.id || createId()}`,
-        sourceLabel: '全线张力',
+        sourceLabel: 'Full Line Tension', // 全线张力
         steelGrade: row.steelGrade,
         steelGradeLabel: gradeLabel || '',
         entryThick: row.thick,
@@ -518,7 +550,7 @@ export default {
     mapBendforceRow(row) {
       return {
         _id: `bendforce-${row.id || createId()}`,
-        sourceLabel: '弯辊力面板',
+        sourceLabel: 'Bending Force Panel', // 弯辊力面板
         width: row.width,
         rollForce: row.rollForce,
         bendForce: row.value1,
diff --git a/apps/l2/src/views/l2/plan/components/ProcessRecommendPanel.vue b/apps/l2/src/views/l2/plan/components/ProcessRecommendPanel.vue
index 418bb86..1121401 100644
--- a/apps/l2/src/views/l2/plan/components/ProcessRecommendPanel.vue
+++ b/apps/l2/src/views/l2/plan/components/ProcessRecommendPanel.vue
@@ -3,15 +3,19 @@
     <el-card shadow="never">
       <div class="recommend-header">
         <div>
-          <div class="title">推荐工艺参数</div>
-          <div class="subtitle">点击即可填入左侧表单，一行展示更多字段</div>
+          <div class="title">Recommended Process Parameters</div>
+          <!-- 推荐工艺参数 -->
+          <div class="subtitle">Click to fill in the left form, one row displays more fields</div>
+          <!-- 点击即可填入左侧表单，一行展示更多字段 -->
         </div>
         <el-button type="text" icon="el-icon-finished" :disabled="!hasRecommendation" @click="$emit('apply-all')">
-          全部套用
+          Apply All
         </el-button>
+        <!-- 全部套用 -->
       </div>
       <div v-if="!hasRecommendation" class="empty-state">
-        <el-empty description="暂无推荐数据，先补齐基础信息" :image-size="90" />
+        <el-empty description="No recommendation data, please complete basic information first" :image-size="90" />
+        <!-- 暂无推荐数据，先补齐基础信息 -->
       </div>
       <div v-else class="group-list">
         <div class="group" v-for="group in parameterGroups" :key="group.title">
diff --git a/apps/l2/src/views/l2/plan/components/setupForm.vue b/apps/l2/src/views/l2/plan/components/setupForm.vue
index 4737f9f..0c6c99d 100644
--- a/apps/l2/src/views/l2/plan/components/setupForm.vue
+++ b/apps/l2/src/views/l2/plan/components/setupForm.vue
@@ -4,11 +4,13 @@
       <el-alert
         type="info"
         :closable="false"
-        title="工艺参数生成提示"
+        title="Process Parameter Generation Hint"
+        <!-- 工艺参数生成提示 -->
       >
         <div class="hint-text">
-          请先补齐以下基础信息，系统才可以自动匹配推荐的工艺参数：
+          Please complete the following basic information first, then the system can automatically match recommended process parameters:
         </div>
+        <!-- 请先补齐以下基础信息，系统才可以自动匹配推荐的工艺参数： -->
         <div class="hint-tags">
           <el-tag
             v-for="label in missingFieldLabels"
@@ -26,91 +28,106 @@
         <el-form :model="form" label-width="150px" v-loading="loading">
           <el-row>
         <el-col :span="8">
-          <el-form-item label="开卷机张力">
+          <el-form-item label="Pay-off Reel Tension">
+            <!-- 开卷机张力 -->
             <el-input v-model="form.porTension" @change="syncModal" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="入口活套张力">
+          <el-form-item label="Entry Loop Tension">
+            <!-- 入口活套张力 -->
             <el-input v-model="form.celTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="清洗段张力">
+          <el-form-item label="Cleaning Section Tension">
+            <!-- 清洗段张力 -->
             <el-input v-model="form.cleanTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="炉区张力">
+          <el-form-item label="Furnace Zone Tension">
+            <!-- 炉区张力 -->
             <el-input v-model="form.furTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="冷却塔张力">
+          <el-form-item label="Cooling Tower Tension">
+            <!-- 冷却塔张力 -->
             <el-input v-model="form.towerTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机不投张力">
+          <el-form-item label="TM No Tension">
+            <!-- 光整机不投张力 -->
             <el-input v-model="form.tmNoneTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机入口张力">
+          <el-form-item label="TM Entry Tension">
+            <!-- 光整机入口张力 -->
             <el-input v-model="form.tmEntryTension" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机出口张力">
+          <el-form-item label="TM Exit Tension">
+            <!-- 光整机出口张力 -->
             <el-input v-model="form.tmExitTension" @change="syncModal" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="8">
-          <el-form-item label="光整机轧制力">
+          <el-form-item label="TM Roll Force">
+            <!-- 光整机轧制力 -->
             <el-input v-model="form.tmRollforce" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机弯辊力">
+          <el-form-item label="TM Bending Force">
+            <!-- 光整机弯辊力 -->
             <el-input v-model="form.tmBendforce" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机防皱辊插入量">
+          <el-form-item label="TM Anti-crimping Roll Mesh">
+            <!-- 光整机防皱辊插入量 -->
             <el-input v-model="form.tmAcrMesh" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="光整机防颤辊插入量">
+          <el-form-item label="TM Anti-tremor Roll Mesh">
+            <!-- 光整机防颤辊插入量 -->
             <el-input v-model="form.tmBrMesh" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="拉矫机延伸率">
+          <el-form-item label="TL Elongation">
+            <!-- 拉矫机延伸率 -->
             <el-input v-model="form.tlElong" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="拉矫机矫直辊插入量1">
+          <el-form-item label="TL Leveling Roll Mesh 1">
+            <!-- 拉矫机矫直辊插入量1 -->
             <el-input v-model="form.tlLvlMesh1" @change="syncModal" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="拉矫机矫直辊插入量2">
+          <el-form-item label="TL Leveling Roll Mesh 2">
+            <!-- 拉矫机矫直辊插入量2 -->
             <el-input v-model="form.tlLvlMesh2" @change="syncModal" />
           </el-form-item>
         </el-col>
@@ -118,19 +135,22 @@
 
       <el-row>
         <el-col :span="8">
-          <el-form-item label="炉火段预热段出口板温">
+          <el-form-item label="Furnace Preheating Section Exit Strip Temp">
+            <!-- 炉火段预热段出口板温 -->
             <el-input v-model="form.preheatingSection" @change="syncModal" />
           </el-form-item>
         </el-col>
         
         <el-col :span="8">
-          <el-form-item label="炉火段加热段出口板温">
+          <el-form-item label="Furnace Heating Section Exit Strip Temp">
+            <!-- 炉火段加热段出口板温 -->
             <el-input v-model="form.heatingSection" @change="syncModal" />
           </el-form-item>
         </el-col>
         
         <el-col :span="8">
-          <el-form-item label="炉火段冷却段出口板温">
+          <el-form-item label="Furnace Cooling Section Exit Strip Temp">
+            <!-- 炉火段冷却段出口板温 -->
             <el-input v-model="form.coolingSection" @change="syncModal" />
           </el-form-item>
         </el-col>
@@ -141,13 +161,17 @@
         <el-card class="recommend-card" shadow="never">
           <div class="recommend-header">
             <div>
-              <div class="title">推荐工艺参数</div>
-              <div class="subtitle">点击即可填入左侧表单</div>
+              <div class="title">Recommended Process Parameters</div>
+              <!-- 推荐工艺参数 -->
+              <div class="subtitle">Click to fill in the left form</div>
+              <!-- 点击即可填入左侧表单 -->
             </div>
-            <el-button type="text" @click="applyAll" :disabled="!hasRecommendation">全部套用</el-button>
+            <el-button type="text" @click="applyAll" :disabled="!hasRecommendation">Apply All</el-button>
+            <!-- 全部套用 -->
           </div>
           <div v-if="!hasRecommendation" class="empty-recommend">
-            <el-empty description="暂无推荐数据" :image-size="100"></el-empty>
+            <el-empty description="No recommendation data" :image-size="100"></el-empty>
+            <!-- 暂无推荐数据 -->
           </div>
           <div v-else class="recommend-groups">
             <div
@@ -180,12 +204,12 @@
 </template>
 
 <script>
-import { getBendforce } from '@/api/business/bendforce' // 光整机弯辊力
-import { getTension } from '@/api/business/tension'     // 全线张力
-import { getRollforce } from '@/api/business/rollforce' // 光整机轧制力
-import { getTl } from '@/api/business/tl'               // 拉矫机
-import { getMesh } from '@/api/business/mesh'           // 光整机插入量
-import { getFur } from '@/api/business/fur'             // 炉火段
+import { getBendforce } from '@/api/business/bendforce' // TM Bending Force / 光整机弯辊力
+import { getTension } from '@/api/business/tension'     // Full Line Tension / 全线张力
+import { getRollforce } from '@/api/business/rollforce' // TM Roll Force / 光整机轧制力
+import { getTl } from '@/api/business/tl'               // TL / 拉矫机
+import { getMesh } from '@/api/business/mesh'           // TM Mesh / 光整机插入量
+import { getFur } from '@/api/business/fur'             // Furnace Section / 炉火段
 import { PARAMETER_GROUPS } from './setupRecommendationConfig'
 
 const REQUIRED_FIELDS = [
@@ -198,46 +222,46 @@ const REQUIRED_FIELDS = [
 ]
 
 const FIELD_LABEL_MAP = {
-  entryThick: '入口厚度',
-  yieldPoint: '屈服点',
-  steelGrade: '钢种',
-  spmElongation: '延伸率(%)',
-  spmRollforce: 'SPM轧制力',
-  entryWidth: '入口宽度'
+  entryThick: 'Entry Thickness', // 入口厚度
+  yieldPoint: 'Yield Point', // 屈服点
+  steelGrade: 'Steel Grade', // 钢种
+  spmElongation: 'Elongation (%)', // 延伸率(%)
+  spmRollforce: 'SPM Roll Force', // SPM轧制力
+  entryWidth: 'Entry Width' // 入口宽度
 }
 
 const createDefaultForm = () => ({
-  // 全线张力
-  porTension: undefined, // 开卷机张力
-  celTension: undefined, // 入口活套张力
-  cleanTension: undefined, // 清洗段张力
-  furTension: undefined, // 炉区张力
-  towerTension: undefined, // 冷却塔张力
-  tmNoneTension: undefined, // 光整机不投张力
-  tmEntryTension: undefined, // 光整机入口张力
-  tmExitTension: undefined, // 光整机出口张力
-  tlNoneTension: undefined, // 拉矫机不投张力
-  tlExitTension: undefined, // 拉矫机出口张力
-  coatTension: undefined, // 后处理张力
-  cxlTension: undefined, // 出口活套张力
-  trTension: undefined, // 卷取机张力
+  // Full Line Tension / 全线张力
+  porTension: undefined, // Pay-off Reel Tension / 开卷机张力
+  celTension: undefined, // Entry Loop Tension / 入口活套张力
+  cleanTension: undefined, // Cleaning Section Tension / 清洗段张力
+  furTension: undefined, // Furnace Zone Tension / 炉区张力
+  towerTension: undefined, // Cooling Tower Tension / 冷却塔张力
+  tmNoneTension: undefined, // TM No Tension / 光整机不投张力
+  tmEntryTension: undefined, // TM Entry Tension / 光整机入口张力
+  tmExitTension: undefined, // TM Exit Tension / 光整机出口张力
+  tlNoneTension: undefined, // TL No Tension / 拉矫机不投张力
+  tlExitTension: undefined, // TL Exit Tension / 拉矫机出口张力
+  coatTension: undefined, // Post-treatment Tension / 后处理张力
+  cxlTension: undefined, // Exit Loop Tension / 出口活套张力
+  trTension: undefined, // Take-up Reel Tension / 卷取机张力
 
-  // 光整机
-  tmRollforce: undefined, // 光整机轧制力
-  tmBendforce: undefined, // 光整机弯辊力
-  tmAcrMesh: undefined, // 光整机防皱辊插入量
-  tmBrMesh: undefined, // 光整机防颤辊插入量
+  // TM / 光整机
+  tmRollforce: undefined, // TM Roll Force / 光整机轧制力
+  tmBendforce: undefined, // TM Bending Force / 光整机弯辊力
+  tmAcrMesh: undefined, // TM Anti-crimping Roll Mesh / 光整机防皱辊插入量
+  tmBrMesh: undefined, // TM Anti-tremor Roll Mesh / 光整机防颤辊插入量
 
-  // 拉矫机
-  tlElong: undefined, // 拉矫机延伸率
-  tlLvlMesh1: undefined, // 拉矫机矫直辊插入量1
-  tlLvlMesh2: undefined, // 拉矫机矫直辊插入量2
-  tlAcbMesh: undefined, // 拉矫机防横弓插入量
+  // TL / 拉矫机
+  tlElong: undefined, // TL Elongation / 拉矫机延伸率
+  tlLvlMesh1: undefined, // TL Leveling Roll Mesh 1 / 拉矫机矫直辊插入量1
+  tlLvlMesh2: undefined, // TL Leveling Roll Mesh 2 / 拉矫机矫直辊插入量2
+  tlAcbMesh: undefined, // TL Anti-crossbow Mesh / 拉矫机防横弓插入量
 
-  // 炉火段
-  preheatingSection: undefined, // 炉火段预热段出口板温
-  heatingSection: undefined, // 炉火段加热段出口板温
-  coolingSection: undefined, // 炉火段冷却段出口板温
+  // Furnace Section / 炉火段
+  preheatingSection: undefined, // Furnace Preheating Section Exit Strip Temp / 炉火段预热段出口板温
+  heatingSection: undefined, // Furnace Heating Section Exit Strip Temp / 炉火段加热段出口板温
+  coolingSection: undefined, // Furnace Cooling Section Exit Strip Temp / 炉火段冷却段出口板温
 })
 
 export default {
@@ -390,7 +414,7 @@ export default {
           this.recommendation.coolingSection = data.value3
         }
       } catch (error) {
-        console.error('获取工艺参数提示失败', error)
+        console.error('Failed to get process parameter hint', error) // 获取工艺参数提示失败
       } finally {
         this.loading = false
         this.emitRecommendationChange()
diff --git a/apps/l2/src/views/l2/plan/components/setupPane.vue b/apps/l2/src/views/l2/plan/components/setupPane.vue
index fb24150..a00aede 100644
--- a/apps/l2/src/views/l2/plan/components/setupPane.vue
+++ b/apps/l2/src/views/l2/plan/components/setupPane.vue
@@ -1,103 +1,133 @@
 <template>
   <el-tabs>
-    <el-tab-pane label="全线张力">
+    <el-tab-pane label="Full Line Tension">
+      <!-- 全线张力 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="开卷机张力">
+        <el-descriptions-item label="Pay-off Reel Tension">
+          <!-- 开卷机张力 -->
           {{ setupForm.porTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="入口活套张力">
+        <el-descriptions-item label="Entry Loop Tension">
+          <!-- 入口活套张力 -->
           {{ setupForm.celTension }}
         </el-descriptions-item>
 
-        <el-descriptions-item label="清洗段张力">
+        <el-descriptions-item label="Cleaning Section Tension">
+          <!-- 清洗段张力 -->
           {{ setupForm.cleanTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="炉区张力">
+        <el-descriptions-item label="Furnace Zone Tension">
+          <!-- 炉区张力 -->
           {{ setupForm.furTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="冷却塔张力">
+        <el-descriptions-item label="Cooling Tower Tension">
+          <!-- 冷却塔张力 -->
           {{ setupForm.towerTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="光整机不投张力">
+        <el-descriptions-item label="TM No Tension">
+          <!-- 光整机不投张力 -->
           {{ setupForm.tmNoneTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="光整机入口张力">
+        <el-descriptions-item label="TM Entry Tension">
+          <!-- 光整机入口张力 -->
           {{ setupForm.tmEntryTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="光整机出口张力">
+        <el-descriptions-item label="TM Exit Tension">
+          <!-- 光整机出口张力 -->
           {{ setupForm.tmExitTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="拉矫机不投张力">
+        <el-descriptions-item label="TL No Tension">
+          <!-- 拉矫机不投张力 -->
           {{ setupForm.tlNoneTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="拉矫机出口张力">
+        <el-descriptions-item label="TL Exit Tension">
+          <!-- 拉矫机出口张力 -->
           {{ setupForm.tlExitTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="后处理张力">
+        <el-descriptions-item label="Post-treatment Tension">
+          <!-- 后处理张力 -->
           {{ setupForm.coatTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="出口活套张力">
+        <el-descriptions-item label="Exit Loop Tension">
+          <!-- 出口活套张力 -->
           {{ setupForm.cxlTension }}
         </el-descriptions-item>
-        <el-descriptions-item label="卷取机张力">
+        <el-descriptions-item label="Take-up Reel Tension">
+          <!-- 卷取机张力 -->
           {{ setupForm.trTension }}
         </el-descriptions-item>
       </el-descriptions>
     </el-tab-pane>
 
-    <el-tab-pane label="拉矫机参数">
+    <el-tab-pane label="TL Parameters">
+      <!-- 拉矫机参数 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="拉矫机延伸率">
+        <el-descriptions-item label="TL Elongation">
+          <!-- 拉矫机延伸率 -->
           {{ setupForm.tlElong }}
         </el-descriptions-item>
-        <el-descriptions-item label="拉矫机矫直辊插入量1">
+        <el-descriptions-item label="TL Leveling Roll Mesh 1">
+          <!-- 拉矫机矫直辊插入量1 -->
           {{ setupForm.tlLvlMesh1 }}
         </el-descriptions-item>
-        <el-descriptions-item label="拉矫机矫直辊插入量2">
+        <el-descriptions-item label="TL Leveling Roll Mesh 2">
+          <!-- 拉矫机矫直辊插入量2 -->
           {{ setupForm.tlLvlMesh2 }}
         </el-descriptions-item>
-        <el-descriptions-item label="拉矫机防横弓插入量">
+        <el-descriptions-item label="TL Anti-crossbow Mesh">
+          <!-- 拉矫机防横弓插入量 -->
           {{ setupForm.tlAcbMesh }}
         </el-descriptions-item>
       </el-descriptions>
     </el-tab-pane>
 
-    <el-tab-pane label="光整机弯辊力">
+    <el-tab-pane label="TM Bending Force">
+      <!-- 光整机弯辊力 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="光整机弯辊力">
+        <el-descriptions-item label="TM Bending Force">
+          <!-- 光整机弯辊力 -->
           {{ setupForm.tmBendforce }}
         </el-descriptions-item>
       </el-descriptions>
     </el-tab-pane>
 
-    <el-tab-pane label="光整机插入量">
+    <el-tab-pane label="TM Mesh">
+      <!-- 光整机插入量 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="光整机防皱辊插入量">
+        <el-descriptions-item label="TM Anti-crimping Roll Mesh">
+          <!-- 光整机防皱辊插入量 -->
           {{ setupForm.tmAcrMesh }}
         </el-descriptions-item>
-        <el-descriptions-item label="光整机防颤辊插入量">
+        <el-descriptions-item label="TM Anti-tremor Roll Mesh">
+          <!-- 光整机防颤辊插入量 -->
           {{ setupForm.tmBrMesh }}
         </el-descriptions-item>
       </el-descriptions>
     </el-tab-pane>
 
-    <el-tab-pane label="光整机轧制力">
+    <el-tab-pane label="TM Roll Force">
+      <!-- 光整机轧制力 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="光整机轧制力">
+        <el-descriptions-item label="TM Roll Force">
+          <!-- 光整机轧制力 -->
           {{ setupForm.tmRollforce }}
         </el-descriptions-item>
       </el-descriptions>
     </el-tab-pane>
 
-    <el-tab-pane label="炉火段">
+    <el-tab-pane label="Furnace Section">
+      <!-- 炉火段 -->
       <el-descriptions :column="1">
-        <el-descriptions-item label="预热段出口板温">
+        <el-descriptions-item label="Preheating Section Exit Strip Temp">
+          <!-- 预热段出口板温 -->
           {{ setupForm.preheatingSection }}
         </el-descriptions-item>
-        <el-descriptions-item label="加热段出口板温">
+        <el-descriptions-item label="Heating Section Exit Strip Temp">
+          <!-- 加热段出口板温 -->
           {{ setupForm.heatingSection }}
         </el-descriptions-item>
-        <el-descriptions-item label="冷却段出口板温">
+        <el-descriptions-item label="Cooling Section Exit Strip Temp">
+          <!-- 冷却段出口板温 -->
           {{ setupForm.coolingSection }}
         </el-descriptions-item>
       </el-descriptions>
@@ -106,7 +136,7 @@
 </template>
 
 <script>
-// 接收数据，渲染为tab
+// Receive data, render as tabs / 接收数据，渲染为tab
 export default {
   props: {
     setupForm: {
diff --git a/apps/l2/src/views/l2/plan/components/setupRecommendationConfig.js b/apps/l2/src/views/l2/plan/components/setupRecommendationConfig.js
index 75befd1..d4a40d7 100644
--- a/apps/l2/src/views/l2/plan/components/setupRecommendationConfig.js
+++ b/apps/l2/src/views/l2/plan/components/setupRecommendationConfig.js
@@ -1,46 +1,46 @@
 export const PARAMETER_GROUPS = [
   {
-    title: '全线张力',
+    title: 'Full Line Tension', // 全线张力
     items: [
-      { label: '开卷机张力', key: 'porTension' },
-      { label: '入口活套张力', key: 'celTension' },
-      { label: '清洗段张力', key: 'cleanTension' },
-      { label: '炉区张力', key: 'furTension' },
-      { label: '冷却塔张力', key: 'towerTension' },
-      { label: '光整机不投张力', key: 'tmNoneTension' },
-      { label: '光整机入口张力', key: 'tmEntryTension' },
-      { label: '光整机出口张力', key: 'tmExitTension' },
-      { label: '拉矫机不投张力', key: 'tlNoneTension' },
-      { label: '拉矫机出口张力', key: 'tlExitTension' },
-      { label: '后处理张力', key: 'coatTension' },
-      { label: '出口活套张力', key: 'cxlTension' },
-      { label: '卷取机张力', key: 'trTension' }
+      { label: 'Pay-off Reel Tension', key: 'porTension' }, // 开卷机张力
+      { label: 'Entry Loop Tension', key: 'celTension' }, // 入口活套张力
+      { label: 'Cleaning Section Tension', key: 'cleanTension' }, // 清洗段张力
+      { label: 'Furnace Zone Tension', key: 'furTension' }, // 炉区张力
+      { label: 'Cooling Tower Tension', key: 'towerTension' }, // 冷却塔张力
+      { label: 'TM No Tension', key: 'tmNoneTension' }, // 光整机不投张力
+      { label: 'TM Entry Tension', key: 'tmEntryTension' }, // 光整机入口张力
+      { label: 'TM Exit Tension', key: 'tmExitTension' }, // 光整机出口张力
+      { label: 'TL No Tension', key: 'tlNoneTension' }, // 拉矫机不投张力
+      { label: 'TL Exit Tension', key: 'tlExitTension' }, // 拉矫机出口张力
+      { label: 'Post-treatment Tension', key: 'coatTension' }, // 后处理张力
+      { label: 'Exit Loop Tension', key: 'cxlTension' }, // 出口活套张力
+      { label: 'Take-up Reel Tension', key: 'trTension' } // 卷取机张力
     ]
   },
   {
-    title: '光整机参数',
+    title: 'TM Parameters', // 光整机参数
     items: [
-      { label: '光整机轧制力', key: 'tmRollforce' },
-      { label: '光整机弯辊力', key: 'tmBendforce' },
-      { label: '光整机防皱辊插入量', key: 'tmAcrMesh' },
-      { label: '光整机防颤辊插入量', key: 'tmBrMesh' }
+      { label: 'TM Roll Force', key: 'tmRollforce' }, // 光整机轧制力
+      { label: 'TM Bending Force', key: 'tmBendforce' }, // 光整机弯辊力
+      { label: 'TM Anti-crimping Roll Mesh', key: 'tmAcrMesh' }, // 光整机防皱辊插入量
+      { label: 'TM Anti-tremor Roll Mesh', key: 'tmBrMesh' } // 光整机防颤辊插入量
     ]
   },
   {
-    title: '拉矫机参数',
+    title: 'TL Parameters', // 拉矫机参数
     items: [
-      { label: '拉矫机延伸率', key: 'tlElong' },
-      { label: '矫直辊插入量1', key: 'tlLvlMesh1' },
-      { label: '矫直辊插入量2', key: 'tlLvlMesh2' },
-      { label: '防横弓插入量', key: 'tlAcbMesh' }
+      { label: 'TL Elongation', key: 'tlElong' }, // 拉矫机延伸率
+      { label: 'Leveling Roll Mesh 1', key: 'tlLvlMesh1' }, // 矫直辊插入量1
+      { label: 'Leveling Roll Mesh 2', key: 'tlLvlMesh2' }, // 矫直辊插入量2
+      { label: 'Anti-crossbow Mesh', key: 'tlAcbMesh' } // 防横弓插入量
     ]
   },
   {
-    title: '炉火段参数',
+    title: 'Furnace Section Parameters', // 炉火段参数
     items: [
-      { label: '预热段出口板温', key: 'preheatingSection' },
-      { label: '加热段出口板温', key: 'heatingSection' },
-      { label: '冷却段出口板温', key: 'coolingSection' }
+      { label: 'Preheating Section Exit Strip Temp', key: 'preheatingSection' }, // 预热段出口板温
+      { label: 'Heating Section Exit Strip Temp', key: 'heatingSection' }, // 加热段出口板温
+      { label: 'Cooling Section Exit Strip Temp', key: 'coolingSection' } // 冷却段出口板温
     ]
   }
 ]
diff --git a/apps/l2/src/views/l2/plan/index.vue b/apps/l2/src/views/l2/plan/index.vue
index 81ea623..2ecaa56 100644
--- a/apps/l2/src/views/l2/plan/index.vue
+++ b/apps/l2/src/views/l2/plan/index.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="plan-management-industrial">
-    <!-- 顶部工具栏 -->
+    <!-- Top toolbar / 顶部工具栏 -->
     <div class="toolbar">
       <el-button type="primary" @click="handleAdd" icon="el-icon-plus" size="small">
-        {{ $t('plan.addPlan') }}
+        Add Plan
       </el-button>
+      <!-- 新增计划 -->
       <el-button @click="getList" icon="el-icon-refresh" size="small">
-        {{ $t('plan.refresh') }}
+        Refresh
       </el-button>
+      <!-- 刷新 -->
     </div>
 
-    <!-- 正在生产区 -->
+    <!-- Producing section / 正在生产区 -->
     <div class="producing-section" v-if="productingPlans.length > 0">
       <div class="producing-cards">
         <el-card 
@@ -22,8 +24,9 @@
         >
           <div class="card-status">
             <span class="status-dot status-producing"></span>
-            <span class="status-text">{{ $t('plan.producing') }}</span>
-            <!-- 当前位置 -->
+            <span class="status-text">Producing</span>
+            <!-- 生产中 -->
+            <!-- Current position / 当前位置 -->
             <div class="card-position" v-if="getPlanPosition(plan)">
               <i class="el-icon-location"></i>
               {{ getPlanPosition(plan).positionNameCn }}
@@ -32,50 +35,58 @@
           <div class="card-content">
             <div class="card-main">
               <div class="plan-id">{{ plan.planid }}</div>
-              <div class="coil-id">{{ $t('plan.coilid') }}: {{ plan.coilid }}</div>
+              <div class="coil-id">Coil ID: {{ plan.coilid }}</div>
+              <!-- 钢卷号 -->
             </div>
             <div class="card-details">
               <div class="detail-item">
-                <span class="label">{{ $t('plan.steelGrade') }}:</span>
+                <span class="label">Steel Grade:</span>
+                <!-- 钢种 -->
                 <span class="value">{{ plan.steelGrade }}</span>
               </div>
               <div class="detail-item">
-                <span class="label">{{ $t('plan.thickness') }}:</span>
+                <span class="label">Thickness:</span>
+                <!-- 厚度 -->
                 <span class="value">{{ plan.entryThick }} mm</span>
               </div>
               <div class="detail-item">
-                <span class="label">{{ $t('plan.width') }}:</span>
+                <span class="label">Width:</span>
+                <!-- 宽度 -->
                 <span class="value">{{ plan.entryWidth }} mm</span>
               </div>
               <div class="detail-item">
-                <span class="label">{{ $t('plan.weight') }}:</span>
+                <span class="label">Weight:</span>
+                <!-- 重量 -->
                 <span class="value">{{ plan.entryWeight }} t</span>
               </div>
             </div>
           </div>
           <div class="card-actions">
             <el-button size="mini" type="text" @click.stop="handleUpdate(plan)" icon="el-icon-edit">
-              {{ $t('plan.edit') }}
+              Edit
             </el-button>
+            <!-- 编辑 -->
             <el-button size="mini" type="text" @click.stop="handleDelete(plan)" icon="el-icon-delete">
-              {{ $t('plan.delete') }}
+              Delete
             </el-button>
+            <!-- 删除 -->
           </div>
         </el-card>
       </div>
     </div>
 
-    <!-- 主内容区 -->
+    <!-- Main content area / 主内容区 -->
     <el-row :gutter="20" class="main-content">
-      <!-- 左侧：计划队列（标签页） -->
+      <!-- Left: Plan queue (tabs) / 左侧：计划队列（标签页） -->
       <el-col :span="10" class="left-panel">
         <div class="queue-tabs-section">
           <el-tabs v-model="queueTab">
-            <!-- 生产队列标签页 -->
+            <!-- Production queue tab / 生产队列标签页 -->
             <el-tab-pane name="pending">
               <span slot="label">
                 <i class="el-icon-s-order"></i>
-                {{ $t('plan.productionQueue') }}
+                Production Queue
+                <!-- 生产队列 -->
                 <el-badge :value="pendingPlans.length" class="tab-badge" />
               </span>
               <div v-loading="loading" class="plan-list">
@@ -102,9 +113,10 @@
                              plan.status === 'READY' ? 'primary' : 'info'" 
                       size="mini"
                     >
-                      {{ plan.status === 'PRODUCING' ? $t('plan.producing') : 
-                         plan.status === 'ONLINE' ? $t('plan.online') : 
-                         plan.status === 'READY' ? $t('plan.ready') : $t('plan.new') }}
+                      {{ plan.status === 'PRODUCING' ? 'Producing' : 
+                         plan.status === 'ONLINE' ? 'Online' : 
+                         plan.status === 'READY' ? 'Ready' : 'New' }}
+                      <!-- 生产中 / 在机 / 就绪 / 新建 -->
                     </el-tag>
                   </div>
                   <div class="plan-content">
@@ -117,7 +129,7 @@
                       <span>{{ plan.entryThick }}×{{ plan.entryWidth }} mm</span>
                       <span>{{ plan.entryWeight }} t</span>
                     </div>
-                    <!-- 位置信息（仅生产中状态显示） -->
+                    <!-- Position info (only shown for PRODUCING status) / 位置信息（仅生产中状态显示） -->
                     <div class="plan-position" v-if="plan.status === 'PRODUCING' && getPlanPosition(plan)">
                       <i class="el-icon-location"></i>
                       <span>{{ getPlanPosition(plan).positionNameCn }}</span>
@@ -129,16 +141,18 @@
                   </div>
                 </div>
                 <div v-if="pendingPlans.length === 0" class="empty-text">
-                  {{ $t('plan.noProductionPlan') }}
+                  No production plans
                 </div>
+                <!-- 暂无生产计划 -->
               </div>
             </el-tab-pane>
 
-            <!-- 历史记录标签页 -->
+            <!-- History tab / 历史记录标签页 -->
             <el-tab-pane name="history">
               <span slot="label">
                 <i class="el-icon-document-checked"></i>
-                {{ $t('plan.history') }}
+                History
+                <!-- 历史记录 -->
                 <el-badge :value="historyPlans.length" class="tab-badge" />
               </span>
               <div class="plan-list">
@@ -151,7 +165,8 @@
                 >
                   <div class="plan-status">
                     <span class="status-dot status-history"></span>
-                    <el-tag type="info" size="mini">{{ $t('plan.completed') }}</el-tag>
+                    <el-tag type="info" size="mini">Completed</el-tag>
+                    <!-- 已完成 -->
                   </div>
                   <div class="plan-content">
                     <div class="plan-main">
@@ -174,60 +189,77 @@
                   </div>
                 </div>
                 <div v-if="historyPlans.length === 0" class="empty-text">
-                  {{ $t('plan.noHistory') }}
+                  No history records
                 </div>
+                <!-- 暂无历史记录 -->
               </div>
             </el-tab-pane>
           </el-tabs>
         </div>
       </el-col>
 
-      <!-- 右侧：计划详情和张力数据 -->
+      <!-- Right: Plan details and tension data / 右侧：计划详情和张力数据 -->
       <el-col :span="14" class="right-panel">
         <div v-if="currentRow" class="detail-section">
           <div class="section-header">
             <i class="el-icon-data-line"></i>
-            <span>{{ $t('plan.planDetailAndProcessParams') }}</span>
+            <span>Plan Details & Process Parameters</span>
+            <!-- 计划详情与工艺参数 -->
           </div>
           
-          <!-- 整合的详情卡片 -->
+          <!-- Unified detail card / 整合的详情卡片 -->
           <el-card class="detail-card-unified" shadow="never">
             <el-tabs v-model="activeTab" type="border-card">
-              <!-- 基础信息标签页 -->
-              <el-tab-pane :label="$t('plan.basicInfo')" name="basic">
+              <!-- Basic info tab / 基础信息标签页 -->
+              <el-tab-pane label="Basic Info" name="basic">
+                <!-- 基础信息 -->
                 <el-descriptions :column="3" border size="small">
-                  <el-descriptions-item label="计划号">{{ currentRow.planid }}</el-descriptions-item>
-                  <el-descriptions-item label="钢卷号">{{ currentRow.coilid }}</el-descriptions-item>
-                  <el-descriptions-item label="钢种">{{ currentRow.steelGrade }}</el-descriptions-item>
-                  <el-descriptions-item label="屈服点">{{ currentRow.yieldPoint }}</el-descriptions-item>
-                  <el-descriptions-item label="重量(t)">{{ currentRow.entryWeight }}</el-descriptions-item>
-                  <el-descriptions-item label="厚度(mm)">{{ currentRow.entryThick }}</el-descriptions-item>
-                  <el-descriptions-item label="宽度(mm)">{{ currentRow.entryWidth }}</el-descriptions-item>
-                  <el-descriptions-item label="长度(mm)">{{ currentRow.entryLength }}</el-descriptions-item>
-                  <el-descriptions-item label="外径(mm)">{{ currentRow.entryOuterDiameter }}</el-descriptions-item>
-                  <el-descriptions-item label="延伸率(%)">{{ currentRow.spmElongation }}</el-descriptions-item>
-                  <el-descriptions-item label="SPM轧制力">{{ currentRow.spmRollforce }}</el-descriptions-item>
+                  <el-descriptions-item label="Plan ID">{{ currentRow.planid }}</el-descriptions-item>
+                  <!-- 计划号 -->
+                  <el-descriptions-item label="Coil ID">{{ currentRow.coilid }}</el-descriptions-item>
+                  <!-- 钢卷号 -->
+                  <el-descriptions-item label="Steel Grade">{{ currentRow.steelGrade }}</el-descriptions-item>
+                  <!-- 钢种 -->
+                  <el-descriptions-item label="Yield Point">{{ currentRow.yieldPoint }}</el-descriptions-item>
+                  <!-- 屈服点 -->
+                  <el-descriptions-item label="Weight (t)">{{ currentRow.entryWeight }}</el-descriptions-item>
+                  <!-- 重量(t) -->
+                  <el-descriptions-item label="Thickness (mm)">{{ currentRow.entryThick }}</el-descriptions-item>
+                  <!-- 厚度(mm) -->
+                  <el-descriptions-item label="Width (mm)">{{ currentRow.entryWidth }}</el-descriptions-item>
+                  <!-- 宽度(mm) -->
+                  <el-descriptions-item label="Length (mm)">{{ currentRow.entryLength }}</el-descriptions-item>
+                  <!-- 长度(mm) -->
+                  <el-descriptions-item label="Outer Diameter (mm)">{{ currentRow.entryOuterDiameter }}</el-descriptions-item>
+                  <!-- 外径(mm) -->
+                  <el-descriptions-item label="Elongation (%)">{{ currentRow.spmElongation }}</el-descriptions-item>
+                  <!-- 延伸率(%) -->
+                  <el-descriptions-item label="SPM Roll Force">{{ currentRow.spmRollforce }}</el-descriptions-item>
+                  <!-- SPM轧制力 -->
                 </el-descriptions>
               </el-tab-pane>
               
-              <!-- 工艺参数标签页 -->
-              <el-tab-pane :label="$t('plan.processParams')" name="process" v-loading="setupLoading">
+              <!-- Process parameters tab / 工艺参数标签页 -->
+              <el-tab-pane label="Process Parameters" name="process" v-loading="setupLoading">
+                <!-- 工艺参数 -->
                 <setup-pane v-if="!setupLoading && setupForm" :setup-form="setupForm" />
                 <div v-if="!setupLoading && !setupForm" class="empty-text">
-                  {{ $t('plan.noProcessParams') }}
+                  No process parameter data
                 </div>
+                <!-- 暂无工艺参数数据 -->
               </el-tab-pane>
             </el-tabs>
           </el-card>
         </div>
         <div v-else class="empty-section">
           <i class="el-icon-info"></i>
-          <p>{{ $t('plan.pleaseSelectPlan') }}</p>
+          <p>Please select a plan from the left to view details</p>
+          <!-- 请从左侧选择一个计划查看详情 -->
         </div>
       </el-col>
     </el-row>
 
-    <!-- 编辑/新增弹窗 -->
+    <!-- Edit/Add dialog / 编辑/新增弹窗 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false"
       append-to-body>
       <div class="plan-dialog-body">
@@ -235,78 +267,113 @@
           <el-form :model="form" ref="form" label-width="90px" :rules="rules" size="mini" class="plan-base-form">
             <el-row :gutter="16">
               <el-col :span="12">
-                <el-form-item :label="$t('plan.planId')" prop="planid">
-                  <el-input v-model="form.planid" placeholder="请输入计划ID" maxLength="32"></el-input>
+                <el-form-item label="Plan ID" prop="planid">
+                  <!-- 计划ID -->
+                  <el-input v-model="form.planid" placeholder="Please enter plan ID" maxLength="32"></el-input>
+                  <!-- 请输入计划ID -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.coilid')" prop="coilid">
-                  <el-input v-model="form.coilid" placeholder="请输入钢卷号" maxLength="32"></el-input>
+                <el-form-item label="Coil ID" prop="coilid">
+                  <!-- 钢卷号 -->
+                  <el-input v-model="form.coilid" placeholder="Please enter coil ID" maxLength="32"></el-input>
+                  <!-- 请输入钢卷号 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.steelGrade')" prop="steelGrade">
-                  <el-select v-model="form.steelGrade" placeholder="请选择钢种">
+                <el-form-item label="Steel Grade" prop="steelGrade">
+                  <!-- 钢种 -->
+                  <el-select v-model="form.steelGrade" placeholder="Please select steel grade">
+                    <!-- 请选择钢种 -->
                     <el-option v-for="item in steelGradeList" :key="item.gradeid" :label="item.name"
                       :value="item.gradeid"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.thickness')" prop="entryThick">
-                  <el-input v-model="form.entryThick" placeholder="请输入入口厚度" type="number" step="0.01" min="0"></el-input>
+                <el-form-item label="Thickness (mm)" prop="entryThick">
+                  <!-- 厚度(mm) -->
+                  <el-input v-model="form.entryThick" placeholder="Please enter entry thickness" type="number" step="0.01" min="0"></el-input>
+                  <!-- 请输入入口厚度 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.width')" prop="entryWidth">
-                  <el-input v-model="form.entryWidth" placeholder="请输入入口宽度" type="number" step="1" min="0"></el-input>
+                <el-form-item label="Width (mm)" prop="entryWidth">
+                  <!-- 宽度(mm) -->
+                  <el-input v-model="form.entryWidth" placeholder="Please enter entry width" type="number" step="1" min="0"></el-input>
+                  <!-- 请输入入口宽度 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.yieldPoint')" prop="yieldPoint">
-                  <el-input v-model="form.yieldPoint" placeholder="请输入屈服点" type="number" step="0.01" min="0"></el-input>
+                <el-form-item label="Yield Point" prop="yieldPoint">
+                  <!-- 屈服点 -->
+                  <el-input v-model="form.yieldPoint" placeholder="Please enter yield point" type="number" step="0.01" min="0"></el-input>
+                  <!-- 请输入屈服点 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.weight')" prop="entryWeight">
-                  <el-input v-model="form.entryWeight" placeholder="请输入入口重量" type="number" step="0.01" min="0"></el-input>
+                <el-form-item label="Zinc Coating Thickness" prop="zincCoatingThickness">
+                 <!-- 锌层厚度 -->
+                    <el-input v-model="form.zincCoatingThickness" placeholder="Please enter zinc coating thickness" type="number" step="0.01" min="0"></el-input>
+                     <!-- 请输入锌层厚度 -->
+                 </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="Weight (t)" prop="entryWeight">
+                  <!-- 重量(t) -->
+                  <el-input v-model="form.entryWeight" placeholder="Please enter entry weight" type="number" step="0.01" min="0"></el-input>
+                  <!-- 请输入入口重量 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.length')" prop="entryLength">
-                  <el-input v-model="form.entryLength" placeholder="请输入入口长度" type="number" step="1" min="0"></el-input>
+                <el-form-item label="Length (mm)" prop="entryLength">
+                  <!-- 长度(mm) -->
+                  <el-input v-model="form.entryLength" placeholder="Please enter entry length" type="number" step="1" min="0"></el-input>
+                  <!-- 请输入入口长度 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.outerDiameter')" prop="entryOuterDiameter">
-                  <el-input v-model="form.entryOuterDiameter" placeholder="请输入入口外径" type="number" step="1"
+                <el-form-item label="Outer Diameter (mm)" prop="entryOuterDiameter">
+                  <!-- 外径(mm) -->
+                  <el-input v-model="form.entryOuterDiameter" placeholder="Please enter entry outer diameter" type="number" step="1"
                     min="0"></el-input>
+                  <!-- 请输入入口外径 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.elongation')" prop="spmElongation">
-                  <el-input v-model="form.spmElongation" placeholder="请输入延伸率" type="number" step="0.01" min="0"></el-input>
+                <el-form-item label="Elongation (%)" prop="spmElongation">
+                  <!-- 延伸率(%) -->
+                  <el-input v-model="form.spmElongation" placeholder="Please enter elongation" type="number" step="0.01" min="0"></el-input>
+                  <!-- 请输入延伸率 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.spmRollforce')" prop="spmRollforce">
-                  <el-input v-model="form.spmRollforce" placeholder="请输入SPM轧制力" type="number" step="0.01"
+                <el-form-item label="Roll Force" prop="spmRollforce">
+                  <!-- 轧制力 -->
+                  <el-input v-model="form.spmRollforce" placeholder="Please enter SPM roll force" type="number" step="0.01"
                     min="0"></el-input>
+                  <!-- 请输入SPM轧制力 -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.exitLengthTar')" prop="exitLengthTar">
-                  <el-input v-model="form.exitLengthTar" placeholder="请输入出口目标长度(mm)" type="number" step="1" min="0"></el-input>
+                <el-form-item label="Exit Target Length" prop="exitLengthTar">
+                  <!-- 出口目标长度 -->
+                  <el-input v-model="form.exitLengthTar" placeholder="Please enter exit target length (mm)" type="number" step="1" min="0"></el-input>
+                  <!-- 请输入出口目标长度(mm) -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.exitThickTar')" prop="exitThickTar">
-                  <el-input v-model="form.exitThickTar" placeholder="请输入出口目标厚度(mm)" type="number" step="0.01" min="0"></el-input>
+                <el-form-item label="Exit Target Thickness" prop="exitThickTar">
+                  <!-- 出口目标厚度 -->
+                  <el-input v-model="form.exitThickTar" placeholder="Please enter exit target thickness (mm)" type="number" step="0.01" min="0"></el-input>
+                  <!-- 请输入出口目标厚度(mm) -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item :label="$t('plan.exitWidthTar')" prop="exitWidthTar">
-                  <el-input v-model="form.exitWidthTar" placeholder="请输入出口目标宽度(mm)" type="number" step="1" min="0"></el-input>
+                <el-form-item label="Exit Target Width" prop="exitWidthTar">
+                  <!-- 出口目标宽度 -->
+                  <el-input v-model="form.exitWidthTar" placeholder="Please enter exit target width (mm)" type="number" step="1" min="0"></el-input>
+                  <!-- 请输入出口目标宽度(mm) -->
                 </el-form-item>
               </el-col>
             </el-row>
@@ -314,8 +381,10 @@
 
           <div class="plan-dialog-actions">
             <el-checkbox v-if="!form.id" v-model="spmFlag"
-              :label="$t('plan.generateProcessParams')"></el-checkbox>
-            <el-divider content-position="left" v-if="spmFlag">{{ $t('plan.processParams') }}</el-divider>
+              label="Generate Process Parameters (Recommended: complete basic info first)"></el-checkbox>
+            <!-- 生成工艺参数(建议先填写完成基础信息再勾选此选项) -->
+            <el-divider content-position="left" v-if="spmFlag">Process Parameters</el-divider>
+            <!-- 工艺参数 -->
             <setup-form v-if="spmFlag" ref="setupFormRef" :income="form" :steel-grade-options="steelGradeList"
               :plan-history="planList" :show-recommendation-panel="false" @input="handleSetupInput"
               @recommendation-change="handleProcessRecommendation" />
@@ -331,10 +400,12 @@
             @apply-width="handleApplyWidth" @apply-rollforce="handleApplyRollforce" />
         </div>
       </div>
-      <!-- 弹窗底部按钮 -->
+      <!-- Dialog footer buttons / 弹窗底部按钮 -->
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">{{ $t('plan.cancel') }}</el-button>
-        <el-button type="primary" @click="submitForm" :loading="saveLoading">{{ $t('plan.save') }}</el-button>
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <!-- 取消 -->
+        <el-button type="primary" @click="submitForm" :loading="saveLoading">Save</el-button>
+        <!-- 保存 -->
       </div>
     </el-dialog>
   </div>
@@ -447,9 +518,9 @@ export default {
       planList: [],
       loading: false,
       btnLoading: false,
-      // 弹窗状态（新增/编辑弹窗显隐+标题）
+      // Dialog state (add/edit dialog visibility + title) / 弹窗状态（新增/编辑弹窗显隐+标题）
       dialogVisible: false,
-      dialogTitle: "新增计划",
+      dialogTitle: "Add Plan", // 新增计划
       // 表单数据（与后端新增/编辑接口参数完全对齐）
       form: {
         id: null, // 主键ID（组件内部用，提交时后端自动处理）
@@ -461,6 +532,7 @@ export default {
         planType: "", // 计划类型（string，接口要求）
         originCoilid: "", // 原卷号（string，补充接口缺失字段）
         yieldPoint: null, // 屈服点（number，接口要求）
+        zincCoatingThickness: null, // 锌层厚度
         entryWeight: null, // 入口重量(t)（number，接口要求）
         entryThick: null, // 入口厚度(mm)（number，接口要求）
         entryWidth: null, // 入口宽度(mm)（number，接口要求）
@@ -551,31 +623,31 @@ export default {
         headendGaugeLength: null, // 头端测厚长度(mm)（number，接口要求）
         tailendGaugeLength: null, // 尾端测厚长度(mm)（number，接口要求）
       },
-      // 表单验证规则（至少包含必填字段校验）
+      // Form validation rules (at least include required field validation) / 表单验证规则（至少包含必填字段校验）
       rules: {
         coilid: [
-          { required: true, message: "钢卷号不能为空", trigger: "blur" }, // 必填校验
-          { max: 32, message: "钢卷号长度不能超过32字符", trigger: "blur" }, // 长度校验
+          { required: true, message: "Coil ID cannot be empty", trigger: "blur" }, // 钢卷号不能为空
+          { max: 32, message: "Coil ID length cannot exceed 32 characters", trigger: "blur" }, // 钢卷号长度不能超过32字符
         ],
-        // 新增 status 必填校验
+        // Add status required validation / 新增 status 必填校验
         status: [
-          { required: true, message: "请选择计划状态", trigger: "change" }
+          { required: true, message: "Please select plan status", trigger: "change" } // 请选择计划状态
         ]
       },
-      // 保存按钮加载状态（避免重复提交）
+      // Save button loading state (avoid duplicate submission) / 保存按钮加载状态（避免重复提交）
       saveLoading: false,
-      // 当前选中行数据（用于行点击、编辑回显）
+      // Current selected row data (for row click, edit echo) / 当前选中行数据（用于行点击、编辑回显）
       currentRow: null,
       steelGradeList: [],
       processRecommendation: {},
     };
   },
   computed: {
-    // 正在生产的计划 - 顶部独立显示用
+    // Plans in production - for top independent display / 正在生产的计划 - 顶部独立显示用
     productingPlans() {
       return this.planList.filter(plan => plan.status === 'PRODUCING');
     },
-    // 生产队列 - 只包含生产中和待生产，按优先级排序
+    // Production queue - only includes producing and pending, sorted by priority / 生产队列 - 只包含生产中和待生产，按优先级排序
     pendingPlans() {
       const statusPriority = {
         'PRODUCING': 1,
@@ -591,16 +663,16 @@ export default {
           return priorityA - priorityB;
         });
     },
-    // 在开卷机上 (ONLINE)
+    // On pay-off reel (ONLINE) / 在开卷机上 (ONLINE)
     onlinePlans() {
       return this.planList.filter(plan => plan.status === 'ONLINE');
     },
-    // 历史记录 - 只显示已完成的计划，按完成时间倒序
+    // History records - only show completed plans, sorted by completion time descending / 历史记录 - 只显示已完成的计划，按完成时间倒序
     historyPlans() {
       return this.planList
         .filter(plan => plan.status === 'PRODUCT')
         .sort((a, b) => {
-          // 按结束时间倒序排列（最新完成的在前）
+          // Sort by end time descending (newest completed first) / 按结束时间倒序排列（最新完成的在前）
           if (a.endDate && b.endDate) {
             return new Date(b.endDate) - new Date(a.endDate);
           }
@@ -612,13 +684,13 @@ export default {
     }
   },
   created() {
-    // 组件创建时自动加载计划列表
+    // Automatically load plan list when component is created / 组件创建时自动加载计划列表
     this.getList();
     this.fetchSteelGradeList();
     this.fetchMatMapList();
   },
   methods: {
-    parseTime, // 挂载日期格式化方法到实例
+    parseTime, // Mount date formatting method to instance / 挂载日期格式化方法到实例
     fetchSteelGradeList() {
       getSteelGradeList().then(res => {
         this.steelGradeList = res.data
@@ -634,7 +706,7 @@ export default {
           String(item.name) === gid ||
           String(item.gradeName || '') === gid
         )
-        // 下拉选择器以 gradeid 为 value，确保回填 id 以显示名称
+        // Dropdown selector uses gradeid as value, ensure backfill id to display name / 下拉选择器以 gradeid 为 value，确保回填 id 以显示名称
         this.form.steelGrade = match ? match.gradeid : payload.steelGrade
       }
       if (payload.entryThick) this.form.entryThick = payload.entryThick
@@ -672,27 +744,27 @@ export default {
       if (!this.$refs.setupFormRef) return
       this.$refs.setupFormRef.applyAll()
     },
-    // 获取物料位置映射
+    // Get material position mapping / 获取物料位置映射
     fetchMatMapList() {
       getTrackMatPosition().then(res => {
         if (res.data && res.data.matMapList) {
           this.matMapList = res.data.matMapList
-          console.log('获取物料位置映射：', this.matMapList.length, '个设备')
+          console.log('Material position mapping obtained:', this.matMapList.length, 'devices') // 获取物料位置映射：, 个设备
         }
       }).catch(err => {
-        console.error('获取物料位置失败：', err)
+        console.error('Failed to get material position:', err) // 获取物料位置失败：
       })
     },
     handleSetupInput(data) {
       this.setupForm = data
     },
-    // 获取计划的当前位置
+    // Get current position of plan / 获取计划的当前位置
     getPlanPosition(plan) {
       if (!this.matMapList || this.matMapList.length === 0) {
         return null
       }
       
-      // 从matMapList中查找匹配的位置（若有多个匹配，取posIdx最大/最靠后的为当前位置）
+      // Find matching position from matMapList (if multiple matches, take the one with largest posIdx/most backward as current position) / 从matMapList中查找匹配的位置（若有多个匹配，取posIdx最大/最靠后的为当前位置）
       const positions = this.matMapList.filter(item => 
         (item.planId && item.planId === plan.planid) ||
         (item.planId && item.planId === plan.planId) ||
@@ -707,41 +779,41 @@ export default {
         return c > p ? cur : prev
       })
     },
-    // 获取计划列表数据（支持传入清理后的查询参数）
+    // Get plan list data (supports passing cleaned query parameters) / 获取计划列表数据（支持传入清理后的查询参数）
     async getList(cleanParams) {
-      this.loading = true; // 开启表格加载
-      const params = cleanParams || this.queryParams; // 优先使用传入参数（如重置/查询）
+      this.loading = true; // Enable table loading / 开启表格加载
+      const params = cleanParams || this.queryParams; // Prefer passed parameters (e.g., reset/query) / 优先使用传入参数（如重置/查询）
 
       try {
-        // 如果没有指定状态，并行查询需要的状态然后合并
+        // If status is not specified, query required statuses in parallel then merge / 如果没有指定状态，并行查询需要的状态然后合并
         if (!params.status) {
-          // 只查询：生产中、就绪、新建、已完成
+          // Only query: PRODUCING, READY, NEW, PRODUCT / 只查询：生产中、就绪、新建、已完成
           const statuses = ['PRODUCING', 'READY', 'NEW', 'PRODUCT']
           const allPlans = []
           
-          // 并行查询所有状态
+          // Query all statuses in parallel / 并行查询所有状态
           const requests = statuses.map(status => 
             listPlan({ ...params, status }).catch(err => {
-              console.warn(`查询${status}状态失败:`, err)
+              console.warn(`Failed to query ${status} status:`, err) // 查询状态失败
               return { data: [] }
             })
           )
           
           const results = await Promise.all(requests)
           
-          // 合并所有查询结果
+          // Merge all query results / 合并所有查询结果
           results.forEach(res => {
             if (res.data) {
               allPlans.push(...res.data)
             }
           })
           
-          // 去重（根据id）
+          // Deduplicate (by id) / 去重（根据id）
           const uniquePlans = Array.from(
             new Map(allPlans.map(plan => [plan.id, plan])).values()
           )
           
-          // 处理列表数据
+          // Process list data / 处理列表数据
           this.planList = uniquePlans.map((item) => {
             return {
               ...item,
@@ -749,15 +821,15 @@ export default {
             };
           });
           
-          console.log('查询到的总计划数：', uniquePlans.length, '条')
-          console.log('各状态分布：', {
+          console.log('Total plans queried:', uniquePlans.length) // 查询到的总计划数：, 条
+          console.log('Status distribution:', { // 各状态分布：
             PRODUCING: uniquePlans.filter(p => p.status === 'PRODUCING').length,
             READY: uniquePlans.filter(p => p.status === 'READY').length,
             NEW: uniquePlans.filter(p => p.status === 'NEW').length,
             PRODUCT: uniquePlans.filter(p => p.status === 'PRODUCT').length
           })
         } else {
-          // 如果指定了状态，直接查询
+          // If status is specified, query directly / 如果指定了状态，直接查询
           const response = await listPlan(params)
           this.planList = response.data.map((item) => {
             return {
@@ -767,58 +839,58 @@ export default {
           });
         }
         
-        // 关闭加载状态
+        // Close loading state / 关闭加载状态
         this.loading = false;
         this.btnLoading = false;
       } catch (error) {
-          // 异常处理：关闭加载+提示错误
+          // Error handling: close loading + show error / 异常处理：关闭加载+提示错误
           this.loading = false;
           this.btnLoading = false;
-          console.error("获取计划列表失败:", error);
-          this.$message.error("获取数据失败，请重试");
+          console.error("Failed to get plan list:", error); // 获取计划列表失败
+          this.$message.error("Failed to fetch data, please retry"); // 获取数据失败，请重试
       }
     },
 
-    // 处理查询操作（校验参数+调用列表接口）
+    // Handle query operation (validate parameters + call list API) / 处理查询操作（校验参数+调用列表接口）
     handleQuery() {
-      // 深拷贝查询参数（避免修改原数据）
+      // Deep copy query parameters (avoid modifying original data) / 深拷贝查询参数（避免修改原数据）
       const params = JSON.parse(JSON.stringify(this.queryParams));
 
-      // 1. 时间范围校验（开始时间不能晚于结束时间）
+      // 1. Time range validation (start time cannot be later than end time) / 时间范围校验（开始时间不能晚于结束时间）
       if (params.startDate && params.endDate) {
         const start = new Date(params.startDate);
         const end = new Date(params.endDate);
         if (start > end) {
-          this.$message.warning("开始时间不能晚于结束时间");
+          this.$message.warning("Start time cannot be later than end time"); // 开始时间不能晚于结束时间
           return;
         }
       }
 
-      // 3. 调用列表接口（带查询参数）
+      // 3. Call list API (with query parameters) / 调用列表接口（带查询参数）
       this.btnLoading = true;
       this.getList(params);
     },
 
-    // 重置查询表单（清空参数+重新加载列表）
+    // Reset query form (clear parameters + reload list) / 重置查询表单（清空参数+重新加载列表）
     handleReset() {
-      // 清空表单字段（依赖表单ref="queryForm"）
+      // Clear form fields (depends on form ref="queryForm") / 清空表单字段（依赖表单ref="queryForm"）
       if (this.$refs.queryForm) {
         this.$refs.queryForm.resetFields();
       }
-      // 重新加载列表（无查询参数）
+      // Reload list (no query parameters) / 重新加载列表（无查询参数）
       this.getList();
     },
 
-    // 表格行点击事件（记录当前选中行）
+    // Table row click event (record current selected row) / 表格行点击事件（记录当前选中行）
     handleRowClick(row) {
-      this.currentRow = { ...row }; // 深拷贝避免引用修改
+      this.currentRow = { ...row }; // Deep copy to avoid reference modification / 深拷贝避免引用修改
       this.fetchSpmParams()
     },
 
-    // 新增计划（重置表单+打开弹窗）
+    // Add plan (reset form + open dialog) / 新增计划（重置表单+打开弹窗）
     handleAdd() {
-      this.dialogTitle = this.$t('plan.addPlan'); // 设置弹窗标题
-      // 重置表单数据（默认值与接口要求对齐）
+      this.dialogTitle = "Add Plan"; // Set dialog title / 设置弹窗标题
+      // Reset form data (default values aligned with API requirements) / 重置表单数据（默认值与接口要求对齐）
       this.form = {
         dummyCoilFlag: 0,
         tlvFlag: 0,
@@ -829,11 +901,12 @@ export default {
         seqid: null,
         coilid: "",
         unitCode: "",
-        status: "NEW",  // 新增计划默认状态为 NEW
+        status: "NEW",  // Default status for new plan is NEW / 新增计划默认状态为 NEW
         planid: "",
         planType: "",
         originCoilid: "",
         yieldPoint: null,
+        zincCoatingThickness: null,
         entryWeight: null,
         entryThick: null,
         entryWidth: null,
@@ -921,7 +994,7 @@ export default {
       };
       this.spmFlag = false
 
-      // 打开弹窗+清空表单验证状态
+      // Open dialog + clear form validation state / 打开弹窗+清空表单验证状态
       this.dialogVisible = true;
       this.$nextTick(() => {
         if (this.$refs.form) {
@@ -930,26 +1003,26 @@ export default {
       });
     },
 
-    // 编辑计划（回显行数据+打开弹窗）
+    // Edit plan (echo row data + open dialog) / 编辑计划（回显行数据+打开弹窗）
     handleUpdate(row) {
-      this.dialogTitle = this.$t('plan.edit'); // 设置弹窗标题
-      // 深拷贝行数据（避免修改原表格数据）
+      this.dialogTitle = "Edit Plan"; // Set dialog title / 设置弹窗标题
+      // Deep copy row data (avoid modifying original table data) / 深拷贝行数据（避免修改原表格数据）
       this.form = JSON.parse(JSON.stringify(row));
       this.spmFlag = false
 
-      // 1. ID转字符串（避免精度丢失）
+      // 1. Convert ID to string (avoid precision loss) / ID转字符串（避免精度丢失）
       this.form.id = this.form.id !== null && this.form.id !== undefined ? String(this.form.id) : "";
 
-      // 2. 数值字段格式化（确保为number类型，适配接口要求）
+      // 2. Format numeric fields (ensure number type, adapt to API requirements) / 数值字段格式化（确保为number类型，适配接口要求）
       this.formatFormNumericFields(this.form);
 
-      // 3. 日期字段处理（后端返回为格式化字符串，转为Date对象适配表单组件）
+      // 3. Date field processing (backend returns formatted string, convert to Date object for form component) / 日期字段处理（后端返回为格式化字符串，转为Date对象适配表单组件）
       const dateFields = ["startDate", "endDate", "onlineDate", "furInDate", "furOutDate"];
       dateFields.forEach((field) => {
         this.form[field] = this.form[field] ? new Date(this.form[field]) : null;
       });
 
-      // 4. 打开弹窗+清空验证状态
+      // 4. Open dialog + clear validation state / 打开弹窗+清空验证状态
       this.dialogVisible = true;
       this.$nextTick(() => {
         if (this.$refs.form) {
@@ -958,9 +1031,9 @@ export default {
       });
     },
 
-    // 格式化表单数值字段（统一转为number/null，适配接口类型要求）
+    // Format form numeric fields (unified conversion to number/null, adapt to API type requirements) / 格式化表单数值字段（统一转为number/null，适配接口类型要求）
     formatFormNumericFields(formData) {
-      // 所有需转为number类型的字段（与接口参数对齐）
+      // All fields that need to be converted to number type (aligned with API parameters) / 所有需转为number类型的字段（与接口参数对齐）
       const numericFields = [
         "seqid", "dummyCoilFlag", "status", "tlvFlag", "splitNum", "headSampleNum", "tailSampleNum",
         "spmFlag", "trimFlag", "chromating", "oilingFlag", "yieldPoint", "entryWeight", "entryThick",
@@ -972,11 +1045,11 @@ export default {
         "exitWeight6", "headSampleLength", "tailSampleLength", "spmElongation", "spmRollforce",
         "spmBendingForce", "spmCrimpingRollMesh", "spmBillyRollMesh", "tlvElongation", "oilingTop",
         "oilingBottom", "aimWeightTop", "aimWeightBottom", "maxTolWeightTop", "maxTolWeightBottom",
-        "headendGaugeLength", "tailendGaugeLength"
+        "headendGaugeLength", "tailendGaugeLength", "zincCoatingThickness"  // 添加锌层厚度字段
       ];
 
       numericFields.forEach((field) => {
-        // 空值/空字符串转为null，非空值转为number
+        // Convert empty value/empty string to null, non-empty value to number / 空值/空字符串转为null，非空值转为number
         if (formData[field] === "" || formData[field] === null || formData[field] === undefined) {
           formData[field] = null;
         } else {
@@ -985,76 +1058,76 @@ export default {
       });
     },
 
-    // 删除计划（单个删除，支持批量扩展）
+    // Delete plan (single delete, supports batch extension) / 删除计划（单个删除，支持批量扩展）
     handleDelete(row) {
-      // 弹窗确认（危险操作二次确认）
-      this.$confirm(`确定删除ID: ${row.id} 的计划?`, this.$t('plan.confirmDelete'), {
+      // Dialog confirmation (dangerous operation requires secondary confirmation) / 弹窗确认（危险操作二次确认）
+      this.$confirm(`Are you sure to delete plan with ID: ${row.id}?`, "Confirm Delete", {
         type: "danger",
-        confirmButtonText: this.$t('plan.confirm'),
-        cancelButtonText: this.$t('plan.cancel')
+        confirmButtonText: "Confirm", // 确认
+        cancelButtonText: "Cancel" // 取消
       })
         .then(() => {
-          row.deleteLoading = true; // 开启行删除按钮加载
-          // 调用删除接口（传入ID数组，支持批量扩展）
+          row.deleteLoading = true; // Enable row delete button loading / 开启行删除按钮加载
+          // Call delete API (pass ID array, supports batch extension) / 调用删除接口（传入ID数组，支持批量扩展）
           delPlan([row.id])
             .then((res) => {
-              row.deleteLoading = false; // 关闭加载
-              this.$message.success(this.$t('plan.deleteSuccess'));
-              this.getList(); // 重新加载列表
+              row.deleteLoading = false; // Close loading / 关闭加载
+              this.$message.success("Delete successful"); // 删除成功
+              this.getList(); // Reload list / 重新加载列表
             })
             .catch((err) => {
-              row.deleteLoading = false; // 关闭加载
-              console.error("删除计划失败:", err);
-              this.$message.error(this.$t('plan.deleteFailed'));
+              row.deleteLoading = false; // Close loading / 关闭加载
+              console.error("Failed to delete plan:", err); // 删除计划失败
+              this.$message.error("Delete failed, please retry"); // 删除失败，请重试
             });
         })
     },
 
-    // 保存表单（新增/编辑统一处理）
+    // Save form (unified handling for add/edit) / 保存表单（新增/编辑统一处理）
     submitForm() {
-      // 1. 表单验证（依赖表单ref="form"）
+      // 1. Form validation (depends on form ref="form") / 表单验证（依赖表单ref="form"）
       this.$refs.form.validate((valid) => {
-        if (!valid) return; // 验证不通过则终止
+        if (!valid) return; // Validation failed, terminate / 验证不通过则终止
 
-        // 2. 深拷贝表单数据（避免修改原数据）
+        // 2. Deep copy form data (avoid modifying original data) / 深拷贝表单数据（避免修改原数据）
         const formData = JSON.parse(JSON.stringify(this.form));
 
-        // 3. 时间范围校验（开始时间不能晚于结束时间）
+        // 3. Time range validation (start time cannot be later than end time) / 时间范围校验（开始时间不能晚于结束时间）
         if (formData.startDate && formData.endDate) {
           const start = new Date(formData.startDate);
           const end = new Date(formData.endDate);
           if (start > end) {
-            this.$message.warning(this.$t('plan.startTimeNotLaterThanEndTime'));
+            this.$message.warning("Start time cannot be later than end time"); // 开始时间不能晚于结束时间
             return;
           }
         }
 
-        // 4. 数值字段格式化（确保与接口类型一致）
+        // 4. Format numeric fields (ensure consistent with API types) / 数值字段格式化（确保与接口类型一致）
         this.formatFormNumericFields(formData);
 
-        // 8. 调用新增/编辑接口
-        this.saveLoading = true; // 开启保存按钮加载
+        // 8. Call add/edit API / 调用新增/编辑接口
+        this.saveLoading = true; // Enable save button loading / 开启保存按钮加载
         const request = formData.id ? updatePlan(formData) : addPlan(formData);
 
         request
           .then((res) => {
-            this.saveLoading = false; // 关闭加载
-            console.log("服务器响应:", res);
+            this.saveLoading = false; // Close loading / 关闭加载
+            console.log("Server response:", res); // 服务器响应
             if (res.code === 200) {
-              this.$message.success(formData.id ? this.$t('plan.updateSuccess') : this.$t('plan.addSuccess'));
-              this.dialogVisible = false; // 关闭弹窗
-              this.getList(); // 重新加载列表
+              this.$message.success(formData.id ? "Update plan successful" : "Add plan successful"); // 更新计划成功 / 新增计划成功
+              this.dialogVisible = false; // Close dialog / 关闭弹窗
+              this.getList(); // Reload list / 重新加载列表
             } else {
-              this.$message.error(res.msg || (formData.id ? this.$t('plan.updateFailed') : this.$t('plan.addFailed')));
+              this.$message.error(res.msg || (formData.id ? "Update failed" : "Add failed")); // 更新失败 / 新增失败
             }
           })
           .catch((err) => {
-            this.saveLoading = false; // 关闭加载
-            console.error(`${formData.id ? "更新" : "新增"}计划失败:`, err);
-            this.$message.error(`${formData.id ? "更新" : "新增"}失败，请重试`);
+            this.saveLoading = false; // Close loading / 关闭加载
+            console.error(`${formData.id ? "Update" : "Add"} plan failed:`, err); // 更新/新增计划失败
+            this.$message.error(`${formData.id ? "Update" : "Add"} failed, please retry`); // 更新/新增失败，请重试
           });
 
-        // 如果是新增计划并且勾选了生成工艺参数，则生成工艺参数
+        // If it's a new plan and process parameter generation is checked, generate process parameters / 如果是新增计划并且勾选了生成工艺参数，则生成工艺参数
         if (!formData.id && this.spmFlag) {
           this.generateSpmParams();
         }
@@ -1062,7 +1135,7 @@ export default {
     },
 
     fetchSpmParams() {
-      console.log("获取工艺参数");
+      console.log("Get process parameters"); // 获取工艺参数
       this.setupLoading = true
       listSetup({
         coilid: this.currentRow.coilid,
@@ -1083,7 +1156,7 @@ export default {
         planid: this.form.planid,
         ...this.setupForm
       }).then(res => {
-        this.$message.success("工艺参数创建成功");
+        this.$message.success("Process parameters created successfully"); // 工艺参数创建成功
       })
     }
   },
diff --git a/apps/l2/src/views/l2/report/components/body.vue b/apps/l2/src/views/l2/report/components/body.vue
index 09a5e12..116343b 100644
--- a/apps/l2/src/views/l2/report/components/body.vue
+++ b/apps/l2/src/views/l2/report/components/body.vue
@@ -1,22 +1,12 @@
 <template>
   <div class="report-body">
-    <!-- 操作行 -->
+    <!-- Action row / 操作行 -->
     <div class="report-actions">
-      <el-button type="primary" @click="exportReport" icon="el-icon-download" size="small">导出报表</el-button>
+      <el-button type="primary" @click="exportReport" icon="el-icon-download" size="small">Export Report</el-button>
+      <!-- 导出报表 -->
     </div>
-    <div class="overview-bar">
-      <div class="overview-left">
-        <div class="overview-title">{{ title }}</div>
-        <div class="overview-meta">
-          <span>报表类型：{{ overviewInfo.reportLabel || '-' }}</span>
-          <span>时间范围：{{ overviewInfo.rangeText || '-' }}</span>
-        </div>
-      </div>
-      <div class="overview-actions">
-        <el-tag size="mini" effect="dark">{{ overviewInfo.reportLabel || '-' }}</el-tag>
-      </div>
-    </div>
-    <h1 class="report-body-title">总览数据</h1>
+    <h1 class="report-body-title">Overview Data</h1>
+    <!-- 总览数据 -->
     <div class="summary-cards" v-if="summary.length > 0">
       <div v-for="(item, index) in summary" :key="index">
         <span class="card-title">{{ item.label }}</span>
@@ -43,7 +33,8 @@
           </tbody>
         </table>
       </div>
-      <el-empty v-else description="暂无数据" />
+      <el-empty v-else description="No data" />
+      <!-- 暂无数据 -->
     </div>
   </div>
 </template>
@@ -86,13 +77,13 @@ export default {
       return value
     },
     exportReport() {
-      // 创建工作簿
+      // Create workbook / 创建工作簿
       const workbook = XLSX.utils.book_new();
 
-      // 准备导出数据数组
+      // Prepare export data array / 准备导出数据数组
       const exportData = [];
 
-      // 处理表格数据，确保按columns定义的顺序和标签导出
+      // Process table data, ensure export in order and labels defined by columns / 处理表格数据，确保按columns定义的顺序和标签导出
       const tableData = this.dataset.map(row => {
         const formattedRow = {};
         this.columns.forEach(col => {
@@ -101,23 +92,23 @@ export default {
         return formattedRow;
       });
 
-      // 添加表格数据
+      // Add table data / 添加表格数据
       exportData.push(...tableData);
 
-      // 创建工作表
+      // Create worksheet / 创建工作表
       const worksheet = XLSX.utils.json_to_sheet(exportData);
 
-      // 调整列宽
+      // Adjust column width / 调整列宽
       const columnWidths = this.columns.map(col => ({ wch: Math.max(col.label.length * 1.5, 10) }));
       worksheet['!cols'] = columnWidths;
 
-      // 添加工作表到工作簿
-      XLSX.utils.book_append_sheet(workbook, worksheet, '报表数据');
+      // Add worksheet to workbook / 添加工作表到工作簿
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Report Data'); // 报表数据
 
-      // 生成文件名
+      // Generate file name / 生成文件名
       const exportFileName = this.fileName || `${this.title.replace(/[\\/*?:"<>|]/g, '')}_${new Date().toLocaleDateString()}.xlsx`;
 
-      // 导出文件
+      // Export file / 导出文件
       XLSX.writeFile(workbook, exportFileName);
     }
   }
diff --git a/apps/l2/src/views/l2/report/components/pdo.vue b/apps/l2/src/views/l2/report/components/pdo.vue
index 23664a1..f0ddb0c 100644
--- a/apps/l2/src/views/l2/report/components/pdo.vue
+++ b/apps/l2/src/views/l2/report/components/pdo.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="pdo-report">
-    <ReportBody v-loading="loading" title="实绩报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <ReportBody v-loading="loading" title="Performance Report" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <!-- 实绩报表 -->
   </div>
 </template>
 
@@ -26,29 +27,29 @@ export default {
       this.loading = true
       const res = await getReportSummary()
       this.reportSummary = [
-        { label: '成品卷数', value: res.coilCount }, // coilCount=总卷数，结合“成品总重/原料总重”场景，推测为成品卷数
-        { label: '平均出口厚度[mm]', value: res.avgExitThickness }, // avgExitThickness=平均出口厚度，厚度用“平均”更符合实际（单卷厚度均匀，无“总厚度”概念）
-        { label: '原料总重[t]', value: res.totalEntryWeight }, // totalEntryWeight=总入口重量，入口重量即原料重量
-        { label: '总出口长度[mm]', value: res.totalExitLength }, // totalExitLength=总出口长度，补充原“去锌总重”（无对应字段）的空缺，符合卷材加工的核心维度
-        { label: '平均出口宽度[mm]', value: res.avgExitWidth }, // avgExitWidth=平均出口宽度，宽度用“平均”更合理（单卷宽度固定，“总宽度”无业务意义）
-        { label: '成品总重[t]', value: res.totalActualWeight }, // totalActualWeight=总实际重量，实际重量即成品最终重量
-        { label: '总理论重量[t]', value: res.totalTheoryWeight }, // totalTheoryWeight=总理论重量，工业场景中常用“理论重量vs实际重量”对比
-        { label: '成材率', value: (res.yieldRate * 100).toFixed(2) + '%' } // yieldRate=成材率，原配置正确，保留
+        { label: 'Finished Coil Count', value: res.coilCount }, // 成品卷数 - coilCount=总卷数，结合"成品总重/原料总重"场景，推测为成品卷数
+        { label: 'Avg Exit Thickness [mm]', value: res.avgExitThickness }, // 平均出口厚度[mm] - avgExitThickness=平均出口厚度，厚度用"平均"更符合实际（单卷厚度均匀，无"总厚度"概念）
+        { label: 'Total Entry Weight [t]', value: res.totalEntryWeight }, // 原料总重[t] - totalEntryWeight=总入口重量，入口重量即原料重量
+        { label: 'Total Exit Length [mm]', value: res.totalExitLength }, // 总出口长度[mm] - totalExitLength=总出口长度，补充原"去锌总重"（无对应字段）的空缺，符合卷材加工的核心维度
+        { label: 'Avg Exit Width [mm]', value: res.avgExitWidth }, // 平均出口宽度[mm] - avgExitWidth=平均出口宽度，宽度用"平均"更合理（单卷宽度固定，"总宽度"无业务意义）
+        { label: 'Total Finished Weight [t]', value: res.totalActualWeight }, // 成品总重[t] - totalActualWeight=总实际重量，实际重量即成品最终重量
+        { label: 'Total Theory Weight [t]', value: res.totalTheoryWeight }, // 总理论重量[t] - totalTheoryWeight=总理论重量，工业场景中常用"理论重量vs实际重量"对比
+        { label: 'Yield Rate', value: (res.yieldRate * 100).toFixed(2) + '%' } // 成材率 - yieldRate=成材率，原配置正确，保留
       ];
       const res2 = await getReportDetail()
       this.reportDetail = res2
       this.columns = [
-        { label: '出口物料ID', prop: 'exitMatId' },
-        { label: '入口物料ID', prop: 'entryMatId' },
-        { label: '机组号', prop: 'groupNo' },
-        { label: '班次号', prop: 'shiftNo' },
-        { label: '钢种', prop: 'steelGrade' },
-        { label: '出口厚度(mm)', prop: 'exitThickness' },
-        { label: '出口宽度(mm)', prop: 'exitWidth' },
-        { label: '出口长度(m)', prop: 'exitLength' },
-        { label: '理论重量(kg)', prop: 'theoryWeight' },
-        { label: '实际重量(kg)', prop: 'actualWeight' },
-        { label: '上线时间', prop: 'onlineTime' },
+        { label: 'Exit Material ID', prop: 'exitMatId' }, // 出口物料ID
+        { label: 'Entry Material ID', prop: 'entryMatId' }, // 入口物料ID
+        { label: 'Group No', prop: 'groupNo' }, // 机组号
+        { label: 'Shift No', prop: 'shiftNo' }, // 班次号
+        { label: 'Steel Grade', prop: 'steelGrade' }, // 钢种
+        { label: 'Exit Thickness (mm)', prop: 'exitThickness' }, // 出口厚度(mm)
+        { label: 'Exit Width (mm)', prop: 'exitWidth' }, // 出口宽度(mm)
+        { label: 'Exit Length (m)', prop: 'exitLength' }, // 出口长度(m)
+        { label: 'Theory Weight (kg)', prop: 'theoryWeight' }, // 理论重量(kg)
+        { label: 'Actual Weight (kg)', prop: 'actualWeight' }, // 实际重量(kg)
+        { label: 'Online Time', prop: 'onlineTime' }, // 上线时间
       ]
       this.loading = false
     }
diff --git a/apps/l2/src/views/l2/report/components/roller.vue b/apps/l2/src/views/l2/report/components/roller.vue
index 8b40374..27e60d5 100644
--- a/apps/l2/src/views/l2/report/components/roller.vue
+++ b/apps/l2/src/views/l2/report/components/roller.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="roller-report">
-    <ReportBody v-loading="loading" title="换辊报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <ReportBody v-loading="loading" title="Roll Change Report" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <!-- 换辊报表 -->
   </div>
 </template>
 
@@ -30,18 +31,18 @@ export default {
       const res = await getRollHistorytList({ pageNum: 1, pageSize: 1000 })
       this.reportDetail = res.data.list
       this.columns = [
-        { label: '换辊号', prop: 'changeid' },
-        { label: '轧辊号', prop: 'rollid' },
-        { label: '类型', prop: 'type' },
-        { label: '位置', prop: 'position' },
-        { label: '直径', prop: 'diameter' },
-        { label: '粗糙度', prop: 'rough' },
-        { label: '凸度', prop: 'crown' },
-        { label: '轧制长度', prop: 'rolledLength' },
-        { label: '轧制重量', prop: 'rolledWeight' },
-        { label: '轧制次数', prop: 'rolledCount' },
-        { label: '上线时间', prop: 'instalTime' },
-        { label: '下线时间', 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.loading = false
     }
diff --git a/apps/l2/src/views/l2/report/components/stop.vue b/apps/l2/src/views/l2/report/components/stop.vue
index abd6475..1ed350c 100644
--- a/apps/l2/src/views/l2/report/components/stop.vue
+++ b/apps/l2/src/views/l2/report/components/stop.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="stop-report">
-    <ReportBody v-loading="loading" title="停机报表" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <ReportBody v-loading="loading" title="Stoppage Report" :summary="reportSummary" :dataset="reportDetail" :columns="columns" />
+    <!-- 停机报表 -->
   </div>
 </template>
 
@@ -19,14 +20,14 @@ export default {
       reportSummary: [],
       reportDetail: [],
       columns: [
-        { label: '钢卷号', prop: 'coilId' },
-        { label: '班次号', prop: 'shiftNo' },
-        { label: '组', prop: 'groupNo' },
-        { label: '开始时间', prop: 'startTime' },
-        { label: '结束时间', prop: 'endTime' },
-        { label: '持续时间[分钟]', prop: 'duration' },
-        { label: '停机类型', prop: 'type' },
-        { label: '备注', prop: 'remark' },
+        { label: 'Coil ID', prop: 'coilId' }, // 钢卷号
+        { label: 'Shift No', prop: 'shiftNo' }, // 班次号
+        { label: 'Group', prop: 'groupNo' }, // 组
+        { label: 'Start Time', prop: 'startTime' }, // 开始时间
+        { label: 'End Time', prop: 'endTime' }, // 结束时间
+        { label: 'Duration [min]', prop: 'duration' }, // 持续时间[分钟]
+        { label: 'Stoppage Type', prop: 'type' }, // 停机类型
+        { label: 'Remark', prop: 'remark' }, // 备注
       ]
     }
   },
@@ -37,7 +38,7 @@ export default {
     async fetchReportData() {
       this.loading = true
       const res = await listStoppage({
-        // 只保留年月日YYYY-mm-dd
+        // Only keep YYYY-MM-dd format / 只保留年月日YYYY-mm-dd
         startDate: '2023-08-13',
         endDate: '2025-08-20'
       })
diff --git a/apps/l2/src/views/l2/report/pdo.vue b/apps/l2/src/views/l2/report/pdo.vue
index 09342dd..350d8ec 100644
--- a/apps/l2/src/views/l2/report/pdo.vue
+++ b/apps/l2/src/views/l2/report/pdo.vue
@@ -4,35 +4,43 @@
       <div class="header-title">
         <i class="el-icon-document"></i>
         <div class="title-text">
-          <span>实绩报表</span>
-          <small>请选择时间范围后查看数据</small>
+          <span>Performance Report</span>
+          <!-- 实绩报表 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
-      <el-tag size="small" effect="plain">实绩</el-tag>
+      <el-tag size="small" effect="plain">Performance</el-tag>
+      <!-- 实绩 -->
     </div>
 
     <div class="time-selector-card" v-if="!hasSelectedTime">
       <div class="selector-header">
         <i class="el-icon-calendar"></i>
-        <span>请选择查询时间范围</span>
+        <span>Please select query time range</span>
+        <!-- 请选择查询时间范围 -->
       </div>
       <div class="selector-content">
         <el-form :inline="true" size="small">
-          <el-form-item label="开始时间">
+          <el-form-item label="Start Time">
+            <!-- 开始时间 -->
+            <!-- Select start time / 选择开始时间 -->
             <el-date-picker
               v-model="timeRange.startTime"
               type="datetime"
-              placeholder="选择开始时间"
+              placeholder="Select start time"
               value-format="yyyy-MM-dd HH:mm:ss"
               style="width: 220px;"
               :clearable="false"
             />
           </el-form-item>
-          <el-form-item label="结束时间">
+          <el-form-item label="End Time">
+            <!-- 结束时间 -->
+            <!-- Select end time / 选择结束时间 -->
             <el-date-picker
               v-model="timeRange.endTime"
               type="datetime"
-              placeholder="选择结束时间"
+              placeholder="Select end time"
               value-format="yyyy-MM-dd HH:mm:ss"
               style="width: 220px;"
               :clearable="false"
@@ -40,9 +48,11 @@
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
-              查询
+              Query
             </el-button>
-            <el-button icon="el-icon-refresh" @click="handleTimeReset">重置</el-button>
+            <!-- 查询 -->
+            <el-button icon="el-icon-refresh" @click="handleTimeReset">Reset</el-button>
+            <!-- 重置 -->
           </el-form-item>
         </el-form>
       </div>
@@ -51,18 +61,23 @@
     <div class="report-content" v-else>
       <div class="content-toolbar">
         <div class="toolbar-info">
-          <span class="info-label">报表类型：</span>
-          <span class="info-value">实绩报表</span>
+          <span class="info-label">Report Type:</span>
+          <!-- 报表类型 -->
+          <span class="info-value">Performance Report</span>
+          <!-- 实绩报表 -->
           <span class="info-divider">|</span>
-          <span class="info-label">时间范围：</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">重新选择时间</el-button>
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Time Range</el-button>
+        <!-- 重新选择时间 -->
       </div>
-
+        <!-- 实绩报表 -->
       <ReportBody
         v-loading="loading"
-        title="实绩报表"
+        title="Performance Report"
+
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -82,7 +97,7 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true, // Directly show report content
       timeRange: {
         startTime: '',
         endTime: ''
@@ -98,16 +113,41 @@ export default {
     },
     displayTimeRange() {
       if (!this.canQuery) return '-'
-      return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
+      return `${this.timeRange.startTime} to ${this.timeRange.endTime}`
+      // 至
     },
     overviewInfo() {
       return {
-        reportLabel: '实绩报表',
+        reportLabel: 'Performance 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.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: '',
@@ -116,13 +156,13 @@ export default {
     },
     async handleTimeConfirm() {
       if (!this.canQuery) {
-        this.$message.warning('请选择完整的时间范围')
+        this.$message.warning('Please select complete time range') // 请选择完整的时间范围
         return
       }
       const start = new Date(this.timeRange.startTime)
       const end = new Date(this.timeRange.endTime)
       if (start > end) {
-        this.$message.warning('开始时间不能晚于结束时间')
+        this.$message.warning('Start time cannot be later than end time') // 开始时间不能晚于结束时间
         return
       }
       this.hasSelectedTime = true
@@ -130,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
@@ -141,18 +179,18 @@ 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 = [
-          { label: '成品卷数', value: res.coilCount },
-          { label: '平均出口厚度[mm]', value: res.avgExitThickness },
-          { label: '原料总重[t]', value: res.totalEntryWeight },
-          { label: '总出口长度[mm]', value: res.totalExitLength },
-          { label: '平均出口宽度[mm]', value: res.avgExitWidth },
-          { label: '成品总重[t]', value: res.totalActualWeight },
-          { label: '总理论重量[t]', value: res.totalTheoryWeight },
-          { label: '成材率', value: (res.yieldRate * 100).toFixed(2) + '%' }
+          { label: 'Finished Coil Count', value: res.coilCount }, // 成品卷数
+          { label: 'Avg Exit Thickness [mm]', value: res.avgExitThickness }, // 平均出口厚度[mm]
+          { label: 'Total Entry Weight [t]', value: res.totalEntryWeight }, // 原料总重[t]
+          { label: 'Total Exit Length [mm]', value: res.totalExitLength }, // 总出口长度[mm]
+          { label: 'Avg Exit Width [mm]', value: res.avgExitWidth }, // 平均出口宽度[mm]
+          { label: 'Total Finished Weight [t]', value: res.totalActualWeight }, // 成品总重[t]
+          { label: 'Total Theory Weight [t]', value: res.totalTheoryWeight }, // 总理论重量[t]
+          { label: 'Yield Rate', value: (res.yieldRate * 100).toFixed(2) + '%' } // 成材率
         ]
         const res2 = await getReportDetail(queryParams)
         this.reportDetail = (res2 || []).map(item => ({
@@ -160,21 +198,21 @@ export default {
           onlineTime: item.onlineTime ? item.onlineTime.replace('T', ' ') : ''
         }))
         this.columns = [
-          { label: '出口物料ID', prop: 'exitMatId' },
-          { label: '入口物料ID', prop: 'entryMatId' },
-          { label: '机组号', prop: 'groupNo' },
-          { label: '班次号', prop: 'shiftNo' },
-          { label: '钢种', prop: 'steelGrade' },
-          { label: '出口厚度(mm)', prop: 'exitThickness' },
-          { label: '出口宽度(mm)', prop: 'exitWidth' },
-          { label: '出口长度(m)', prop: 'exitLength' },
-          { label: '理论重量(t)', prop: 'theoryWeight' },
-          { label: '实际重量(t)', prop: 'actualWeight' },
-          { label: '上线时间', prop: 'onlineTime' }
+          { label: 'Exit Material ID', prop: 'exitMatId' }, // 出口物料ID
+          { label: 'Entry Material ID', prop: 'entryMatId' }, // 入口物料ID
+          { label: 'Group No', prop: 'groupNo' }, // 机组号
+          { label: 'Shift No', prop: 'shiftNo' }, // 班次号
+          { label: 'Steel Grade', prop: 'steelGrade' }, // 钢种
+          { label: 'Exit Thickness (mm)', prop: 'exitThickness' }, // 出口厚度(mm)
+          { label: 'Exit Width (mm)', prop: 'exitWidth' }, // 出口宽度(mm)
+          { label: 'Exit Length (m)', prop: 'exitLength' }, // 出口长度(m)
+          { label: 'Theory Weight (t)', prop: 'theoryWeight' }, // 理论重量(t)
+          { label: 'Actual Weight (t)', prop: 'actualWeight' }, // 实际重量(t)
+          { label: 'Online Time', prop: 'onlineTime' } // 上线时间
         ]
       } catch (error) {
         console.error(error)
-        this.$message.error('获取报表数据失败')
+        this.$message.error('Failed to fetch report data') // 获取报表数据失败
       } finally {
         this.loading = false
       }
@@ -293,4 +331,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/l2/report/roller.vue b/apps/l2/src/views/l2/report/roller.vue
index 981a11f..81bdd59 100644
--- a/apps/l2/src/views/l2/report/roller.vue
+++ b/apps/l2/src/views/l2/report/roller.vue
@@ -4,35 +4,39 @@
       <div class="header-title">
         <i class="el-icon-document"></i>
         <div class="title-text">
-          <span>换辊报表</span>
-          <small>请选择时间范围后查看数据</small>
+          <span>Roll Change Report</span>
+          <!-- 换辊报表 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
-      <el-tag size="small" effect="plain">换辊</el-tag>
+      <el-tag size="small" effect="plain">Roll Change</el-tag>
+      <!-- 换辊 -->
     </div>
 
     <div class="time-selector-card" v-if="!hasSelectedTime">
       <div class="selector-header">
         <i class="el-icon-calendar"></i>
-        <span>请选择查询时间范围</span>
+        <span>Please select query time range</span>
+        <!-- 请选择查询时间范围 -->
       </div>
       <div class="selector-content">
         <el-form :inline="true" size="small">
-          <el-form-item label="开始时间">
+          <el-form-item label="Start Time">
             <el-date-picker
               v-model="timeRange.startTime"
               type="datetime"
-              placeholder="选择开始时间"
+              placeholder="Select start time"
               value-format="yyyy-MM-dd HH:mm:ss"
               style="width: 220px;"
               :clearable="false"
             />
           </el-form-item>
-          <el-form-item label="结束时间">
+          <el-form-item label="End Time">
             <el-date-picker
               v-model="timeRange.endTime"
               type="datetime"
-              placeholder="选择结束时间"
+              placeholder="Select end time"
               value-format="yyyy-MM-dd HH:mm:ss"
               style="width: 220px;"
               :clearable="false"
@@ -40,9 +44,9 @@
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
-              查询
+              Query
             </el-button>
-            <el-button icon="el-icon-refresh" @click="handleTimeReset">重置</el-button>
+            <el-button icon="el-icon-refresh" @click="handleTimeReset">Reset</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -51,18 +55,18 @@
     <div class="report-content" v-else>
       <div class="content-toolbar">
         <div class="toolbar-info">
-          <span class="info-label">报表类型：</span>
-          <span class="info-value">换辊报表</span>
+          <span class="info-label">Report Type:</span>
+          <span class="info-value">Roll Change Report</span>
           <span class="info-divider">|</span>
-          <span class="info-label">时间范围：</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">重新选择时间</el-button>
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Time Range</el-button>
       </div>
 
       <ReportBody
         v-loading="loading"
-        title="换辊报表"
+        title="Roll Change Report"
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -82,7 +86,7 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true,
       timeRange: {
         startTime: '',
         endTime: ''
@@ -98,16 +102,39 @@ export default {
     },
     displayTimeRange() {
       if (!this.canQuery) return '-'
-      return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
+      return `${this.timeRange.startTime} to ${this.timeRange.endTime}`
     },
     overviewInfo() {
       return {
-        reportLabel: '换辊报表',
+        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: '',
@@ -116,11 +143,11 @@ export default {
     },
     async handleTimeConfirm() {
       if (!this.canQuery) {
-        this.$message.warning('请选择完整的时间范围')
+        this.$message.warning('Please select complete time range')
         return
       }
       if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
-        this.$message.warning('开始时间不能晚于结束时间')
+        this.$message.warning('Start time cannot be later than end time')
         return
       }
       this.hasSelectedTime = true
@@ -128,9 +155,6 @@ export default {
     },
     handleReturn() {
       this.hasSelectedTime = false
-      this.handleTimeReset()
-      this.reportSummary = []
-      this.reportDetail = []
     },
     async fetchReportData() {
       this.loading = true
@@ -146,26 +170,26 @@ export default {
           ...item
         }))
         this.columns = [
-          { label: '换辊号', prop: 'changeid' },
-          { label: '轧辊号', prop: 'rollid' },
-          { label: '类型', prop: 'type' },
-          { label: '位置', prop: 'position' },
-          { label: '直径', prop: 'diameter' },
-          { label: '粗糙度', prop: 'rough' },
-          { label: '凸度', prop: 'crown' },
-          { label: '轧制长度', prop: 'rolledLength' },
-          { label: '轧制重量', prop: 'rolledWeight' },
-          { label: '轧制次数', prop: 'rolledCount' },
-          { label: '上线时间', prop: 'instalTime' },
-          { label: '下线时间', 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: '数据条数', value: this.reportDetail.length },
-          { label: '时间范围', value: this.displayTimeRange }
+          { label: 'Data Count', value: this.reportDetail.length },
+          { label: 'Time Range', value: this.displayTimeRange }
         ]
       } catch (error) {
         console.error(error)
-        this.$message.error('获取报表数据失败')
+        this.$message.error('Failed to fetch report data')
       } finally {
         this.loading = false
       }
@@ -284,4 +308,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/l2/report/stop.vue b/apps/l2/src/views/l2/report/stop.vue
index e6475cc..8355abf 100644
--- a/apps/l2/src/views/l2/report/stop.vue
+++ b/apps/l2/src/views/l2/report/stop.vue
@@ -4,35 +4,38 @@
       <div class="header-title">
         <i class="el-icon-document"></i>
         <div class="title-text">
-          <span>{{ $t('report.stop.title') }}</span>
-          <small>{{ $t('report.stop.subtitle') }}</small>
+          <span>Stoppage Report</span>
+          <!-- 停机报表 -->
+          <small>Displaying data for the last month by default</small>
+          <!-- 默认展示近一个月数据 -->
         </div>
       </div>
-      <el-tag size="small" effect="plain">{{ $t('report.stop.stopTag') }}</el-tag>
+      <el-tag size="small" effect="plain">Stoppage</el-tag>
+      <!-- 停机 -->
     </div>
 
     <div class="time-selector-card" v-if="!hasSelectedTime">
       <div class="selector-header">
         <i class="el-icon-calendar"></i>
-        <span>{{ $t('report.stop.pleaseSelectDateRange') }}</span>
+        <span>Please select query date range</span>
       </div>
       <div class="selector-content">
         <el-form :inline="true" size="small">
-          <el-form-item :label="$t('report.stop.startDate')">
+          <el-form-item label="Start Date">
             <el-date-picker
               v-model="timeRange.startTime"
               type="date"
-              :placeholder="$t('report.stop.chooseStartDate')"
+              placeholder="Select start date"
               value-format="yyyy-MM-dd"
               style="width: 200px;"
               :clearable="false"
             />
           </el-form-item>
-          <el-form-item :label="$t('report.stop.endDate')">
+          <el-form-item label="End Date">
             <el-date-picker
               v-model="timeRange.endTime"
               type="date"
-              :placeholder="$t('report.stop.chooseEndDate')"
+              placeholder="Select end date"
               value-format="yyyy-MM-dd"
               style="width: 200px;"
               :clearable="false"
@@ -40,9 +43,9 @@
           </el-form-item>
           <el-form-item>
             <el-button type="primary" :disabled="!canQuery" icon="el-icon-search" @click="handleTimeConfirm">
-              {{ $t('report.stop.query') }}
+              Query
             </el-button>
-            <el-button icon="el-icon-refresh" @click="handleTimeReset">{{ $t('report.stop.reset') }}</el-button>
+            <el-button icon="el-icon-refresh" @click="handleTimeReset">Reset</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -51,18 +54,18 @@
     <div class="report-content" v-else>
       <div class="content-toolbar">
         <div class="toolbar-info">
-          <span class="info-label">{{ $t('report.stop.reportType') }}</span>
-          <span class="info-value">{{ $t('report.stop.title') }}</span>
+          <span class="info-label">Report Type:</span>
+          <span class="info-value">Stoppage Report</span>
           <span class="info-divider">|</span>
-          <span class="info-label">{{ $t('report.stop.timeRange') }}</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">{{ $t('report.stop.reselectTime') }}</el-button>
+        <el-button type="text" icon="el-icon-refresh-left" @click="handleReturn">Change Date Range</el-button>
       </div>
 
       <ReportBody
         v-loading="loading"
-        :title="$t('report.stop.title')"
+        title="Stoppage Report"
         :summary="reportSummary"
         :dataset="reportDetail"
         :columns="columns"
@@ -82,13 +85,23 @@ export default {
   data() {
     return {
       loading: false,
-      hasSelectedTime: false,
+      hasSelectedTime: true,
       timeRange: {
         startTime: '',
         endTime: ''
       },
       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' }
+      ]
     }
   },
   computed: {
@@ -97,28 +110,36 @@ export default {
     },
     displayTimeRange() {
       if (!this.canQuery) return '-'
-      return `${this.timeRange.startTime} 至 ${this.timeRange.endTime}`
-    },
-    columns() {
-      return [
-        { label: this.$t('report.stop.coilid'), prop: 'coilid' },
-        { label: this.$t('report.stop.shift'), prop: 'shift' },
-        { label: this.$t('report.stop.area'), prop: 'area' },
-        { label: this.$t('report.stop.startTime'), prop: 'startDate' },
-        { label: this.$t('report.stop.endTime'), prop: 'endDate' },
-        { label: this.$t('report.stop.duration'), prop: 'duration' },
-        { label: this.$t('report.stop.stopType'), prop: 'unit' },
-        { label: this.$t('report.stop.remark'), prop: 'remark' }
-      ]
+      return `${this.timeRange.startTime} to ${this.timeRange.endTime}`
     },
     overviewInfo() {
       return {
-        reportLabel: this.$t('report.stop.title'),
+        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: '',
@@ -127,11 +148,11 @@ export default {
     },
     async handleTimeConfirm() {
       if (!this.canQuery) {
-        this.$message.warning('请选择完整的日期范围')
+        this.$message.warning('Please select complete date range')
         return
       }
       if (new Date(this.timeRange.startTime) > new Date(this.timeRange.endTime)) {
-        this.$message.warning('开始日期不能晚于结束日期')
+        this.$message.warning('Start date cannot be later than end date')
         return
       }
       this.hasSelectedTime = true
@@ -139,9 +160,6 @@ export default {
     },
     handleReturn() {
       this.hasSelectedTime = false
-      this.handleTimeReset()
-      this.reportSummary = []
-      this.reportDetail = []
     },
     async fetchReportData() {
       this.loading = true
@@ -157,14 +175,14 @@ export default {
 
         const res2 = await getStoppageSummary(queryParams)
         this.reportSummary = [
-          { label: '统计区间', value: this.displayTimeRange },
-          { label: '停机次数', value: res2.data?.[0] || 0 },
-          { label: '停机时长[小时]', value: res2.data?.[1] || 0 },
-          { label: '作业率', 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('获取报表数据失败')
+        this.$message.error('Failed to fetch report data')
       } finally {
         this.loading = false
       }
@@ -243,7 +261,7 @@ export default {
 
   .selector-content {
     width: 100%;
-    max-width: 600px;
+    max-width: 640px;
     padding: 0 20px;
   }
 }
@@ -283,4 +301,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/l2/roller/components/filter.vue b/apps/l2/src/views/l2/roller/components/filter.vue
index 7cd029f..d6d64d5 100644
--- a/apps/l2/src/views/l2/roller/components/filter.vue
+++ b/apps/l2/src/views/l2/roller/components/filter.vue
@@ -2,39 +2,47 @@
   <div class="filter-container">
     <div class="filter-panel">
       <div class="panel-header">
-        <h4>{{ $t('roller.historySearch') }}</h4>
+        <h4>History Search</h4>
+        <!-- 历史检索 -->
       </div>
       <div class="filter-item">
-        <div class="filter-label">• {{ $t('roller.byTime') }}</div>
+        <div class="filter-label">• By Time</div>
+        <!-- 按时间 -->
         <div class="filter-content time-range">
-          <div class="time-label">{{ $t('roller.startTime') }}：</div>
+          <div class="time-label">Start Time:</div>
+          <!-- 开始时间 -->
+          <!-- Select Date / 选择日期 -->
           <el-date-picker
             v-model="startDate"
             type="date"
-            :placeholder="$t('roller.selectDate')"
+            placeholder="Select Date"
             value-format="yyyy-MM-dd"
             style="width: 140px"
           ></el-date-picker>
+          <!-- Select Time / 选择时间 -->
           <el-time-picker
             v-model="startTime"
             format="HH:mm"
-            :placeholder="$t('roller.selectTime')"
+            placeholder="Select Time"
             value-format="HH:mm"
             style="width: 140px; margin-left: 5px"
           ></el-time-picker>
           
-          <div class="time-label" style="margin-top: 10px">{{ $t('roller.endTime') }}：</div>
+          <div class="time-label" style="margin-top: 10px">End Time:</div>
+          <!-- 结束时间 -->
+          <!-- Select Date / 选择日期 -->
           <el-date-picker
             v-model="endDate"
             type="date"
-            :placeholder="$t('roller.selectDate')"
+            placeholder="Select Date"
             value-format="yyyy-MM-dd"
             style="width: 140px"
           ></el-date-picker>
+          <!-- Select Time / 选择时间 -->
           <el-time-picker
             v-model="endTime"
             format="HH:mm"
-            :placeholder="$t('roller.selectTime')"
+            placeholder="Select Time"
             value-format="HH:mm"
             style="width: 140px; margin-left: 5px"
           ></el-time-picker>
@@ -42,10 +50,13 @@
       </div>
       
       <div class="filter-item">
-        <div class="filter-label">• {{ $t('roller.byChangeId') }}</div>
+        <div class="filter-label">• By Change ID</div>
+        <!-- 按换辊号 -->
         <div class="filter-content">
-          <div class="input-label">{{ $t('roller.changeId') }}：</div>
-          <el-select filterable v-model="queryParams.changeId" :placeholder="$t('roller.pleaseSelect')" clearable style="width: 240px">
+          <div class="input-label">Change ID:</div>
+          <!-- 换辊号 -->
+          <!-- Please select / 请选择 -->
+          <el-select filterable v-model="queryParams.changeId" placeholder="Please select" clearable style="width: 240px">
             <el-option
               v-for="item in changeIdOptions"
               :key="item"
@@ -57,10 +68,13 @@
       </div>
 
       <div class="filter-item">
-        <div class="filter-label">• {{ $t('roller.byRollId') }}</div>
+        <div class="filter-label">• By Roll ID</div>
+        <!-- 按轧辊号 -->
         <div class="filter-content">
-          <div class="input-label">{{ $t('roller.rollId') }}：</div>
-          <el-select filterable v-model="queryParams.rollId" :placeholder="$t('roller.pleaseSelect')" clearable style="width: 240px">
+          <div class="input-label">Roll ID:</div>
+          <!-- 轧辊号 -->
+          <!-- Please select / 请选择 -->
+          <el-select filterable v-model="queryParams.rollId" placeholder="Please select" clearable style="width: 240px">
             <el-option
               v-for="item in rollIdOptions"
               :key="item"
@@ -72,8 +86,10 @@
       </div>
       
       <div class="filter-buttons">
-        <el-button type="primary" @click="handleSearch">{{ $t('roller.query') }}</el-button>
-        <el-button @click="resetQuery">{{ $t('roller.reset') }}</el-button>
+        <el-button type="primary" @click="handleSearch">Query</el-button>
+        <!-- 查询 -->
+        <el-button @click="resetQuery">Reset</el-button>
+        <!-- 重置 -->
       </div>
     </div>
   </div>
@@ -86,7 +102,7 @@ export default {
   name: 'RollerFilter',
   data() {
     return {
-      // 查询参数
+      // Query parameters / 查询参数
       queryParams: {
         changeId: '',
         rollId: ''
@@ -95,47 +111,47 @@ export default {
       startTime: '',
       endDate: '',
       endTime: '',
-      // 换辊号选项
+      // Change ID options / 换辊号选项
       changeIdOptions: [],
-      // 轧辊号选项
+      // Roll ID options / 轧辊号选项
       rollIdOptions: []
     }
   },
   created() {
-    // 获取换辊号和轧辊号列表
+    // Get change ID and roll ID lists / 获取换辊号和轧辊号列表
     this.getChangeIdOptions()
     this.getRollIdOptions()
 
     this.setDefaultTimeRange()
   },
   methods: {
-    // 获取换辊号列表
+    // Get change ID list / 获取换辊号列表
     getChangeIdOptions() {
       getChangeIdList().then(res => {
-        console.log('换辊号列表响应:', res)
+        console.log('Change ID list response:', res) // 换辊号列表响应
         if (res.code === 200 && res.data) {
           this.changeIdOptions = res.data
         } else {
-          this.$message.error(res.msg || this.$t('roller.getChangeIdListFailed'))
+          this.$message.error(res.msg || 'Failed to fetch change ID list') // 获取换辊号列表失败
         }
       }).catch(error => {
-        console.error('获取换辊号列表失败', error)
-        this.$message.error(this.$t('roller.getChangeIdListFailed') + '：' + (error.message || '未知错误'))
+        console.error('Failed to fetch change ID list', error) // 获取换辊号列表失败
+        this.$message.error('Failed to fetch change ID list: ' + (error.message || 'Unknown error')) // 获取换辊号列表失败：未知错误
       })
     },
     
-    // 获取轧辊号列表
+    // Get roll ID list / 获取轧辊号列表
     getRollIdOptions() {
       getRollIdList().then(res => {
-        console.log('轧辊号列表响应:', res)
+        console.log('Roll ID list response:', res) // 轧辊号列表响应
         if (res.code === 200 && res.data) {
           this.rollIdOptions = res.data
         } else {
-          this.$message.error(res.msg || this.$t('roller.getRollIdListFailed'))
+          this.$message.error(res.msg || 'Failed to fetch roll ID list') // 获取轧辊号列表失败
         }
       }).catch(error => {
-        console.error('获取轧辊号列表失败', error)
-        this.$message.error(this.$t('roller.getRollIdListFailed') + '：' + (error.message || '未知错误'))
+        console.error('Failed to fetch roll ID list', error) // 获取轧辊号列表失败
+        this.$message.error('Failed to fetch roll ID list: ' + (error.message || 'Unknown error')) // 获取轧辊号列表失败：未知错误
       })
     },
     
@@ -161,24 +177,24 @@ export default {
       this.endTime = this.formatTime(now)
     },
     
-    // 处理搜索按钮点击
+    // Handle search button click / 处理搜索按钮点击
     handleSearch() {
       this.setEndToNow()
-      // 构建搜索参数
+      // Build search parameters / 构建搜索参数
       const params = {
         startTime: `${this.startDate} ${this.startTime}:00`,
         endTime: `${this.endDate} ${this.endTime}:00`,
         changeId: this.queryParams.changeId || '',
-        rollid: this.queryParams.rollId || '' // 注意这里使用rollid而不是rollId，与API参数保持一致
+        rollid: this.queryParams.rollId || '' // Note: use rollid instead of rollId to match API parameter / 注意这里使用rollid而不是rollId，与API参数保持一致
       }
       
-      console.log('搜索参数:', params)
+      console.log('Search parameters:', params) // 搜索参数
       
-      // 触发父组件的搜索事件
+      // Emit search event to parent component / 触发父组件的搜索事件
       this.$emit('filter', params)
     },
     
-    // 重置查询条件
+    // Reset query conditions / 重置查询条件
     resetQuery() {
       this.queryParams = {
         changeId: '',
@@ -186,7 +202,7 @@ export default {
       }
       this.setDefaultTimeRange()
       
-      // 触发父组件的重置事件
+      // Emit reset event to parent component / 触发父组件的重置事件
       this.$emit('reset')
     }
   }
diff --git a/apps/l2/src/views/l2/roller/components/history.vue b/apps/l2/src/views/l2/roller/components/history.vue
index 808159e..5d9570d 100644
--- a/apps/l2/src/views/l2/roller/components/history.vue
+++ b/apps/l2/src/views/l2/roller/components/history.vue
@@ -12,23 +12,32 @@
         @cell-mouse-enter="handleCellEnter"
         @row-mouseleave="handleRowLeave"
       >
-        <el-table-column prop="changeid" :label="$t('roller.changeId')" align="center" show-overflow-tooltip />
-        <el-table-column prop="rollid" :label="$t('roller.rollId')" align="center" show-overflow-tooltip />
-        <el-table-column prop="standid" :label="$t('roller.standId')" align="center" show-overflow-tooltip />
-        <el-table-column :label="$t('roller.position')" align="center" prop="position">
+        <el-table-column prop="changeid" label="Change ID" align="center" show-overflow-tooltip />
+        <!-- 换辊号 -->
+        <el-table-column prop="rollid" label="Roll ID" align="center" show-overflow-tooltip />
+        <!-- 轧辊号 -->
+        <el-table-column prop="standid" label="Stand ID" align="center" show-overflow-tooltip />
+        <!-- 机架号 -->
+        <el-table-column label="Position" align="center" prop="position">
+          <!-- 位置 -->
           <template slot-scope="scope">
             <dict-tag :options="dict.type.main_roll_position" :value="scope.row.position" />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('roller.type')" align="center" prop="type" >
+        <el-table-column label="Type" align="center" prop="type" >
+          <!-- 类型 -->
           <template slot-scope="scope">
             <dict-tag :options="dict.type.main_roll_type" :value="scope.row.type" />
           </template>
         </el-table-column>
-        <el-table-column prop="changeType" :label="$t('roller.changeType')" align="center" show-overflow-tooltip />
-        <el-table-column prop="changeTime" :label="$t('roller.changeTime')" align="center" show-overflow-tooltip />
-        <el-table-column prop="instalTime" :label="$t('roller.installTime')" align="center" show-overflow-tooltip />
-        <el-table-column prop="deinstalTime" :label="$t('roller.dismantleTime')" align="center" show-overflow-tooltip />
+        <el-table-column prop="changeType" label="Change Type" align="center" show-overflow-tooltip />
+        <!-- 换辊类型 -->
+        <el-table-column prop="changeTime" label="Change Time" align="center" show-overflow-tooltip />
+        <!-- 换辊时间 -->
+        <el-table-column prop="instalTime" label="Install Time" align="center" show-overflow-tooltip />
+        <!-- 安装时间 -->
+        <el-table-column prop="deinstalTime" label="Uninstall Time" align="center" show-overflow-tooltip />
+        <!-- 拆卸时间 -->
       </el-table>
       <transition name="el-fade-in-linear">
         <div
@@ -37,14 +46,15 @@
           :style="tooltipStyle"
           ref="rowTooltip"
         >
-          <div class="tooltip-title">{{ $t('roller.detailedInfo') }}</div>
+          <div class="tooltip-title">Details</div>
+          <!-- 详细信息 -->
           <div class="tooltip-list">
             <div
               class="tooltip-item"
               v-for="field in detailFields"
               :key="field.prop"
             >
-              <span class="label">{{ $t(`roller.${field.i18nKey}`) }}：</span>
+              <span class="label">{{ field.label }}：</span>
               <span class="value">{{ formatTooltipValue(hoveredRow, field) }}</span>
             </div>
           </div>
@@ -90,26 +100,26 @@ export default {
         deinstalTimeRange: []
       },
       detailFields: [
-        { i18nKey: 'changeId', prop: 'changeid' },
-        { i18nKey: 'rollId', prop: 'rollid' },
-        { i18nKey: 'standId', prop: 'standid' },
-        { i18nKey: 'position', prop: 'position', dict: 'main_roll_position' },
-        { i18nKey: 'type', prop: 'type', dict: 'main_roll_type' },
-        { i18nKey: 'changeType', prop: 'changeType' },
-        { i18nKey: 'changeTime', prop: 'changeTime' },
-        { i18nKey: 'installTime', prop: 'instalTime' },
-        { i18nKey: 'dismantleTime', prop: 'deinstalTime' },
-        { i18nKey: 'diameter', prop: 'diameter' },
-        { i18nKey: 'roughness', prop: 'rough' },
-        { i18nKey: 'crown', prop: 'crown' },
-        { i18nKey: 'composition', prop: 'composition' },
-        { i18nKey: 'grindCount', prop: 'grindCount' },
-        { i18nKey: 'rolledWeight', prop: 'rolledWeight' },
-        { i18nKey: 'rolledCount', prop: 'rolledCount' },
-        { i18nKey: 'rolledLength', prop: 'rolledLength' },
-        { i18nKey: 'totalRolledWeight', prop: 'totalRolledWeight' },
-        { i18nKey: 'totalRolledLength', prop: 'totalRolledLength' },
-        { i18nKey: 'totalRolledCount', prop: 'totalRolledCount' }
+        { label: 'Change ID', prop: 'changeid' }, // 换辊号
+        { label: 'Roll ID', prop: 'rollid' }, // 轧辊号
+        { label: 'Stand ID', prop: 'standid' }, // 机架号
+        { label: 'Position', prop: 'position', dict: 'main_roll_position' }, // 位置
+        { label: 'Type', prop: 'type', dict: 'main_roll_type' }, // 类型
+        { label: 'Change Type', prop: 'changeType' }, // 换辊类型
+        { label: 'Change Time', prop: 'changeTime' }, // 换辊时间
+        { label: 'Install Time', prop: 'instalTime' }, // 安装时间
+        { label: 'Uninstall Time', prop: 'deinstalTime' }, // 拆卸时间
+        { label: 'Diameter', prop: 'diameter' }, // 直径
+        { label: 'Roughness', prop: 'rough' }, // 粗糙度
+        { label: 'Crown', prop: 'crown' }, // 凸度
+        { label: 'Composition', prop: 'composition' }, // 成分
+        { label: 'Grind Count', prop: 'grindCount' }, // 磨削次数
+        { label: 'Rolled Weight', prop: 'rolledWeight' }, // 轧制重量
+        { label: 'Rolled Count', prop: 'rolledCount' }, // 轧制数量
+        { label: 'Rolled Length', prop: 'rolledLength' }, // 轧制长度
+        { label: 'Total Rolled Weight', prop: 'totalRolledWeight' }, // 总轧制重量
+        { label: 'Total Rolled Length', prop: 'totalRolledLength' }, // 总轧制长度
+        { label: 'Total Rolled Count', prop: 'totalRolledCount' } // 总轧制数量
       ]
     }
   },
@@ -131,8 +141,8 @@ export default {
     }
   },
   created() {
-    // 初始化时不自动查询，等待筛选条件
-    console.log('历史记录组件初始化')
+    // Don't auto query on initialization, wait for filter conditions / 初始化时不自动查询，等待筛选条件
+    console.log('History component initialized') // 历史记录组件初始化
     // this.fetchData()
   },
   methods: {
@@ -146,7 +156,7 @@ export default {
 
       const loading = this.$loading({
         lock: true,
-        text: this.$t('roller.loading'),
+        text: 'Loading...', // 加载中...
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
@@ -164,14 +174,14 @@ export default {
               if (item.deinstalTime) item.deinstalTime = this.formatDate(item.deinstalTime)
             })
           } else {
-            this.$message.error(res.msg || this.$t('roller.getDataFailed'))
+            this.$message.error(res.msg || 'Failed to fetch data') // 获取数据失败
             this.tableData = []
             this.pagination.total = 0
           }
         })
         .catch(error => {
-          console.error('获取轧辊历史数据失败', error)
-          this.$message.error(this.$t('roller.getDataFailed') + '：' + (error.message || '未知错误'))
+          console.error('Failed to fetch roll history data', error) // 获取轧辊历史数据失败
+          this.$message.error('Failed to fetch data: ' + (error.message || 'Unknown error')) // 获取数据失败：未知错误
           this.tableData = []
           this.pagination.total = 0
         })
@@ -180,7 +190,7 @@ export default {
         })
     },
 
-    // 格式化日期
+    // Format date / 格式化日期
     formatDate(dateStr) {
       if (!dateStr) return ''
 
@@ -198,38 +208,38 @@ export default {
         return dateStr
       }
     },
-    // 从父组件调用的查询方法
+    // Query method called from parent component / 从父组件调用的查询方法
     getList(params) {
-      console.log('接收到父组件的搜索参数:', params)
+      console.log('Received search parameters from parent:', params) // 接收到父组件的搜索参数
       // this.pagination.currentPage = 1
       this.fetchData()
     },
 
-    // 处理搜索
+    // Handle search / 处理搜索
     handleSearch(params) {
       this.pagination.currentPage = 1
       this.fetchData()
     },
-    // 处理重置
+    // Handle reset / 处理重置
     handleReset() {
       this.pagination.currentPage = 1
       this.fetchData()
     },
-    // 处理刷新
+    // Handle refresh / 处理刷新
     handleRefresh() {
       this.fetchData()
     },
-    // 处理导出
+    // Handle export / 处理导出
     handleExport() {
-      // 导出逻辑
-      this.$message.success('导出成功')
+      // Export logic / 导出逻辑
+      this.$message.success('Export successful') // 导出成功
     },
-    // 处理页码变化
+    // Handle page number change / 处理页码变化
     handleCurrentChange(currentPage) {
       this.pagination.currentPage = currentPage
       this.fetchData()
     },
-    // 处理每页条数变化
+    // Handle page size change / 处理每页条数变化
     handleSizeChange(pageSize) {
       this.pagination.pageSize = pageSize
       this.fetchData()
diff --git a/apps/l2/src/views/l2/roller/components/online.vue b/apps/l2/src/views/l2/roller/components/online.vue
index 626d9de..d0a5980 100644
--- a/apps/l2/src/views/l2/roller/components/online.vue
+++ b/apps/l2/src/views/l2/roller/components/online.vue
@@ -1,8 +1,9 @@
-<!-- 当前在线辊的信息，props接收在线辊的表格数据 -->
+<!-- Current online roll information, props receive online roll table data / 当前在线辊的信息，props接收在线辊的表格数据 -->
 <template>
   <div class="online-roll">
     <div class="panel-header">
-      <h4>{{ $t('roller.onlineRollers') }}</h4>
+      <h4>Online Rolls</h4>
+      <!-- 在线辊 -->
     </div>
     <el-table
       :data="onlineData"
@@ -14,28 +15,42 @@
       :show-overflow-tooltip="true"
       style="width: 100%; table-layout: fixed;"
     >
-      <el-table-column prop="rollid" :label="$t('roller.rollId')" show-overflow-tooltip />
-      <el-table-column :label="$t('roller.position')" align="center" prop="position"  show-overflow-tooltip>
+      <el-table-column prop="rollid" label="Roll ID" show-overflow-tooltip />
+      <!-- 轧辊号 -->
+      <el-table-column label="Position" align="center" prop="position"  show-overflow-tooltip>
+        <!-- 位置 -->
         <template slot-scope="scope">
           <dict-tag :options="dict.type.main_roll_position" :value="scope.row.position" />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('roller.type')" align="center" prop="type" show-overflow-tooltip>
+      <el-table-column label="Type" align="center" prop="type" show-overflow-tooltip>
+        <!-- 类型 -->
         <template slot-scope="scope">
           <dict-tag :options="dict.type.main_roll_type" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column prop="diameter" :label="$t('roller.diameter')"  show-overflow-tooltip />
-      <el-table-column prop="rough" :label="$t('roller.roughness')" show-overflow-tooltip />
-      <el-table-column prop="crown" :label="$t('roller.crown')"  show-overflow-tooltip />
-      <el-table-column prop="rolledLength" :label="$t('roller.rolledLength')" show-overflow-tooltip />
-      <el-table-column prop="rolledWeight" :label="$t('roller.rolledWeight')"  show-overflow-tooltip />
-      <el-table-column prop="rolledCount" :label="$t('roller.rolledCount')" show-overflow-tooltip />
-      <el-table-column prop="instalTime" :label="$t('roller.installTime')" show-overflow-tooltip />
-      <!-- <el-table-column prop="usableLength" label="可用长度" show-overflow-tooltip />
-      <el-table-column prop="leftLength" label="剩余长度" show-overflow-tooltip />
-      <el-table-column prop="usableWeight" label="可用重量" show-overflow-tooltip />
-      <el-table-column prop="leftWeight" label="剩余重量" show-overflow-tooltip /> -->
+      <el-table-column prop="diameter" label="Diameter"  show-overflow-tooltip />
+      <!-- 直径 -->
+      <el-table-column prop="rough" label="Roughness"show-overflow-tooltip />
+      <!-- 粗糙度 -->
+      <el-table-column prop="crown" label="Crown"  show-overflow-tooltip />
+      <!-- 凸度 -->
+      <el-table-column prop="rolledLength" label="Length" show-overflow-tooltip />
+      <!-- 长度 -->
+      <el-table-column prop="rolledWeight" label="Weight"  show-overflow-tooltip />
+      <!-- 重量 -->
+      <el-table-column prop="rolledCount" label="Rolled Count" show-overflow-tooltip />
+      <!-- 轧制数量 -->
+      <el-table-column prop="instalTime" label="Install Time" show-overflow-tooltip />
+      <!-- 装机时间 -->
+      <!-- <el-table-column prop="usableLength" label="Usable Length" show-overflow-tooltip /> -->
+      <!-- 可用长度 -->
+      <!-- <el-table-column prop="leftLength" label="Remaining Length" show-overflow-tooltip /> -->
+      <!-- 剩余长度 -->
+      <!-- <el-table-column prop="usableWeight" label="Usable Weight" show-overflow-tooltip /> -->
+      <!-- 可用重量 -->
+      <!-- <el-table-column prop="leftWeight" label="Remaining Weight" show-overflow-tooltip /> -->
+      <!-- 剩余重量 -->
     </el-table>
   </div>
 </template>
diff --git a/apps/l2/src/views/l2/roller/components/standby.vue b/apps/l2/src/views/l2/roller/components/standby.vue
index 940f65f..4aea69d 100644
--- a/apps/l2/src/views/l2/roller/components/standby.vue
+++ b/apps/l2/src/views/l2/roller/components/standby.vue
@@ -1,11 +1,14 @@
-<!-- 准备轧辊的表格，props接收在线辊表格数据，每一个在线辊生成一个换辊行，组件内部处理获取所有备用轧辊和创建备用轧辊的信息 -->
+<!-- Standby roll table, props receive online roll table data, each online roll generates a change roll row, component internally handles getting all standby rolls and creating standby roll information / 准备轧辊的表格，props接收在线辊表格数据，每一个在线辊生成一个换辊行，组件内部处理获取所有备用轧辊和创建备用轧辊的信息 -->
 <template>
   <div class="standby-panel" v-loading="loading">
     <div class="panel-header">
-      <h4>{{ $t('roller.standbyRollers') }}</h4>
+      <h4>Standby Rolls</h4>
+      <!-- 准备辊 -->
       <div class="header-actions">
-        <el-button type="primary" size="mini" icon="el-icon-box" @click="handleBackup">{{ $t('roller.backup') }}</el-button>
-        <el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleOnline">{{ $t('roller.online') }}</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-box" @click="handleBackup">Backup</el-button>
+        <!-- 备辊 -->
+        <el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleOnline">Online</el-button>
+        <!-- 上线 -->
       </div>
     </div>
     <el-table
@@ -17,12 +20,15 @@
       :show-overflow-tooltip="true"
       style="width: 100%; table-layout: fixed;"
     >
-      <el-table-column :label="$t('roller.positionType')" show-overflow-tooltip>
+      <el-table-column label="Position/Type" show-overflow-tooltip>
+        <!-- 位置/类型 -->
         <template #default="scope">
           {{ getRollerTitle(scope.row.type, scope.row.position) }}
         </template>
       </el-table-column>
-      <el-table-column prop="rollid" :label="$t('roller.rollId')" show-overflow-tooltip>
+      <el-table-column prop="rollid" label="Roll ID" show-overflow-tooltip>
+        <!-- 轧辊号 -->
+             <!-- 请选择轧辊号 -->
         <template #default="scope">
           <el-select
             size="mini"
@@ -31,26 +37,33 @@
             allow-create
             v-model="scope.row.rollid"
             style="width: 100%;"
-            :placeholder="$t('roller.pleaseSelectRollId')"
+            placeholder="Please select roll ID"
+        
             @change="handleChange(scope.row)"
           >
             <el-option v-for="item in scope.row.data" :key="item.rollid" :label="item.rollid" :value="item.rollid" />
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column prop="diameter" :label="$t('roller.diameter')" show-overflow-tooltip>
+      <el-table-column prop="diameter" label="Diameter" show-overflow-tooltip>
+        <!-- 直径 -->
         <template #default="scope">
-          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" :placeholder="$t('roller.pleaseInputDiameter')" />
+          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" placeholder="Please enter diameter" />
+          <!-- 请输入直径 -->
         </template>
       </el-table-column>
-      <el-table-column prop="rough" :label="$t('roller.roughness')" show-overflow-tooltip>
+      <el-table-column prop="rough" label="Roughness" show-overflow-tooltip>
+        <!-- 粗糙度 -->
         <template #default="scope">
-          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" :placeholder="$t('roller.pleaseInputRoughness')" />
+          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" placeholder="Please enter roughness" />
+          <!-- 请输入粗糙度 -->
         </template>
       </el-table-column>
-      <el-table-column prop="crown" :label="$t('roller.crown')" show-overflow-tooltip>
+      <el-table-column prop="crown" label="Concavity" show-overflow-tooltip>
+        <!-- 凹度 -->
         <template #default="scope">
-          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" :placeholder="$t('roller.pleaseInputCrown')" />
+          <el-input style="width: 100%;" size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" placeholder="Please enter concavity" />
+          <!-- 请输入凹度 -->
         </template>
       </el-table-column>
     </el-table>
@@ -93,7 +106,7 @@ export default {
         const tableData = await Promise.all(newVal.map(async item => {
           const res = await getOfflineRollList(item.position, item.type)
           console.log(res);
-          // 如果readyRollList中存在position和type相同的对象，则额外赋值直径等参数
+          // If readyRollList contains object with same position and type, assign additional parameters like diameter / 如果readyRollList中存在position和type相同的对象，则额外赋值直径等参数
           const key = `${item.position.toUpperCase()}${item.type.toUpperCase()}`
           const readyRoll = readyRollList[key]
           const { diameter, rough, crown, rollid, ...roll } =
@@ -118,19 +131,19 @@ export default {
   methods: {
     getRollerTitle(type, position) {
       const typeDict = {
-        WORK: this.$t('roller.workRoll'),
-        BACKUP: this.$t('roller.backupRoll'),
-        INTERMEDIATE: this.$t('roller.intermediateRoll'),
+        WORK: 'Work Roll', // 工作辊
+        BACKUP: "Backup Roll", // 支撑辊
+        INTERMEDIATE: "Intermediate Roll", // 中间辊
       }
       const positionDict = {
-        TOP: this.$t('roller.top'),
-        BOTTOM: this.$t('roller.bottom'),
+        TOP: "Top", // 上
+        BOTTOM: "Bottom", // 下
       }
-      return positionDict[position] + typeDict[type]
+      return positionDict[position] + ' ' + typeDict[type]
     },
     handleChange(row) {
       // console.log(row);
-      // 查找对应的轧辊的数据填入表格
+      // Find corresponding roll data and fill into table / 查找对应的轧辊的数据填入表格
       const roll = row.data.find(item => item.rollid === row.rollid)
       row.diameter = roll?.diameter || 0
       row.rough = roll?.rough || 0
@@ -144,13 +157,13 @@ export default {
     },
     handleBackup() {
       backupRoll(this.tableData.filter(item => item.rollid)).then(res => {
-        this.$message.success('备辊成功')
+        this.$message.success('Backup successful') // 备辊成功
         this.$emit('backup')
       })
     },
     handleOnline() {
       onlineRoll(this.tableData).then(res => {
-        this.$message.success('上线成功')
+        this.$message.success('Online successful') // 上线成功
         this.$emit('online')
       })
     }
diff --git a/apps/l2/src/views/l2/send/components/FurnaceHistoryPanel.vue b/apps/l2/src/views/l2/send/components/FurnaceHistoryPanel.vue
new file mode 100644
index 0000000..c81148f
--- /dev/null
+++ b/apps/l2/src/views/l2/send/components/FurnaceHistoryPanel.vue
@@ -0,0 +1,141 @@
+<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" />
+      <el-table-column label="Device" prop="deviceName" />
+      <el-table-column label="Status" prop="status" />
+      <el-table-column label="Create Time" prop="createTime"  />
+      <el-table-column label="Finish Time" prop="finishTime" width="170" show-overflow-tooltip />
+      <el-table-column label="Action">
+        <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 v-loading="detailLoading">
+      <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,
+      detailLoading: false
+    }
+  },
+  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) {
+      this.detailVisible = true;
+      this.detailLoading = true
+      const res = await getSendJob(jobId)
+      this.detail = res.data
+      this.detailLoading = false
+    },
+    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/apps/l2/src/views/l2/send/drive.vue b/apps/l2/src/views/l2/send/drive.vue
new file mode 100644
index 0000000..0c0dd4e
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/views/l2/send/furnace.vue b/apps/l2/src/views/l2/send/furnace.vue
new file mode 100644
index 0000000..1060242
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/views/l2/send/history.vue b/apps/l2/src/views/l2/send/history.vue
new file mode 100644
index 0000000..100779b
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/views/l2/setup/fur.vue b/apps/l2/src/views/l2/setup/fur.vue
new file mode 100644
index 0000000..a9caa2a
--- /dev/null
+++ b/apps/l2/src/views/l2/setup/fur.vue
@@ -0,0 +1,7 @@
+<template>
+  <!-- 炉火参数设置，查看不同的炉具的参数和为炉具写入参数 -->
+</template>
+
+<script>
+
+</script>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/setup/index.vue b/apps/l2/src/views/l2/setup/index.vue
index fec9674..8f15781 100644
--- a/apps/l2/src/views/l2/setup/index.vue
+++ b/apps/l2/src/views/l2/setup/index.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="app-container setup-container">
     <el-row :gutter="20" class="setup-layout">
-      <!-- 左侧侧边栏导航 -->
+      <!-- Left sidebar navigation / 左侧侧边栏导航 -->
       <el-col :span="4" class="sidebar-col">
         <div class="sidebar-wrapper">
           <div class="sidebar-header">
-            <h3>工艺参数分类</h3>
+            <h3>Process Parameter Categories</h3>
+            <!-- 工艺参数分类 -->
           </div>
           <el-menu
             :default-active="activeTab"
@@ -14,33 +15,38 @@
           >
             <el-menu-item index="1">
               <i class="el-icon-setting"></i>
-              <span slot="title">全线张力</span>
+              <span slot="title">Full Line Tension</span>
+              <!-- 全线张力 -->
             </el-menu-item>
             <el-menu-item index="2">
               <i class="el-icon-setting"></i>
-              <span slot="title">拉校机参数</span>
+              <span slot="title">Leveling Machine Parameters</span>
+              <!-- 拉校机参数 -->
             </el-menu-item>
             <el-menu-item index="3">
               <i class="el-icon-setting"></i>
-              <span slot="title">光整机弯辊力</span>
+              <span slot="title">Temper Mill Bending Force</span>
+              <!-- 光整机弯辊力 -->
             </el-menu-item>
             <el-menu-item index="4">
               <i class="el-icon-setting"></i>
-              <span slot="title">光整机插入量</span>
+              <span slot="title">Temper Mill Insertion</span>
+              <!-- 光整机插入量 -->
             </el-menu-item>
             <el-menu-item index="5">
               <i class="el-icon-setting"></i>
-              <span slot="title">光整机轧制力</span>
+              <span slot="title">Temper Mill Rolling Force</span>
+              <!-- 光整机轧制力 -->
             </el-menu-item>
-            <el-menu-item index="6">
+            <!-- <el-menu-item index="6">
               <i class="el-icon-setting"></i>
-              <span slot="title">炉火段</span>
-            </el-menu-item>
+              <span slot="title">Furnace Section</span>
+            </el-menu-item> -->
           </el-menu>
         </div>
       </el-col>
-      
-      <!-- 右侧主内容区 -->
+
+      <!-- Right main content area / 右侧主内容区 -->
       <el-col :span="20" class="content-col">
         <div class="content-wrapper">
           <T1 v-if="activeTab === '1'" ref="t1" />
@@ -48,7 +54,7 @@
           <T3 v-if="activeTab === '3'" ref="t3" />
           <T4 v-if="activeTab === '4'" ref="t4" />
           <T5 v-if="activeTab === '5'" ref="t5" />
-          <T6 v-if="activeTab === '6'" ref="t6" />
+          <!-- <T6 v-if="activeTab === '6'" ref="t6" /> -->
         </div>
       </el-col>
     </el-row>
@@ -61,7 +67,7 @@ import T2 from './panels/T2.vue';
 import T3 from './panels/T3.vue';
 import T4 from './panels/T4.vue';
 import T5 from './panels/T5.vue';
-import T6 from './panels/T6.vue';
+// import T6 from './panels/T6.vue';
 
 export default {
   name: 'Setup',
@@ -71,11 +77,11 @@ export default {
     T3,
     T4,
     T5,
-    T6
+    // T6
   },
   data() {
     return {
-      activeTab: '1' // 默认选中第一个分类
+      activeTab: '1' // Default select first category / 默认选中第一个分类
     }
   },
   methods: {
@@ -118,7 +124,7 @@ export default {
   padding: 15px;
   background: #e8e8e8;
   border-bottom: 1px solid #d4d4d4;
-  
+
   h3 {
     margin: 0;
     font-size: 16px;
@@ -131,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;
@@ -171,4 +177,4 @@ export default {
   display: flex;
   flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T.vue b/apps/l2/src/views/l2/setup/panels/T.vue
index d53d7ec..c9e9035 100644
--- a/apps/l2/src/views/l2/setup/panels/T.vue
+++ b/apps/l2/src/views/l2/setup/panels/T.vue
@@ -1,73 +1,70 @@
-<!-- ProcessParamCardTemplate.vue 最终版 -->
+<!-- ProcessParamCardTemplate.vue 改造后（新增processAcceptKeys筛选区） -->
 <template>
   <div class="panel-container">
+    <el-row>
+          <!-- 筛选区域：动态渲染processAcceptKeys对应的筛选控件 -->
+      <el-col :span="19.5">
+        <el-row :gutter="8" align="middle" class="filter-row">
+          <!-- 循环processAcceptKeys，生成筛选控件 -->
+          <el-form inline>
+            <el-form-item v-for="key in processAcceptKeys" :key="key" :label="getFieldLabel(key)" class="filter-form-item" label-width="100px">
+              <!-- 输入框 -->
+              <el-input v-if="getFieldComponentType(key) === 'el-input'" v-model="queryParams[key]"
+                :placeholder="`Please enter ${getFieldLabel(key)}`" size="mini" clearable @keyup.enter="handleQuery" />
+              <!-- 下拉选择框 -->
+              <el-select v-else-if="getFieldComponentType(key) === 'el-select'" v-model="queryParams[key]"
+                :placeholder="`Please select ${getFieldLabel(key)}`" size="mini" clearable @change="handleQuery">
+                <el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+              <!-- 其他自定义组件（兼容扩展） -->
+              <component v-else :is="getFieldComponentType(key)" v-model="queryParams[key]"
+                :placeholder="`Please ${getFieldInputHint(key)}`" size="mini" clearable :options="getFieldOptions(key)"
+                @change="handleQuery" />
+            </el-form-item>
+          </el-form>
+
+          <!-- 筛选操作按钮：查询 + 重置 -->
+          <el-col :xs="24" :sm="12" :md="6" class="filter-btn-group">
+            <el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleQuery">Query</el-button>
+            <el-button type="default" plain icon="el-icon-refresh-left" size="mini" @click="handleResetFilter"
+              style="margin-left: 8px;">Reset</el-button>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
     <!-- 顶部操作栏 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">Add</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">Export</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-refresh"
-          size="mini"
-          @click="handleRefresh"
-        >刷新</el-button>
+        <el-button type="success" plain icon="el-icon-refresh" size="mini" @click="handleRefresh">Refresh</el-button>
       </el-col>
     </el-row>
 
     <!-- 卡片网格布局 -->
     <div v-loading="loading" class="card-grid-container">
       <el-row :gutter="12">
-        <el-col 
-          v-for="(item, index) in paramList" 
-          :key="index" 
-          :xs="24" 
-          :sm="12" 
-          :md="8" 
-          :lg="6"
-          :xl="4"
-          class="card-col"
-        >
+        <el-col v-for="(item, index) in paramList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
+          class="card-col">
           <el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
             <!-- 卡片头部：processAcceptKeys 字段（编辑禁用的标识字段） -->
             <div slot="header" class="card-header">
               <span class="card-title">
                 <template v-for="(key, idx) in processAcceptKeys">
                   {{ getFieldLabel(key) }}: {{ getFieldDisplayValue(key, item[key]) || '-' }}
-                  {{ idx < processAcceptKeys.length - 1 ? ' | ' : '' }}
-                </template>
+                  {{ idx < processAcceptKeys.length - 1 ? ' | ' : '' }} </template>
               </span>
             </div>
 
             <!-- 卡片主体：processReturnKeys 字段（业务参数） -->
             <div class="card-body">
-              <div 
-                class="param-row" 
-                v-for="(row, rowIdx) in getGroupedReturnKeys" 
-                :key="rowIdx"
-              >
-                <div 
-                  class="param-item" 
-                  v-for="(key, colIdx) in row" 
-                  :key="colIdx"
-                >
+              <div class="param-row" v-for="(row, rowIdx) in getGroupedReturnKeys" :key="rowIdx">
+                <div class="param-item" v-for="(key, colIdx) in row" :key="colIdx">
                   <span class="param-label">{{ getFieldLabel(key) }}:</span>
                   <span class="param-value">{{ getFieldDisplayValue(key, item[key]) || '-' }}</span>
                 </div>
@@ -78,24 +75,9 @@
 
             <!-- 卡片底部：操作按钮 -->
             <div class="card-footer">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-copy-document"
-                @click="handleCopy(item)"
-              >复制</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(item)"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(item)"
-              >删除</el-button>
+              <el-button size="mini" type="text" icon="el-icon-copy-document" @click="handleCopy(item)">Copy</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">Edit</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">Delete</el-button>
             </div>
           </el-card>
         </el-col>
@@ -103,66 +85,46 @@
 
       <!-- 空数据提示 -->
       <div v-if="paramList.length === 0 && !loading" class="empty-data">
-        <el-empty description="暂无数据"></el-empty>
+        <el-empty description="No data"></el-empty>
       </div>
     </div>
-    
+
     <!-- 分页组件 -->
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="formRules" label-width="100px">
         <!-- 第一部分：processAcceptKeys（编辑禁用，新增可编辑） -->
-        <el-form-item 
-          v-for="(key, idx) in processAcceptKeys" 
-          :key="`accept-${idx}-${key}`"
-          :label="getFieldLabel(key)" 
-          :prop="key"
-        >
-          <el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="请输入" :disabled="isEdit"/>
-          <el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]" placeholder="请选择" :disabled="isEdit">
+        <el-form-item v-for="(key, idx) in processAcceptKeys" :key="`accept-${idx}-${key}`" :label="getFieldLabel(key)"
+          :prop="key">
+          <el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="Please enter"
+            :disabled="isEdit" />
+          <el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]"
+            placeholder="Please select" :disabled="isEdit">
             <el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-          <component 
-            v-else
-            :is="getFieldComponentType(key)"
-            v-model="form[key]" 
-            :placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`" 
-            :disabled="isEdit"
-            :options="getFieldOptions(key)"
-          />
+          <component v-else :is="getFieldComponentType(key)" v-model="form[key]"
+            :placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`" :disabled="isEdit"
+            :options="getFieldOptions(key)" />
         </el-form-item>
-        
+
         <!-- 第二部分：processReturnKeys（始终可编辑） -->
-        <el-form-item 
-          v-for="(key, idx) in processReturnKeys" 
-          :key="`return-${idx}-${key}`"
-          :label="getFieldLabel(key)" 
-          :prop="key"
-        >
-          <el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="请输入" />
-          <el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]" placeholder="请选择">
+        <el-form-item v-for="(key, idx) in processReturnKeys" :key="`return-${idx}-${key}`" :label="getFieldLabel(key)"
+          :prop="key">
+          <el-input v-if="getFieldComponentType(key) == 'el-input'" v-model="form[key]" placeholder="Please enter" />
+          <el-select v-else-if="getFieldComponentType(key) == 'el-select'" v-model="form[key]"
+            placeholder="Please select">
             <el-option v-for="item in getFieldOptions(key)" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-          <component 
-            v-else
-            :is="getFieldComponentType(key)"
-            v-model="form[key]" 
-            :placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`"
-            :options="getFieldOptions(key)"
-          />
+          <component v-else :is="getFieldComponentType(key)" v-model="form[key]"
+            :placeholder="`请${getFieldInputHint(key)}${getFieldLabel(key)}`" :options="getFieldOptions(key)" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">Confirm</el-button>
+        <el-button @click="cancel">Cancel</el-button>
       </div>
     </el-dialog>
   </div>
@@ -220,6 +182,17 @@ export default {
       initForm[key] = ''; // 为每个字段初始化空字符串，保证响应式
     });
 
+    // 初始化查询参数：合并分页参数、额外参数、processAcceptKeys空值
+    const initQueryParams = {
+      pageNum: 1,
+      pageSize: 10,
+      ...this.extraQueryParams
+    };
+    // 为processAcceptKeys每个字段初始化查询参数空值
+    this.processAcceptKeys.forEach(key => {
+      initQueryParams[key] = '';
+    });
+
     return {
       // 加载状态
       loading: true,
@@ -231,12 +204,8 @@ export default {
       title: "",
       // 弹窗显隐
       open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        ...this.extraQueryParams
-      },
+      // 查询参数（初始化包含processAcceptKeys字段）
+      queryParams: initQueryParams,
       // 表单数据（初始化所有字段）
       form: initForm,
       // 是否为新增状态
@@ -281,7 +250,7 @@ export default {
     /** 根据字段prop获取输入提示（输入/选择） */
     getFieldInputHint(prop) {
       const field = this.schema.find(item => item.prop === prop);
-      return field?.type === 'select' ? '选择' : '输入';
+      return field?.type === 'select' ? 'select' : 'enter';
     },
 
     /** 根据字段prop获取下拉选项 */
@@ -294,14 +263,12 @@ export default {
     getFieldDisplayValue(prop, value) {
       if (value === '' || value === null || value === undefined) return '-';
       const field = this.schema.find(item => item.prop === prop);
-      console.log(field, 'field', prop, value);
       // 有字典转换函数则执行转换
       if (field?.dict && typeof field.dict === 'function') {
         return field.dict(value);
       }
       // 下拉选项转换（ID转label）
       if (field?.type === 'el-select' && field?.options.length) {
-        console.log(field.options, '替换钢种下拉选');
         const option = field.options.find(item => item.value == value);
         return option ? option.label : value;
       }
@@ -317,7 +284,7 @@ export default {
         const field = this.schema.find(item => item.prop === key);
         if (field?.required !== false) { // 默认必填，除非显式设置required: false
           this.formRules[key] = [
-            { required: true, message: `请${this.getFieldInputHint(key)}${this.getFieldLabel(key)}`, trigger: 'blur' }
+            { required: true, message: `Please ${this.getFieldInputHint(key)} ${this.getFieldLabel(key)}`, trigger: 'blur' }
           ];
         }
       });
@@ -327,16 +294,30 @@ export default {
       this.getList();
     },
 
-    /** 搜索操作（适配right-toolbar的queryTable事件） */
+    /** 搜索操作（适配筛选区查询） */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryParams.pageNum = 1; // 筛选时重置页码为第一页
       this.getList();
     },
 
+    /** 重置筛选条件 */
+    handleResetFilter() {
+      // 重置processAcceptKeys对应的筛选字段为空
+      this.processAcceptKeys.forEach(key => {
+        this.queryParams[key] = '';
+      });
+      // 重置额外查询参数（可选：若需要保留额外参数，可注释此行）
+      // Object.keys(this.extraQueryParams).forEach(key => {
+      //   this.queryParams[key] = this.extraQueryParams[key];
+      // });
+      this.queryParams.pageNum = 1; // 重置页码
+      this.getList(); // 重新查询
+    },
+
     /** 查询参数列表 */
     getList() {
       this.loading = true;
-      // 合并额外查询参数
+      // 合并额外查询参数（最终查询参数：分页+筛选+额外参数）
       const queryParams = { ...this.queryParams, ...this.extraQueryParams };
       this.apis.list(queryParams).then(response => {
         this.paramList = response.rows || [];
@@ -371,7 +352,7 @@ export default {
       this.isAdd = true;
       this.resetForm();
       this.open = true;
-      this.title = `添加${this.$options.name || '工艺参数'}`;
+      this.title = `Add ${this.$options.name || 'Process Parameters'}`;
     },
 
     /** 复制新增操作 */
@@ -384,13 +365,12 @@ export default {
         this.form[key] = row[key] || '';
       });
       this.open = true;
-      this.title = `复制新增${this.$options.name || '工艺参数'}`;
+      this.title = `Copy & Add ${this.$options.name || 'Process Parameters'}`;
     },
 
     /** 修改操作（优化异常处理和数据赋值） */
     handleUpdate(row) {
       this.isAdd = false; // 标记为编辑态
-      console.log(row)
       this.resetForm();   // 重置表单
       this.apis.get(row).then(response => {
         const data = response.data || {};
@@ -400,10 +380,9 @@ export default {
           this.form[key] = data[key] !== undefined ? data[key] : '';
         });
         this.open = true;
-        this.title = `修改${this.$options.name || '工艺参数'}`;
+        this.title = `Edit ${this.$options.name || 'Process Parameters'}`;
       }).catch(error => {
-        // 新增错误提示，避免静默失败
-        this.$modal.msgError('获取参数详情失败，请重试');
+        this.$modal.msgError('Failed to get details, please try again.');
         console.error('获取详情失败：', error);
       });
     },
@@ -414,12 +393,11 @@ export default {
         if (valid) {
           const api = this.isAdd ? this.apis.add : this.apis.update;
           api(this.form).then(() => {
-            this.$modal.msgSuccess(this.isAdd ? "新增成功" : "修改成功");
+            this.$modal.msgSuccess(this.isAdd ? "Added successfully" : "Updated successfully");
             this.open = false;
             this.getList();
           }).catch(error => {
-            // 新增提交失败提示
-            this.$modal.msgError(this.isAdd ? "新增失败" : "修改失败");
+            this.$modal.msgError(this.isAdd ? "Add failed" : "Update failed");
             console.error('提交失败：', error);
           });
         }
@@ -428,12 +406,12 @@ export default {
 
     /** 删除操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除该工艺参数？').then(() => {
+      this.$modal.confirm('Are you sure you want to delete this parameter?').then(() => {
         return this.apis.del(row);
       }).then(() => {
         this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.$modal.msgSuccess("Deleted successfully");
+      }).catch(() => { });
     },
 
     /** 导出操作 */
@@ -443,7 +421,7 @@ export default {
           ...this.queryParams
         }, `${this.$options.name || 'process_param'}_${new Date().getTime()}.xlsx`);
       } catch (error) {
-        this.$modal.msgWarning('导出功能暂未配置，请联系管理员');
+        this.$modal.msgWarning('Export is not configured yet. Please contact admin.');
         console.error('导出失败：', error);
       }
     }
@@ -452,29 +430,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// 样式部分保持不变
+// 样式部分新增筛选区样式，其余保持不变
 .panel-container {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
+// 筛选区样式
+.filter-row {
+  padding: 2px 0;
+  background: #fafafa;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #e8e8e8;
+}
+
+.filter-col {
+  margin-bottom: 8px;
+}
+
+.filter-form-item {
+  margin-bottom: 0 !important;
+  font-size: 12px;
+
+  ::v-deep .el-form-item__label {
+    font-size: 11px;
+    color: #666;
+  }
+
+  ::v-deep .el-input--mini,
+  ::v-deep .el-select--mini {
+    width: 100%;
+  }
+}
+
+.filter-btn-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
 .card-grid-container {
   flex: 1;
   overflow-y: auto;
   margin-top: 10px;
   padding-right: 5px;
   min-height: 0;
-  
+
   &::-webkit-scrollbar {
     width: 6px;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: #c0c0c0;
     border-radius: 3px;
   }
-  
+
   &::-webkit-scrollbar-track {
     background: #f0f0f0;
   }
@@ -488,13 +500,13 @@ export default {
   height: 100%;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
-  
+
   ::v-deep .el-card__header {
     padding: 8px 10px;
     background: #f5f5f5;
     border-bottom: 1px solid #d4d4d4;
   }
-  
+
   &:hover {
     border-color: #999;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
@@ -513,26 +525,26 @@ export default {
   .param-row {
     display: flex;
     margin-bottom: 6px;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
-    
+
     .param-item {
       flex: 1;
       display: flex;
       flex-direction: column;
       padding: 4px 6px;
       border-right: 1px solid #e8e8e8;
-      
+
       &:last-child {
         border-right: none;
       }
-      
+
       &:only-child {
         border-right: none;
       }
-      
+
       .param-label {
         color: #666;
         font-size: 11px;
@@ -541,7 +553,7 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      
+
       .param-value {
         color: #333;
         font-weight: 500;
@@ -558,7 +570,7 @@ export default {
   padding-top: 8px;
   border-top: 1px solid #e8e8e8;
   margin-top: 8px;
-  
+
   .el-button {
     font-size: 12px;
     padding: 0 4px;
diff --git a/apps/l2/src/views/l2/setup/panels/T1.vue b/apps/l2/src/views/l2/setup/panels/T1.vue
index 31d4c02..1b5ecd1 100644
--- a/apps/l2/src/views/l2/setup/panels/T1.vue
+++ b/apps/l2/src/views/l2/setup/panels/T1.vue
@@ -28,22 +28,22 @@ export default {
       // 2. 字段配置schema（数组格式）
       tensionSchema: [
         // 标识字段（processAcceptKeys）
-        { prop: 'thick', label: '厚度', required: true },
-        { prop: 'yieldStren', label: '屈服点', required: true },
+        { prop: 'thick', label: 'Thickness', required: true },
+        { prop: 'yieldStren', label: 'Yield Strength', required: true },
         // 业务参数（processReturnKeys）
-        { prop: 'value1', label: '开卷机张力', required: true },
-        { prop: 'value2', label: '入口活套', required: true },
-        { prop: 'value3', label: '清洗段', required: true },
-        { prop: 'value4', label: '炉区张力', required: true },
-        { prop: 'value5', label: '冷却塔', required: true },
-        { prop: 'value6', label: '光整机-不投', required: true },
-        { prop: 'value7', label: '光整机入口', required: true },
-        { prop: 'value8', label: '光整机出口', required: true },
-        { prop: 'value9', label: '拉矫机-不投', required: true },
-        { prop: 'value10', label: '拉矫机出口', required: true },
-        { prop: 'value11', label: '后处理', required: true },
-        { prop: 'value12', label: '出口活套', required: true },
-        { prop: 'value13', label: '卷取机', required: true }
+        { prop: 'value1', label: 'Uncoiler tension', required: true },
+        { prop: 'value2', label: 'Entry looper', required: true },
+        { prop: 'value3', label: 'Cleaning section', required: true },
+        { prop: 'value4', label: 'Furnace tension', required: true },
+        { prop: 'value5', label: 'Cooling tower', required: true },
+        { prop: 'value6', label: 'Skin-pass (off)', required: true },
+        { prop: 'value7', label: 'Skin-pass entry', required: true },
+        { prop: 'value8', label: 'Skin-pass exit', required: true },
+        { prop: 'value9', label: 'Tension leveler (off)', required: true },
+        { prop: 'value10', label: 'Tension leveler exit', required: true },
+        { prop: 'value11', label: 'Post treatment', required: true },
+        { prop: 'value12', label: 'Exit looper', required: true },
+        { prop: 'value13', label: 'Coiler', required: true }
       ],
       // 3. 工艺参数接受值（编辑禁用的字段prop）
       processAcceptKeys: ['thick', 'yieldStren'],
diff --git a/apps/l2/src/views/l2/setup/panels/T2.vue b/apps/l2/src/views/l2/setup/panels/T2.vue
index 0da9fe7..02d6f2c 100644
--- a/apps/l2/src/views/l2/setup/panels/T2.vue
+++ b/apps/l2/src/views/l2/setup/panels/T2.vue
@@ -52,7 +52,7 @@ export default {
       this.schema = [
         {
           prop: 'steelGrade',
-          label: '钢种',
+          label: 'Steel Grade',
           required: true,
           type: 'el-select',
           options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
@@ -61,12 +61,12 @@ export default {
             return grade ? grade.name : gradeId;
           }
         },
-        { prop: 'yieldStren', label: '硬度', required: true },
-        { prop: 'thick', label: '厚度', required: true },
-        { prop: 'value1', label: '延伸率', required: true },
-        { prop: 'value2', label: '矫直辊插入量1', required: true },
-        { prop: 'value3', label: '矫直辊插入量2', required: true },
-        { prop: 'value4', label: '防横弓插入量', required: true }
+        { prop: 'yieldStren', label: 'Hardness', required: true },
+        { prop: 'thick', label: 'Thickness', required: true },
+        { prop: 'value1', label: 'Elongation', required: true },
+        { prop: 'value2', label: 'Leveler roll insertion 1', required: true },
+        { prop: 'value3', label: 'Leveler roll insertion 2', required: true },
+        { prop: 'value4', label: 'Anti-crossbow insertion', required: true }
       ];
     }
   }
diff --git a/apps/l2/src/views/l2/setup/panels/T3.vue b/apps/l2/src/views/l2/setup/panels/T3.vue
index ecb5680..95f076c 100644
--- a/apps/l2/src/views/l2/setup/panels/T3.vue
+++ b/apps/l2/src/views/l2/setup/panels/T3.vue
@@ -31,9 +31,9 @@ export default {
       },
       // 字段配置
       schema: [
-        { prop: 'width', label: '宽度', required: true },
-        { prop: 'rollForce', label: '轧制力', required: true },
-        { prop: 'value1', label: '弯辊力', required: true }
+        { prop: 'width', label: 'Width', required: true },
+        { prop: 'rollForce', label: 'Rolling force', required: true },
+        { prop: 'value1', label: 'Bending force', required: true }
       ],
       // 编辑禁用字段
       processAcceptKeys: ['width', 'rollForce'],
diff --git a/apps/l2/src/views/l2/setup/panels/T4.vue b/apps/l2/src/views/l2/setup/panels/T4.vue
index f73545c..8db132d 100644
--- a/apps/l2/src/views/l2/setup/panels/T4.vue
+++ b/apps/l2/src/views/l2/setup/panels/T4.vue
@@ -52,7 +52,7 @@ export default {
       this.schema = [
         {
           prop: 'steelGrade',
-          label: '钢种',
+          label: 'Steel Grade',
           required: true,
           type: 'el-select',
           options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
@@ -61,10 +61,10 @@ export default {
             return grade ? grade.name : gradeId;
           }
         },
-        { prop: 'thick', label: '厚度', required: true },
-        { prop: 'yieldStren', label: '屈服点', required: true },
-        { prop: 'value1', label: '防皱辊插入量', required: true },
-        { prop: 'value2', label: '防颤辊插入量', required: true }
+        { prop: 'thick', label: 'Thickness', required: true },
+        { prop: 'yieldStren', label: 'Yield Strength', required: true },
+        { prop: 'value1', label: 'Anti-wrinkle roll insertion', required: true },
+        { prop: 'value2', label: 'Anti-chatter roll insertion', required: true }
       ];
     }
   }
diff --git a/apps/l2/src/views/l2/setup/panels/T5.vue b/apps/l2/src/views/l2/setup/panels/T5.vue
index 050f4e8..610fb7c 100644
--- a/apps/l2/src/views/l2/setup/panels/T5.vue
+++ b/apps/l2/src/views/l2/setup/panels/T5.vue
@@ -53,7 +53,7 @@ export default {
       this.schema = [
         {
           prop: 'steelGrade',
-          label: '钢种',
+          label: 'Steel Grade',
           required: true,
           type: 'el-select',
           options: steelGradeList.map(item => ({ label: item.name, value: item.gradeid })),
@@ -62,10 +62,10 @@ export default {
             return grade ? grade.name : gradeId;
           }
         },
-        { prop: 'thick', label: '厚度', required: true },
-        { prop: 'yieldStren', label: '屈服点', required: true },
-        { prop: 'elong', label: '延伸率', required: true },
-        { prop: 'value1', label: '轧制力', required: true }
+        { prop: 'thick', label: 'Thickness', required: true },
+        { prop: 'yieldStren', label: 'Yield Strength', required: true },
+        { prop: 'elong', label: 'Elongation', required: true },
+        { prop: 'value1', label: 'Rolling force', required: true }
       ];
     }
   }
diff --git a/apps/l2/src/views/l2/setup/panels/T6.vue b/apps/l2/src/views/l2/setup/panels/T6.vue
index 66cb888..e7c8f65 100644
--- a/apps/l2/src/views/l2/setup/panels/T6.vue
+++ b/apps/l2/src/views/l2/setup/panels/T6.vue
@@ -8,7 +8,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-        >新增</el-button>
+        >Add</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -17,7 +17,7 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-        >导出</el-button>
+        >Export</el-button>
       </el-col>
     </el-row>
 
@@ -36,22 +36,22 @@
         >
           <el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
             <div slot="header" class="card-header">
-              <span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }}</span>
+              <span class="card-title">Steel Grade: {{ getSteelGradeName(item.steelGrade) || '-' }}</span>
             </div>
             <div class="card-body">
               <div class="param-row">
                 <div class="param-item">
-                  <span class="param-label">预热段出口板温:</span>
+                  <span class="param-label">Preheat section exit temperature:</span>
                   <span class="param-value">{{ item.value1 || '-' }}</span>
                 </div>
                 <div class="param-item">
-                  <span class="param-label">加热段出口板温:</span>
+                  <span class="param-label">Heating section exit temperature:</span>
                   <span class="param-value">{{ item.value2 || '-' }}</span>
                 </div>
               </div>
               <div class="param-row">
                 <div class="param-item">
-                  <span class="param-label">冷却段出口板温:</span>
+                  <span class="param-label">Cooling section exit temperature:</span>
                   <span class="param-value">{{ item.value3 || '-' }}</span>
                 </div>
                 <div class="param-item"></div>
@@ -63,19 +63,19 @@
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdate(item)"
-              >修改</el-button>
+              >Edit</el-button>
               <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-delete"
                 @click="handleDelete(item)"
-              >删除</el-button>
+              >Delete</el-button>
             </div>
           </el-card>
         </el-col>
       </el-row>
       <div v-if="furList.length === 0 && !loading" class="empty-data">
-        <el-empty description="暂无数据"></el-empty>
+        <el-empty description="No data"></el-empty>
       </div>
     </div>
     
@@ -87,27 +87,27 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改炉火段工艺参数对话框 -->
+    <!-- Add / Edit Furnace process parameters dialog -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="钢种" prop="steelGrade">
-          <el-select v-model="form.steelGrade" placeholder="请选择钢种">
+        <el-form-item label="Steel Grade" prop="steelGrade">
+          <el-select v-model="form.steelGrade" placeholder="Please select">
             <el-option v-for="item in steelGradeList" :key="item.gradeid" :label="item.name" :value="item.gradeid" />
           </el-select>
         </el-form-item>
-        <el-form-item label="预热段出口板温" prop="value1">
-          <el-input v-model="form.value1" placeholder="请输入预热段出口板温" />
+        <el-form-item label="Preheat section exit temperature" prop="value1">
+          <el-input v-model="form.value1" placeholder="Please enter" />
         </el-form-item>
-        <el-form-item label="加热段出口板温" prop="value2">
-          <el-input v-model="form.value2" placeholder="请输入加热段出口板温" />
+        <el-form-item label="Heating section exit temperature" prop="value2">
+          <el-input v-model="form.value2" placeholder="Please enter" />
         </el-form-item>
-        <el-form-item label="冷却段出口板温" prop="value3">
-          <el-input v-model="form.value3" placeholder="请输入冷却段出口板温" />
+        <el-form-item label="Cooling section exit temperature" prop="value3">
+          <el-input v-model="form.value3" placeholder="Please enter" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">Confirm</el-button>
+        <el-button @click="cancel">Cancel</el-button>
       </div>
     </el-dialog>
   </div>
@@ -218,7 +218,7 @@ export default {
       this.isAdd = true;
       this.reset();
       this.open = true;
-      this.title = "添加炉火段工艺参数";
+      this.title = "Add Furnace process parameters";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -228,7 +228,7 @@ export default {
       getFur(steelGrade).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改炉火段工艺参数";
+        this.title = "Edit Furnace process parameters";
       });
     },
     /** 提交按钮 */
@@ -237,13 +237,13 @@ export default {
         if (valid) {
           if (!this.isAdd) {
             updateFur(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+              this.$modal.msgSuccess("Updated successfully");
               this.open = false;
               this.getList();
             });
           } else {
             addFur(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
+              this.$modal.msgSuccess("Added successfully");
               this.open = false;
               this.getList();
             });
@@ -254,11 +254,11 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const steelGrades = row.steelGrade || this.ids;
-      this.$modal.confirm('是否确认删除炉火段工艺参数编号为"' + steelGrades + '"的数据项？').then(function() {
+      this.$modal.confirm('Are you sure you want to delete furnace parameters for steelGrade "' + steelGrades + '"?').then(function() {
         return delFur(steelGrades);
       }).then(() => {
         this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.$modal.msgSuccess("Deleted successfully");
       }).catch(() => {});
     },
     /** 导出按钮操作 */
diff --git a/apps/l2/src/views/l2/setup/pdi.vue b/apps/l2/src/views/l2/setup/pdi.vue
index 5b9666f..c5b9d69 100644
--- a/apps/l2/src/views/l2/setup/pdi.vue
+++ b/apps/l2/src/views/l2/setup/pdi.vue
@@ -1,29 +1,37 @@
 <template>
   <div class="pdi-container">
-    <!-- 卡片网格布局 -->
+    <!-- Card grid layout / 卡片网格布局 -->
     <div v-loading="loading" class="card-grid-container">
       <el-row :gutter="10">
         <el-col :span="12">
           <div class="pdi-header">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
               label-width="68px">
-              <el-form-item label="钢卷号" prop="coilid">
-                <el-input v-model="queryParams.coilid" placeholder="请输入钢卷号" clearable
+              <el-form-item label="Coil ID" prop="coilid">
+                <!-- 钢卷号 -->
+                <!-- Please enter coil ID / 请输入钢卷号 -->
+                <el-input v-model="queryParams.coilid" placeholder="Please enter coil ID" clearable
                   @keyup.enter.native="handleQuery" />
               </el-form-item>
-              <el-form-item label="计划号" prop="planid">
-                <el-input v-model="queryParams.planid" placeholder="请输入计划号" clearable
+              <el-form-item label="Plan ID" prop="planid">
+                <!-- 计划号 -->
+                <!-- Please enter plan ID / 请输入计划号 -->
+                <el-input v-model="queryParams.planid" placeholder="Please enter plan ID" clearable
                   @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">Search</el-button>
+                <!-- 搜索 -->
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">Reset</el-button>
+                <!-- 重置 -->
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">Export</el-button>
+                <!-- 导出 -->
               </el-form-item>
             </el-form>
           </div>
           <div v-if="setupList.length === 0 && !loading" class="empty-data">
-            <el-empty description="暂无数据"></el-empty>
+            <el-empty description="No data"></el-empty>
+            <!-- 暂无数据 -->
           </div>
           <el-row v-else :gutter="10">
             <el-col v-for="(item, index) in setupList" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
@@ -32,12 +40,15 @@
                 :body-style="{ padding: '10px' }">
                 <div class="card-header">
                   <div class="card-title-row">
-                    <span class="card-title">钢卷号: {{ item.coilid || '-' }}</span>
+                    <span class="card-title">Coil ID: {{ item.coilid || '-' }}</span>
+                    <!-- 钢卷号 -->
                   </div>
-                  <div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
+                  <div class="card-subtitle">Plan ID: {{ item.planid || '-' }} | Change Count: {{ item.type || '-' }}</div>
+                  <!-- 计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }} -->
                 </div>
                 <div class="card-footer">
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">Delete</el-button>
+                  <!-- 删除 -->
                 </div>
               </el-card>
             </el-col>
@@ -49,71 +60,87 @@
           <div v-if="currentRow && currentRow.coilid" class="parameter-detail">
             <div class="card-header">
               <div class="card-title-row">
-                <span class="card-title">钢卷号: {{ currentRow.coilid || '-' }}</span>
+                <span class="card-title">Coil ID: {{ currentRow.coilid || '-' }}</span>
+                <!-- 钢卷号 -->
               </div>
-              <div class="card-subtitle">计划ID: {{ currentRow.planid || '-' }} | 更改次数: {{ currentRow.type || '-' }}</div>
+              <div class="card-subtitle">Plan ID: {{ currentRow.planid || '-' }} | Change Count: {{ currentRow.type || '-' }}</div>
+              <!-- 计划ID: {{ currentRow.planid || '-' }} | 更改次数: {{ currentRow.type || '-' }} -->
             </div>
             <div class="card-body">
-              <!-- 全线张力 -->
+              <!-- Full line tension / 全线张力 -->
               <div class="param-group">
-                <div class="group-title">全线张力</div>
+                <div class="group-title">Full Line Tension</div>
+                <!-- 全线张力 -->
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">开卷机张力:</span>
+                    <span class="param-label">Pay-off Reel Tension:</span>
+                    <!-- 开卷机张力 -->
                     <span class="param-value">{{ currentRow.porTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">入口活套张力:</span>
+                    <span class="param-label">Entry Loop Tension:</span>
+                    <!-- 入口活套张力 -->
                     <span class="param-value">{{ currentRow.celTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">清洗段张力:</span>
+                    <span class="param-label">Cleaning Section Tension:</span>
+                    <!-- 清洗段张力 -->
                     <span class="param-value">{{ currentRow.cleanTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">炉区张力:</span>
+                    <span class="param-label">Furnace Zone Tension:</span>
+                    <!-- 炉区张力 -->
                     <span class="param-value">{{ currentRow.furTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">冷却塔张力:</span>
+                    <span class="param-label">Cooling Tower Tension:</span>
+                    <!-- 冷却塔张力 -->
                     <span class="param-value">{{ currentRow.towerTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">光整机不投张力:</span>
+                    <span class="param-label">TM No-Engage Tension:</span>
+                    <!-- 光整机不投张力 -->
                     <span class="param-value">{{ currentRow.tmNoneTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">光整机入口张力:</span>
+                    <span class="param-label">TM Entry Tension:</span>
+                    <!-- 光整机入口张力 -->
                     <span class="param-value">{{ currentRow.tmEntryTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">光整机出口张力:</span>
+                    <span class="param-label">TM Exit Tension:</span>
+                    <!-- 光整机出口张力 -->
                     <span class="param-value">{{ currentRow.tmExitTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">拉矫机不投张力:</span>
+                    <span class="param-label">TL No-Engage Tension:</span>
+                    <!-- 拉矫机不投张力 -->
                     <span class="param-value">{{ currentRow.tlNoneTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">拉矫机出口张力:</span>
+                    <span class="param-label">TL Exit Tension:</span>
+                    <!-- 拉矫机出口张力 -->
                     <span class="param-value">{{ currentRow.tlExitTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">后处理张力:</span>
+                    <span class="param-label">Post-Processing Tension:</span>
+                    <!-- 后处理张力 -->
                     <span class="param-value">{{ currentRow.coatTension || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">出口活套张力:</span>
+                    <span class="param-label">Exit Loop Tension:</span>
+                    <!-- 出口活套张力 -->
                     <span class="param-value">{{ currentRow.cxlTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">卷取机张力:</span>
+                    <span class="param-label">Take-up Reel Tension:</span>
+                    <!-- 卷取机张力 -->
                     <span class="param-value">{{ currentRow.trTension || '-' }}</span>
                   </div>
                   <div class="param-item"></div>
@@ -122,66 +149,80 @@
                 </div>
               </div>
 
-              <!-- 光整机参数 -->
+              <!-- Temper mill parameters / 光整机参数 -->
               <div class="param-group">
-                <div class="group-title">光整机参数</div>
+                <div class="group-title">Temper Mill Parameters</div>
+                <!-- 光整机参数 -->
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">光整机轧制力:</span>
+                    <span class="param-label">TM Rolling Force:</span>
+                    <!-- 光整机轧制力 -->
                     <span class="param-value">{{ currentRow.tmRollforce || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">光整机弯辊力:</span>
+                    <span class="param-label">TM Bending Force:</span>
+                    <!-- 光整机弯辊力 -->
                     <span class="param-value">{{ currentRow.tmBendforce || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">防皱辊插入量:</span>
+                    <span class="param-label">Anti-Crimping Roll Insertion:</span>
+                    <!-- 防皱辊插入量 -->
                     <span class="param-value">{{ currentRow.tmAcrMesh || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">防颤辊插入量:</span>
+                    <span class="param-label">Anti-Flutter Roll Insertion:</span>
+                    <!-- 防颤辊插入量 -->
                     <span class="param-value">{{ currentRow.tmBrMesh || '-' }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- 拉矫机参数 -->
+              <!-- Leveling machine parameters / 拉矫机参数 -->
               <div class="param-group">
-                <div class="group-title">拉矫机参数</div>
+                <div class="group-title">Leveling Machine Parameters</div>
+                <!-- 拉矫机参数 -->
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">拉矫机延伸率:</span>
+                    <span class="param-label">TL Elongation:</span>
+                    <!-- 拉矫机延伸率 -->
                     <span class="param-value">{{ currentRow.tlElong || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">矫直辊插入量1:</span>
+                    <span class="param-label">Leveling Roll Insertion 1:</span>
+                    <!-- 矫直辊插入量1 -->
                     <span class="param-value">{{ currentRow.tlLvlMesh1 || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">矫直辊插入量2:</span>
+                    <span class="param-label">Leveling Roll Insertion 2:</span>
+                    <!-- 矫直辊插入量2 -->
                     <span class="param-value">{{ currentRow.tlLvlMesh2 || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">防横弓插入量:</span>
+                    <span class="param-label">Anti-Cross-Bow Insertion:</span>
+                    <!-- 防横弓插入量 -->
                     <span class="param-value">{{ currentRow.tlAcbMesh || '-' }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- 炉火段 -->
+              <!-- Furnace section / 炉火段 -->
               <div class="param-group">
-                <div class="group-title">炉段温度</div>
+                <div class="group-title">Furnace Section Temperature</div>
+                <!-- 炉段温度 -->
                 <div class="param-row">
                   <div class="param-item">
-                    <span class="param-label">预热段出口板温:</span>
+                    <span class="param-label">Preheating Section Exit Temp:</span>
+                    <!-- 预热段出口板温 -->
                     <span class="param-value">{{ currentRow.preheatingSection || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">加热段出口板温:</span>
+                    <span class="param-label">Heating Section Exit Temp:</span>
+                    <!-- 加热段出口板温 -->
                     <span class="param-value">{{ currentRow.heatingSection || '-' }}</span>
                   </div>
                   <div class="param-item">
-                    <span class="param-label">冷却段出口板温:</span>
+                    <span class="param-label">Cooling Section Exit Temp:</span>
+                    <!-- 冷却段出口板温 -->
                     <span class="param-value">{{ currentRow.coolingSection || '-' }}</span>
                   </div>
                   <div class="param-item"></div>
@@ -190,28 +231,34 @@
             </div>
           </div>
 
-          <el-empty v-else description="请在左侧选择钢卷查看工艺历史"></el-empty>
+          <el-empty v-else description="Please select a coil from the left to view process history"></el-empty>
+          <!-- 请在左侧选择钢卷查看工艺历史 -->
         </el-col>
       </el-row>
     </div>
 
-    <!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
+    <!-- Statistics chart area: reuse PDO line chart component, based on selected coil ID / 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
     <div class="statistics-container">
       <div class="statistics-header">
         <div v-if="currentRow && currentRow.coilid" class="selected-info">
           <i class="el-icon-check"></i>
-          <span class="selected-label">已选中:</span>
-          <span class="selected-value">钢卷 {{ currentRow.coilid }}</span>
-          <span class="selected-detail" v-if="currentRow.planid">计划号: {{ currentRow.planid }}</span>
+          <span class="selected-label">Selected:</span>
+          <!-- 已选中 -->
+          <span class="selected-value">Coil {{ currentRow.coilid }}</span>
+          <!-- 钢卷 -->
+          <span class="selected-detail" v-if="currentRow.planid">Plan ID: {{ currentRow.planid }}</span>
+          <!-- 计划号 -->
         </div>
         <div v-else class="selected-info empty">
           <i class="el-icon-info"></i> 
-          <span>请选择上方卡片查看图表</span>
+          <span>Please select a card above to view chart</span>
+          <!-- 请选择上方卡片查看图表 -->
         </div>
       </div>
       <div class="chart-wrapper">
         <line-chart v-if="currentRow && currentRow.coilid" :enCoilID="currentRow.coilid" />
-        <div v-else class="chart-placeholder">请选择钢卷以查看工艺曲线</div>
+        <div v-else class="chart-placeholder">Please select a coil to view process curve</div>
+        <!-- 请选择钢卷以查看工艺曲线 -->
       </div>
     </div>
   </div>
@@ -226,26 +273,26 @@ export default {
   components: { LineChart },
   data() {
     return {
-      // 遮罩层
+      // Loading mask / 遮罩层
       loading: true,
-      // 选中数组
+      // Selected array / 选中数组
       ids: [],
       currentRow: null,
-      // 非单个禁用
+      // Disable single selection / 非单个禁用
       single: true,
-      // 非多个禁用
+      // Disable multiple selection / 非多个禁用
       multiple: true,
-      // 显示搜索条件
+      // Show search conditions / 显示搜索条件
       showSearch: true,
-      // 总条数
+      // Total count / 总条数
       total: 0,
-      // 【请填写功能名称】表格数据
+      // Table data / 【请填写功能名称】表格数据
       setupList: [],
-      // 弹出层标题
+      // Dialog title / 弹出层标题
       title: "",
-      // 是否显示弹出层
+      // Whether to show dialog / 是否显示弹出层
       open: false,
-      // 查询参数
+      // Query parameters / 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -276,9 +323,9 @@ export default {
         updateTime: null,
         TYPE: null
       },
-      // 表单参数
+      // Form parameters / 表单参数
       form: {},
-      // 表单校验
+      // Form validation / 表单校验
       rules: {
       }
     };
@@ -287,7 +334,7 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询【请填写功能名称】列表 */
+    /** Query list / 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;
       listSetup(this.queryParams).then(response => {
@@ -296,12 +343,12 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
+    // Cancel button / 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 表单重置
+    // Form reset / 表单重置
     reset() {
       this.form = {
         ID: null,
@@ -334,31 +381,31 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
+    /** Search button operation / 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
       this.currentRow = null
     },
-    /** 重置按钮操作 */
+    /** Reset button operation / 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
+    // Multi-select data / 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.ID)
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    // 判断是否选中
+    // Check if selected / 判断是否选中
     isSelected(item) {
       return this.ids.includes(this.getItemKey(item))
     },
     getItemKey(item) {
       return item.id ?? item.ID
     },
-    // 切换选中状态
+    // Toggle selection state / 切换选中状态
     toggleSelection(item, checked) {
       const key = this.getItemKey(item)
       if (checked) {
@@ -371,40 +418,40 @@ export default {
       this.single = this.ids.length !== 1
       this.multiple = this.ids.length === 0
     },
-    /** 新增按钮操作 */
+    /** Add button operation / 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加【请填写功能名称】";
+      this.title = "Add Setup"; // 添加【请填写功能名称】
     },
-    /** 修改按钮操作 */
+    /** Edit button operation / 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const ID = row.ID || this.ids
       getSetup(ID).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改【请填写功能名称】";
+        this.title = "Edit Setup"; // 修改【请填写功能名称】
       });
     },
     handleClick(item) {
       this.currentRow = item;
-      console.log('点击', item)
+      console.log('Click', item) // 点击
       // this.handleUpdate(item);
     },
-    /** 提交按钮 */
+    /** Submit button / 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.ID != null) {
             updateSetup(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+              this.$modal.msgSuccess("Update successful"); // 修改成功
               this.open = false;
               this.getList();
             });
           } else {
             addSetup(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
+              this.$modal.msgSuccess("Add successful"); // 新增成功
               this.open = false;
               this.getList();
             });
@@ -412,17 +459,20 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
+    /** Delete button operation / 删除按钮操作 */
     handleDelete(row) {
       const IDs = row.id || this.ids;
-      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + IDs + '"的数据项？').then(function () {
+      this.$modal.confirm(`Confirm to delete setup record with ID "${IDs}"?`, 'Confirm Delete', {
+        // 是否确认删除【请填写功能名称】编号为"${IDs}"的数据项？
+        type: 'warning'
+      }).then(function () {
         return delSetup(IDs);
       }).then(() => {
         this.getList();
-        this.$modal.msgSuccess("删除成功");
+        this.$modal.msgSuccess("Delete successful"); // 删除成功
       }).catch(() => { });
     },
-    /** 导出按钮操作 */
+    /** Export button operation / 导出按钮操作 */
     handleExport() {
       this.download('system/setup/export', {
         ...this.queryParams
@@ -602,7 +652,7 @@ export default {
   padding: 40px 0;
 }
 
-/* 统计图样式，复用 PDO 工业风 */
+/* Statistics chart styles, reuse PDO industrial style / 统计图样式，复用 PDO 工业风 */
 .statistics-container {
   margin-top: 16px;
   background: #ffffff;
diff --git a/apps/l2/src/views/l2/socket/index.vue b/apps/l2/src/views/l2/socket/index.vue
index 78e592f..789d7e4 100644
--- a/apps/l2/src/views/l2/socket/index.vue
+++ b/apps/l2/src/views/l2/socket/index.vue
@@ -1,49 +1,57 @@
 <template>
   <div class="socket-monitor">
-    <!-- 类型选择器 -->
+    <!-- Type selector / 类型选择器 -->
     <div class="type-selector">
-      <label>数据类型：</label>
+      <label>Data Type:</label>
+      <!-- 数据类型： -->
       <select v-model="currentType" @change="handleTypeChange">
         <option v-for="type in types" :key="type" :value="type">{{ type }}</option>
       </select>
     </div>
 
-    <!-- 连接状态指示 -->
+    <!-- Connection status indicator / 连接状态指示 -->
     <div class="connection-status" :class="{ connected: isConnected }">
-      连接状态：{{ isConnected ? '已连接' : '连接中...' }}
+      Connection Status: {{ isConnected ? 'Connected' : 'Connecting...' }}
+      <!-- 连接状态：{{ isConnected ? '已连接' : '连接中...' }} -->
     </div>
 
-    <!-- 图表区域 - 仅在track_measure类型时显示 -->
+    <!-- Chart area - only displayed when type is track_measure / 图表区域 - 仅在track_measure类型时显示 -->
     <div v-if="currentType === 'track_measure'" class="charts-container">
       <div class="chart-group">
-        <h3>入口数据监控</h3>
+        <h3>Entry Data Monitor</h3>
+        <!-- 入口数据监控 -->
         <div ref="entryChart" class="chart"></div>
       </div>
       
       <div class="chart-group">
-        <h3>炉温数据监控</h3>
+        <h3>Furnace Temperature Monitor</h3>
+        <!-- 炉温数据监控 -->
         <div ref="furnaceChart" class="chart"></div>
       </div>
       
       <div class="chart-group">
-        <h3>涂层数据监控</h3>
+        <h3>Coating Data Monitor</h3>
+        <!-- 涂层数据监控 -->
         <div ref="coatChart" class="chart"></div>
       </div>
       
       <div class="chart-group">
-        <h3>出口数据监控</h3>
+        <h3>Exit Data Monitor</h3>
+        <!-- 出口数据监控 -->
         <div ref="exitChart" class="chart"></div>
       </div>
     </div>
     
-    <!-- 其他类型提示 -->
+    <!-- Other type tip / 其他类型提示 -->
     <div v-else class="other-type-info">
-      选择 "track_measure" 类型以查看数据图表
+      Select "track_measure" type to view data charts
+      <!-- 选择 "track_measure" 类型以查看数据图表 -->
     </div>
 
-    <!-- 原始数据展示区 -->
+    <!-- Raw data display area / 原始数据展示区 -->
     <div class="raw-data">
-      <h3>原始数据</h3>
+      <h3>Raw Data</h3>
+      <!-- 原始数据 -->
       <pre>{{ formattedRawData }}</pre>
     </div>
   </div>
@@ -68,12 +76,12 @@ export default {
       currentType: 'track_measure',
       isConnected: false,
       rawData: null,
-      // 图表实例
+      // Chart instances / 图表实例
       entryChart: null,
       furnaceChart: null,
       coatChart: null,
       exitChart: null,
-      // 图表数据存储
+      // Chart data storage / 图表数据存储
       chartData: {
         entry: {
           time: [],
@@ -102,13 +110,13 @@ export default {
           speedExitSection: []
         }
       },
-      // 最多显示的数据点数量
+      // Maximum number of data points to display / 最多显示的数据点数量
       maxDataPoints: 30
     };
   },
   computed: {
     formattedRawData() {
-      if (!this.rawData) return '等待接收数据...';
+      if (!this.rawData) return 'Waiting for data...'; // 等待接收数据...
       try {
         return JSON.stringify(JSON.parse(this.rawData), null, 2);
       } catch (e) {
@@ -117,7 +125,7 @@ export default {
     }
   },
   mounted() {
-    // 初始化为track_measure时直接初始化图表
+    // Initialize charts directly when type is track_measure / 初始化为track_measure时直接初始化图表
     if (this.currentType === 'track_measure') {
       this.initCharts();
     }
@@ -125,7 +133,7 @@ export default {
     window.addEventListener('resize', this.handleWindowResize);
   },
   updated() {
-    // 当组件更新且类型为track_measure时，确保图表已初始化
+    // Ensure charts are initialized when component updates and type is track_measure / 当组件更新且类型为track_measure时，确保图表已初始化
     if (this.currentType === 'track_measure' && !this.entryChart) {
       this.initCharts();
     }
@@ -136,12 +144,12 @@ export default {
     window.removeEventListener('resize', this.handleWindowResize);
   },
   methods: {
-    // 初始化所有图表
+    // Initialize all charts / 初始化所有图表
     initCharts() {
-      // 先销毁可能存在的旧实例
+      // Destroy existing old instances first / 先销毁可能存在的旧实例
       this.destroyCharts();
       
-      // 确保DOM元素存在再初始化
+      // Ensure DOM elements exist before initialization / 确保DOM元素存在再初始化
       if (this.$refs.entryChart) {
         this.entryChart = echarts.init(this.$refs.entryChart);
         this.entryChart.setOption(this.getEntryChartOption());
@@ -163,13 +171,14 @@ export default {
       }
     },
     
-    // 入口数据图表配置
+    // Entry data chart configuration / 入口数据图表配置
     getEntryChartOption() {
       return {
         backgroundColor: 'transparent',
         tooltip: { trigger: 'axis' },
         legend: { 
-          data: ['入口张力1', '入口张力2', '入口张力3', '带钢速度'],
+          data: ['Entry Tension 1', 'Entry Tension 2', 'Entry Tension 3', 'Strip Speed'],
+          // 入口张力1, 入口张力2, 入口张力3, 带钢速度
           textStyle: { color: '#e0e0e0' }
         },
         grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -187,21 +196,26 @@ export default {
           splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
         },
         series: [
-          { name: '入口张力1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '入口张力2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '入口张力3', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '带钢速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          { name: 'Entry Tension 1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 入口张力1
+          { name: 'Entry Tension 2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 入口张力2
+          { name: 'Entry Tension 3', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 入口张力3
+          { name: 'Strip Speed', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          // 带钢速度
         ]
       };
     },
     
-    // 炉温数据图表配置
+    // Furnace temperature data chart configuration / 炉温数据图表配置
     getFurnaceChartOption() {
       return {
         backgroundColor: 'transparent',
         tooltip: { trigger: 'axis' },
         legend: { 
-          data: ['PH炉实际温度', 'NOF1炉实际温度', 'NOF1炉设定温度'],
+          data: ['PH Furnace Actual Temp', 'NOF1 Furnace Actual Temp', 'NOF1 Furnace Set Temp'],
+          // PH炉实际温度, NOF1炉实际温度, NOF1炉设定温度
           textStyle: { color: '#e0e0e0' }
         },
         grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -219,20 +233,24 @@ export default {
           splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
         },
         series: [
-          { name: 'PH炉实际温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: 'NOF1炉实际温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: 'NOF1炉设定温度', type: 'line', data: [], smooth: true, lineStyle: { width: 2, type: 'dashed' } }
+          { name: 'PH Furnace Actual Temp', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // PH炉实际温度
+          { name: 'NOF1 Furnace Actual Temp', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // NOF1炉实际温度
+          { name: 'NOF1 Furnace Set Temp', type: 'line', data: [], smooth: true, lineStyle: { width: 2, type: 'dashed' } }
+          // NOF1炉设定温度
         ]
       };
     },
     
-    // 涂层数据图表配置
+    // Coating data chart configuration / 涂层数据图表配置
     getCoatChartOption() {
       return {
         backgroundColor: 'transparent',
         tooltip: { trigger: 'axis' },
         legend: { 
-          data: ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', '出口速度'],
+          data: ['Avg Coating Weight Top', 'Avg Coating Weight Bottom', 'Air Knife Pressure', 'Exit Speed'],
+          // 顶部平均涂层重量, 底部平均涂层重量, 气刀压力, 出口速度
           textStyle: { color: '#e0e0e0' }
         },
         grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -250,21 +268,26 @@ export default {
           splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
         },
         series: [
-          { name: '顶部平均涂层重量', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '底部平均涂层重量', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '气刀压力', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '出口速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          { name: 'Avg Coating Weight Top', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 顶部平均涂层重量
+          { name: 'Avg Coating Weight Bottom', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 底部平均涂层重量
+          { name: 'Air Knife Pressure', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 气刀压力
+          { name: 'Exit Speed', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          // 出口速度
         ]
       };
     },
     
-    // 出口数据图表配置
+    // Exit data chart configuration / 出口数据图表配置
     getExitChartOption() {
       return {
         backgroundColor: 'transparent',
         tooltip: { trigger: 'axis' },
         legend: { 
-          data: ['出口张力1', '出口张力2', '出口速度'],
+          data: ['Exit Tension 1', 'Exit Tension 2', 'Exit Speed'],
+          // 出口张力1, 出口张力2, 出口速度
           textStyle: { color: '#e0e0e0' }
         },
         grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -282,9 +305,12 @@ export default {
           splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
         },
         series: [
-          { name: '出口张力1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '出口张力2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
-          { name: '出口速度', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          { name: 'Exit Tension 1', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 出口张力1
+          { name: 'Exit Tension 2', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } },
+          // 出口张力2
+          { name: 'Exit Speed', type: 'line', data: [], smooth: true, lineStyle: { width: 2 } }
+          // 出口速度
         ]
       };
     },
@@ -325,7 +351,7 @@ export default {
         this.socket = new WebSocket(url);
         
         this.socket.onopen = () => {
-          console.log('WebSocket连接已建立');
+          console.log('WebSocket connection established'); // WebSocket连接已建立
           this.isConnected = true;
         };
         
@@ -335,12 +361,12 @@ export default {
         };
         
         this.socket.onerror = (error) => {
-          console.error('WebSocket错误:', error);
+          console.error('WebSocket error:', error); // WebSocket错误
           this.isConnected = false;
         };
         
         this.socket.onclose = (event) => {
-          console.log(`WebSocket连接已关闭: ${event.code} - ${event.reason}`);
+          console.log(`WebSocket connection closed: ${event.code} - ${event.reason}`); // WebSocket连接已关闭
           this.isConnected = false;
           
           if (event.code !== 1000) {
@@ -348,31 +374,31 @@ export default {
           }
         };
       } catch (error) {
-        console.error('建立WebSocket连接失败:', error);
+        console.error('Failed to establish WebSocket connection:', error); // 建立WebSocket连接失败
         setTimeout(() => this.connectWebSocket(), 3000);
       }
     },
     
     disconnectWebSocket() {
       if (this.socket) {
-        this.socket.close(1000, '主动关闭');
+        this.socket.close(1000, 'Manual close'); // 主动关闭
         this.socket = null;
       }
     },
     
-    // 修复核心：切换类型时重新初始化图表
+    // Core fix: reinitialize charts when switching types / 修复核心：切换类型时重新初始化图表
     handleTypeChange() {
       this.rawData = null;
       this.resetChartData();
       
-      // 如果切换到track_measure类型，需要重新初始化图表
+      // If switching to track_measure type, need to reinitialize charts / 如果切换到track_measure类型，需要重新初始化图表
       if (this.currentType === 'track_measure') {
-        // 确保DOM更新后再初始化图表（使用$nextTick）
+        // Ensure DOM is updated before initializing charts (using $nextTick) / 确保DOM更新后再初始化图表（使用$nextTick）
         this.$nextTick(() => {
           this.initCharts();
         });
       } else {
-        // 切换到其他类型时销毁图表
+        // Destroy charts when switching to other types / 切换到其他类型时销毁图表
         this.destroyCharts();
       }
       
@@ -398,7 +424,7 @@ export default {
           this.processTrackMeasureData(parsedData);
         }
       } catch (error) {
-        console.error('数据解析错误:', error);
+        console.error('Data parsing error:', error); // 数据解析错误
       }
     },
     
diff --git a/apps/l2/src/views/l2/steelGrade/index.vue b/apps/l2/src/views/l2/steelGrade/index.vue
index 6d9dc9b..c9ebca8 100644
--- a/apps/l2/src/views/l2/steelGrade/index.vue
+++ b/apps/l2/src/views/l2/steelGrade/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="steel-grade-management">
-    <!-- 整体布局：左侧卡片列表 + 右侧明细面板 -->
+    <!-- Overall layout: left card list + right detail panel / 整体布局：左侧卡片列表 + 右侧明细面板 -->
     <div class="layout-container">
-      <!-- 左侧：搜索+卡片列表 -->
+      <!-- Left: search + card list / 左侧：搜索+卡片列表 -->
       <div class="left-panel">
-        <!-- 顶部搜索区域 -->
+        <!-- Top search area / 顶部搜索区域 -->
         <div class="search-container">
           <el-form 
             :inline="true" 
@@ -13,11 +13,13 @@
             label-width="0" 
             class="search-form"
           >
+             <!-- 请输入钢种名称 -->
             <el-form-item prop="name">
               <el-input 
                 size="mini" 
                 v-model="queryForm.name" 
-                placeholder="请输入钢种名称" 
+                placeholder="Please enter steel grade name" 
+             
                 clearable
                 @clear="handleReset"
               ></el-input>
@@ -29,42 +31,46 @@
                 :loading="btnLoading" 
                 icon="el-icon-search" 
                 size="mini"
-              >查询</el-button>
+              >Query</el-button>
+              <!-- 查询 -->
               <el-button 
                 @click="handleReset" 
                 icon="el-icon-refresh" 
                 size="mini"
-              >重置</el-button>
+              >Reset</el-button>
+              <!-- 重置 -->
               <el-button 
                 type="success" 
                 @click="handleAdd" 
                 icon="el-icon-plus" 
                 size="mini"
-              >新增钢种</el-button>
+              >Add Steel Grade</el-button>
+              <!-- 新增钢种 -->
             </el-form-item>
           </el-form>
         </div>
 
-        <!-- 钢种卡片列表 -->
+        <!-- Steel grade card list / 钢种卡片列表 -->
         <div class="card-list-container" v-loading="tableLoading">
-          <!-- 无数据提示 -->
+          <!-- No data tip / 无数据提示 -->
           <div class="empty-tip" v-if="tableData.length === 0 && !tableLoading">
-            <el-empty description="暂无钢种数据"></el-empty>
+            <el-empty description="No steel grade data"></el-empty>
+            <!-- 暂无钢种数据 -->
           </div>
 
-          <!-- 循环渲染紧凑卡片 -->
+          <!-- Loop render compact cards / 循环渲染紧凑卡片 -->
           <div 
             class="steel-grade-card"
             v-for="(item) in tableData" 
             :class="{ active: (selectedItem && selectedItem.gradeid) === item.gradeid }"
             @click="handleCardClick(item)"
           >
-            <!-- 卡片第一行：钢种名称 # ID -->
+            <!-- Card row 1: steel grade name # ID / 卡片第一行：钢种名称 # ID -->
             <div class="card-row row1">
               <span class="grade-name">{{ item.name }}</span>
               <span class="grade-id">#{{ item.gradeid }}</span>
             </div>
-            <!-- 卡片第二行：插入日期 + 操作按钮 -->
+            <!-- Card row 2: insert date + action buttons / 卡片第二行：插入日期 + 操作按钮 -->
             <div class="card-row row2">
               <span class="ins-date">{{ parseTime(item.insDate, '{y}-{m}-{d}') }}</span>
               <div class="card-actions">
@@ -73,69 +79,97 @@
                   type="text" 
                   @click.stop="handleEdit(item)" 
                   icon="el-icon-edit"
-                >编辑</el-button>
+                >Edit</el-button>
+                <!-- 编辑 -->
                 <el-button 
                   size="mini" 
                   type="text" 
                   @click.stop="handleDelete(item)" 
                   :loading="item.deleteLoading"
                   icon="el-icon-delete"
-                >删除</el-button>
+                >Delete</el-button>
+                <!-- 删除 -->
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 右侧：明细面板 -->
-      <div class="right-panel">
-        <!-- 未选择卡片提示 -->
+      <!-- Right: detail panel / 右侧：明细面板 -->
+      <div class="right-panel" v-loading="rightLoading">
+        <!-- No selection tip / 未选择卡片提示 -->
         <div class="empty-detail" v-if="!selectedItem && !dialogVisible">
-          <el-empty description="请选择左侧钢种查看详情"></el-empty>
+          <el-empty description="Please select a steel grade from the left to view details"></el-empty>
+          <!-- 请选择左侧钢种查看详情 -->
         </div>
 
-        <!-- 钢种明细展示 -->
+        <!-- Steel grade detail display / 钢种明细展示 -->
         <div class="detail-content" v-if="selectedItem && !dialogVisible">
           <div class="detail-header">
-            <h3>钢种详情</h3>
+            <h3>Steel Grade Details</h3>
+            <!-- 钢种详情 -->
             <el-button 
               type="primary" 
               @click="handleEdit(selectedItem)" 
               icon="el-icon-edit"
               size="mini"
-            >编辑</el-button>
+            >Edit</el-button>
+            <!-- 编辑 -->
           </div>
           <el-descriptions :column="2" border style="margin-top: 10px;">
-            <el-descriptions-item label="钢种ID">{{ selectedItem.gradeid }}</el-descriptions-item>
-            <el-descriptions-item label="钢种名称">{{ selectedItem.name }}</el-descriptions-item>
-            <el-descriptions-item label="来源">{{ selectedItem.origin }}</el-descriptions-item>
+            <el-descriptions-item label="Steel Grade ID">{{ selectedItem.gradeid }}</el-descriptions-item>
+            <!-- 钢种ID -->
+            <el-descriptions-item label="Steel Grade Name">{{ selectedItem.name }}</el-descriptions-item>
+            <!-- 钢种名称 -->
+            <el-descriptions-item label="Origin">{{ selectedItem.origin }}</el-descriptions-item>
+            <!-- 来源 -->
             <el-descriptions-item label="Sigma0">{{ selectedItem.sigma0 }}</el-descriptions-item>
-            <el-descriptions-item label="首次Sigma0">{{ selectedItem.firstSigma0 }}</el-descriptions-item>
-            <el-descriptions-item label="初始Sigma">{{ selectedItem.initSigma }}</el-descriptions-item>
-            <el-descriptions-item label="Ro值">{{ selectedItem.ro }}</el-descriptions-item>
-            <el-descriptions-item label="分类ID">{{ selectedItem.classId }}</el-descriptions-item>
-            <el-descriptions-item label="参数A">{{ selectedItem.a }}</el-descriptions-item>
-            <el-descriptions-item label="参数B">{{ selectedItem.b }}</el-descriptions-item>
-            <el-descriptions-item label="参数C">{{ selectedItem.c }}</el-descriptions-item>
-            <el-descriptions-item label="参数D">{{ selectedItem.d }}</el-descriptions-item>
-            <el-descriptions-item label="KC0参数">{{ selectedItem.kc0 }}</el-descriptions-item>
-            <el-descriptions-item label="KC1参数">{{ selectedItem.kc1 }}</el-descriptions-item>
-            <el-descriptions-item label="KC2参数">{{ selectedItem.kc2 }}</el-descriptions-item>
-            <el-descriptions-item label="KC3参数">{{ selectedItem.kc3 }}</el-descriptions-item>
-            <el-descriptions-item label="KC4参数">{{ selectedItem.kc4 }}</el-descriptions-item>
-            <el-descriptions-item label="Nu参数">{{ selectedItem.nu }}</el-descriptions-item>
-            <el-descriptions-item label="E参数">{{ selectedItem.e }}</el-descriptions-item>
-            <el-descriptions-item label="Chal参数">{{ selectedItem.chal }}</el-descriptions-item>
-            <el-descriptions-item label="Temp0参数">{{ selectedItem.temp0 }}</el-descriptions-item>
-            <el-descriptions-item label="强度">{{ selectedItem.strength }}</el-descriptions-item>
-            <el-descriptions-item label="焊接代码">{{ selectedItem.weldCode }}</el-descriptions-item>
-            <el-descriptions-item label="插入日期">{{ parseTime(selectedItem.insDate) }}</el-descriptions-item>
+            <el-descriptions-item label="First Sigma0">{{ selectedItem.firstSigma0 }}</el-descriptions-item>
+            <!-- 首次Sigma0 -->
+            <el-descriptions-item label="Initial Sigma">{{ selectedItem.initSigma }}</el-descriptions-item>
+            <!-- 初始Sigma -->
+            <el-descriptions-item label="Ro Value">{{ selectedItem.ro }}</el-descriptions-item>
+            <!-- Ro值 -->
+            <el-descriptions-item label="Class ID">{{ selectedItem.classId }}</el-descriptions-item>
+            <!-- 分类ID -->
+            <el-descriptions-item label="Parameter A">{{ selectedItem.a }}</el-descriptions-item>
+            <!-- 参数A -->
+            <el-descriptions-item label="Parameter B">{{ selectedItem.b }}</el-descriptions-item>
+            <!-- 参数B -->
+            <el-descriptions-item label="Parameter C">{{ selectedItem.c }}</el-descriptions-item>
+            <!-- 参数C -->
+            <el-descriptions-item label="Parameter D">{{ selectedItem.d }}</el-descriptions-item>
+            <!-- 参数D -->
+            <el-descriptions-item label="KC0 Parameter">{{ selectedItem.kc0 }}</el-descriptions-item>
+            <!-- KC0参数 -->
+            <el-descriptions-item label="KC1 Parameter">{{ selectedItem.kc1 }}</el-descriptions-item>
+            <!-- KC1参数 -->
+            <el-descriptions-item label="KC2 Parameter">{{ selectedItem.kc2 }}</el-descriptions-item>
+            <!-- KC2参数 -->
+            <el-descriptions-item label="KC3 Parameter">{{ selectedItem.kc3 }}</el-descriptions-item>
+            <!-- KC3参数 -->
+            <el-descriptions-item label="KC4 Parameter">{{ selectedItem.kc4 }}</el-descriptions-item>
+            <!-- KC4参数 -->
+            <el-descriptions-item label="Nu Parameter">{{ selectedItem.nu }}</el-descriptions-item>
+            <!-- Nu参数 -->
+            <el-descriptions-item label="E Parameter">{{ selectedItem.e }}</el-descriptions-item>
+            <!-- E参数 -->
+            <el-descriptions-item label="Chal Parameter">{{ selectedItem.chal }}</el-descriptions-item>
+            <!-- Chal参数 -->
+            <el-descriptions-item label="Temp0 Parameter">{{ selectedItem.temp0 }}</el-descriptions-item>
+            <!-- Temp0参数 -->
+            <el-descriptions-item label="Strength">{{ selectedItem.strength }}</el-descriptions-item>
+            <!-- 强度 -->
+            <el-descriptions-item label="Weld Code">{{ selectedItem.weldCode }}</el-descriptions-item>
+            <!-- 焊接代码 -->
+            <el-descriptions-item label="Insert Date">{{ parseTime(selectedItem.insDate) }}</el-descriptions-item>
+            <!-- 插入日期 -->
           </el-descriptions>
         </div>
       </div>
     </div>
 
-    <!-- 编辑/新增弹窗 -->
+    <!-- Edit/Add Dialog / 编辑/新增弹窗 -->
     <el-dialog 
       :title="dialogTitle" 
       :visible.sync="dialogVisible" 
@@ -151,17 +185,21 @@
       >
         <el-row :gutter="20">
           <el-col :span="8">
-            <el-form-item label="钢种ID" prop="gradeid">
+            <el-form-item label="Steel Grade ID" prop="gradeid">
+              <!-- 钢种ID -->
               <el-input v-model="formData.gradeid" :disabled="isEdit"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="钢种名称" prop="name">
-              <el-input v-model="formData.name" placeholder="请输入钢种名称"></el-input>
+            <el-form-item label="Steel Grade Name" prop="name">
+              <!-- 钢种名称 -->
+              <el-input v-model="formData.name" placeholder="Please enter steel grade name"></el-input>
+              <!-- 请输入钢种名称 -->
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="来源" prop="origin">
+            <el-form-item label="Origin" prop="origin">
+              <!-- 来源 -->
               <el-input-number v-model="formData.origin" :min="0" :step="1" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
@@ -171,102 +209,122 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="首次Sigma0" prop="firstSigma0">
+            <el-form-item label="First Sigma0" prop="firstSigma0">
+              <!-- 首次Sigma0 -->
               <el-input-number v-model="formData.firstSigma0" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="初始Sigma" prop="initSigma">
+            <el-form-item label="Initial Sigma" prop="initSigma">
+              <!-- 初始Sigma -->
               <el-input-number v-model="formData.initSigma" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="Ro值" prop="ro">
+            <el-form-item label="Ro Value" prop="ro">
+              <!-- Ro值 -->
               <el-input-number v-model="formData.ro" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="分类ID" prop="classId">
+            <el-form-item label="Class ID" prop="classId">
+              <!-- 分类ID -->
               <el-input-number v-model="formData.classId" :min="0" :step="1" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="参数A" prop="a">
+            <el-form-item label="Parameter A" prop="a">
+              <!-- 参数A -->
               <el-input-number v-model="formData.a" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="参数B" prop="b">
+            <el-form-item label="Parameter B" prop="b">
+              <!-- 参数B -->
               <el-input-number v-model="formData.b" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="参数C" prop="c">
+            <el-form-item label="Parameter C" prop="c">
+              <!-- 参数C -->
               <el-input-number v-model="formData.c" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="参数D" prop="d">
+            <el-form-item label="Parameter D" prop="d">
+              <!-- 参数D -->
               <el-input-number v-model="formData.d" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="KC0参数" prop="kc0">
+            <el-form-item label="KC0 Parameter" prop="kc0">
+              <!-- KC0参数 -->
               <el-input-number v-model="formData.kc0" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="KC1参数" prop="kc1">
+            <el-form-item label="KC1 Parameter" prop="kc1">
+              <!-- KC1参数 -->
               <el-input-number v-model="formData.kc1" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="KC2参数" prop="kc2">
+            <el-form-item label="KC2 Parameter" prop="kc2">
+              <!-- KC2参数 -->
               <el-input-number v-model="formData.kc2" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="KC3参数" prop="kc3">
+            <el-form-item label="KC3 Parameter" prop="kc3">
+              <!-- KC3参数 -->
               <el-input-number v-model="formData.kc3" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="KC4参数" prop="kc4">
+            <el-form-item label="KC4 Parameter" prop="kc4">
+              <!-- KC4参数 -->
               <el-input-number v-model="formData.kc4" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="Nu参数" prop="nu">
+            <el-form-item label="Nu Parameter" prop="nu">
+              <!-- Nu参数 -->
               <el-input-number v-model="formData.nu" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="E参数" prop="e">
+            <el-form-item label="E Parameter" prop="e">
+              <!-- E参数 -->
               <el-input-number v-model="formData.e" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="Chal参数" prop="chal">
+            <el-form-item label="Chal Parameter" prop="chal">
+              <!-- Chal参数 -->
               <el-input-number v-model="formData.chal" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="Temp0参数" prop="temp0">
+            <el-form-item label="Temp0 Parameter" prop="temp0">
+              <!-- Temp0参数 -->
               <el-input-number v-model="formData.temp0" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="强度" prop="strength">
+            <el-form-item label="Strength" prop="strength">
+              <!-- 强度 -->
               <el-input-number v-model="formData.strength" :step="0.01" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="焊接代码" prop="weldCode">
+            <el-form-item label="Weld Code" prop="weldCode">
+              <!-- 焊接代码 -->
               <el-input-number v-model="formData.weldCode" :min="0" :step="1" style="width: 100%;"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="插入日期" prop="insDate">
+            <el-form-item label="Insert Date" prop="insDate">
+              <!-- 插入日期 -->
               <el-date-picker v-model="formData.insDate" type="datetime" disabled value-format="yyyy-MM-ddTHH:mm:ss" style="width: 100%;"/>
             </el-form-item>
           </el-col>
@@ -274,8 +332,10 @@
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible=false">取消</el-button>
-        <el-button type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
+        <el-button @click="dialogVisible=false">Cancel</el-button>
+        <!-- 取消 -->
+        <el-button type="primary" @click="handleSave" :loading="saveLoading">Save</el-button>
+        <!-- 保存 -->
       </div>
     </el-dialog>
   </div>
@@ -295,7 +355,8 @@ export default {
       tableLoading: false,
       btnLoading: false,
       dialogVisible: false,
-      dialogTitle: '新增钢种',
+      dialogTitle: 'Add Steel Grade', // 新增钢种
+      rightLoading: false,
       formData: {
         gradeid: null,
         name: '',
@@ -324,16 +385,18 @@ export default {
       },
       formRules: {
         gradeid: [
-          { required: true, message: '请输入钢种ID', trigger: 'blur' }
+          { required: true, message: 'Please enter steel grade ID', trigger: 'blur' }
+          // 请输入钢种ID
         ],
         name: [
-          { required: true, message: '请输入钢种名称', trigger: 'blur' }
+          { required: true, message: 'Please enter steel grade name', trigger: 'blur' }
+          // 请输入钢种名称
         ]
       },
       saveLoading: false,
       currentRow: {},
       isEdit: false,
-      selectedItem: null // 选中的钢种项
+      selectedItem: null // Selected steel grade item / 选中的钢种项
     }
   },
   created() {
@@ -343,12 +406,12 @@ export default {
     getSteelGradeList() {
       this.tableLoading = true
       getSteelGradeList().then(res => {
-        // 保留完整数据，添加删除加载状态
+        // Keep complete data, add delete loading state / 保留完整数据，添加删除加载状态
         this.tableData = res.data.map(item => ({
           ...item,
           deleteLoading: false
         }))
-        // 前端搜索过滤（仅针对name）
+        // Frontend search filter (only for name) / 前端搜索过滤（仅针对name）
         if (this.queryForm.name) {
           this.tableData = this.tableData.filter(item => 
             item.name && item.name.includes(this.queryForm.name)
@@ -356,7 +419,7 @@ export default {
         }
       }).catch(err => {
         console.error(err)
-        this.$message.error('获取数据失败')
+        this.$message.error('Failed to fetch data') // 获取数据失败
       }).finally(() => {
         this.tableLoading = false
         this.btnLoading = false
@@ -370,20 +433,23 @@ export default {
       this.$refs.queryForm.resetFields();
       this.getSteelGradeList()
     },
-    // 卡片点击事件：加载详情并展示
+    // Card click event: load and display details / 卡片点击事件：加载详情并展示
     handleCardClick(item) {
-      // 调用详情接口获取完整数据
+      // Call detail API to get complete data / 调用详情接口获取完整数据
+      this.rightLoading = true
       getSteelGradeInfo(item.gradeid).then(res => {
         this.selectedItem = { ...res.data }
+        this.rightLoading = false
       }).catch(() => {
-        // 降级处理：使用列表数据
+        // Fallback: use list data / 降级处理：使用列表数据
         this.selectedItem = { ...item }
+        this.rightLoading = false
       })
     },
     handleAdd() {
-      this.dialogTitle = '新增钢种';
+      this.dialogTitle = 'Add Steel Grade'; // 新增钢种
       this.isEdit = false;
-      // 重置表单
+      // Reset form / 重置表单
       this.formData = {
         gradeid: null,
         name: '',
@@ -413,13 +479,13 @@ export default {
       this.dialogVisible = true
     },
     handleEdit(row) {
-      this.dialogTitle = '编辑钢种';
+      this.dialogTitle = 'Edit Steel Grade'; // 编辑钢种
       this.isEdit = true;
-      // 调用详情接口获取完整字段数据
+      // Call detail API to get complete field data / 调用详情接口获取完整字段数据
       getSteelGradeInfo(row.gradeid).then(res => {
         this.formData = { ...res.data }
       }).catch(() => {
-        // 降级处理
+        // Fallback / 降级处理
         this.formData = {
           ...this.formData,
           ...row
@@ -428,17 +494,18 @@ export default {
       this.dialogVisible = true
     },
     handleDelete(row) {
-      this.$confirm(`确定删除钢种 ${row.name}?`, '确认删除', { type: 'danger' }).then(() => {
+      this.$confirm(`Confirm to delete steel grade ${row.name}?`, 'Confirm Delete', { type: 'danger' }).then(() => {
+        // 确定删除钢种 ${row.name}?, 确认删除
         row.deleteLoading = true
         deleteSteelGrade(row.gradeid).then(res => {
           if (res.code === 200) {
-            this.$message.success('删除成功');
+            this.$message.success('Delete successful'); // 删除成功
             this.getSteelGradeList()
-            // 若删除的是当前选中项，清空选中状态
+            // If deleted item is currently selected, clear selection / 若删除的是当前选中项，清空选中状态
             if (this.selectedItem?.gradeid === row.gradeid) {
               this.selectedItem = null
             }
-          } else this.$message.error(res.msg || '删除失败')
+          } else this.$message.error(res.msg || 'Delete failed') // 删除失败
         }).finally(() => {
           row.deleteLoading = false
         })
@@ -452,10 +519,10 @@ export default {
         const request = this.isEdit ? updateSteelGrade(this.formData) : addSteelGrade(this.formData)
         request.then(res => {
           if (res.code === 200) {
-            this.$message.success('保存成功');
+            this.$message.success('Save successful'); // 保存成功
             this.dialogVisible = false;
             this.getSteelGradeList()
-          } else this.$message.error(res.msg || '保存失败')
+          } else this.$message.error(res.msg || 'Save failed') // 保存失败
         }).finally(() => {
           this.saveLoading = false
         })
diff --git a/apps/l2/src/views/l2/stop/index.vue b/apps/l2/src/views/l2/stop/index.vue
index 86770c3..4254d8a 100644
--- a/apps/l2/src/views/l2/stop/index.vue
+++ b/apps/l2/src/views/l2/stop/index.vue
@@ -1,26 +1,32 @@
 <template>
   <div class="stoppage-management">
-    <!-- 查询表单区域 -->
+    <!-- Query Form Area / 查询表单区域 -->
     <div class="stop-header">
       <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px" size="small">
-        <el-form-item label="开始时间" prop="startDate">
-          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
+        <el-form-item label="Start Date" prop="startDate">
+          <!-- 开始时间 -->
+          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="Select start date" value-format="yyyy-MM-dd"
             :clearable="true"></el-date-picker>
+          <!-- 选择开始时间 -->
         </el-form-item>
 
-        <el-form-item label="结束时间" prop="endDate">
-          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束时间" value-format="yyyy-MM-dd"
+        <el-form-item label="End Date" prop="endDate">
+          <!-- 结束时间 -->
+          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="Select end date" value-format="yyyy-MM-dd"
             :clearable="true"></el-date-picker>
+          <!-- 选择结束时间 -->
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
-          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
+          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">Query</el-button>
+          <!-- 查询 -->
+          <el-button @click="handleReset" icon="el-icon-refresh">Reset</el-button>
+          <!-- 重置 -->
         </el-form-item>
       </el-form>
     </div>
 
-    <!-- 卡片网格布局 -->
+    <!-- Card Grid Layout / 卡片网格布局 -->
     <div v-loading="tableLoading" class="card-grid-container">
       <el-row :gutter="10">
         <el-col 
@@ -41,71 +47,88 @@
             @click.native="handleRowClick(item)"
           >
             <div slot="header" class="card-header">
-              <div class="card-title">停机ID: {{ item.stopid || '-' }}</div>
-              <div class="card-subtitle">钢卷号: {{ item.coilid || '-' }}</div>
+              <div class="card-title">Stop ID: {{ item.stopid || '-' }}</div>
+              <!-- 停机ID -->
+              <div class="card-subtitle">Coil ID: {{ item.coilid || '-' }}</div>
+              <!-- 钢卷号 -->
             </div>
             <div class="card-body">
               <div class="param-groups-row">
-                <!-- 基本信息 -->
+                <!-- Basic Info / 基本信息 -->
                 <div class="param-group">
-                  <div class="group-title">基本信息</div>
+                  <div class="group-title">Basic Info</div>
+                  <!-- 基本信息 -->
                   <div class="param-list">
                     <div class="param-line">
-                      <span class="param-label">停机类型:</span>
+                      <span class="param-label">Stop Type:</span>
+                      <!-- 停机类型 -->
                       <span class="param-value">{{ item.stopType || '-' }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">班:</span>
+                      <span class="param-label">Shift:</span>
+                      <!-- 班 -->
                       <span class="param-value">{{ item.shift || '-' }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">组:</span>
+                      <span class="param-label">Crew:</span>
+                      <!-- 组 -->
                       <span class="param-value">{{ item.crew || '-' }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">区域:</span>
+                      <span class="param-label">Area:</span>
+                      <!-- 区域 -->
                       <span class="param-value">{{ item.area || '-' }}</span>
                     </div>
                   </div>
                 </div>
 
-                <!-- 设备信息 -->
+                <!-- Device Info / 设备信息 -->
                 <div class="param-group">
-                  <div class="group-title">设备信息</div>
+                  <div class="group-title">Device Info</div>
+                  <!-- 设备信息 -->
                   <div class="param-list">
                     <div class="param-line">
-                      <span class="param-label">设备:</span>
+                      <span class="param-label">Device:</span>
+                      <!-- 设备 -->
                       <span class="param-value">{{ item.seton || '-' }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">机组:</span>
+                      <span class="param-label">Unit:</span>
+                      <!-- 机组 -->
                       <span class="param-value">{{ item.unit || '-' }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">停机时长:</span>
-                      <span class="param-value">{{ item.duration || '-' }} 分钟</span>
+                      <span class="param-label">Duration:</span>
+                      <!-- 停机时长 -->
+                      <span class="param-value">{{ item.duration || '-' }} min</span>
+                      <!-- 分钟 -->
                     </div>
                     <div class="param-line">
-                      <span class="param-label">更新时间:</span>
+                      <span class="param-label">Update Time:</span>
+                      <!-- 更新时间 -->
                       <span class="param-value">{{ formatTime(item.insdate) }}</span>
                     </div>
                   </div>
                 </div>
 
-                <!-- 时间信息 -->
+                <!-- Time Info / 时间信息 -->
                 <div class="param-group">
-                  <div class="group-title">时间信息</div>
+                  <div class="group-title">Time Info</div>
+                  <!-- 时间信息 -->
                   <div class="param-list">
                     <div class="param-line">
-                      <span class="param-label">开始时间:</span>
+                      <span class="param-label">Start Time:</span>
+                      <!-- 开始时间 -->
                       <span class="param-value">{{ formatTime(item.startDate) }}</span>
                     </div>
                     <div class="param-line">
-                      <span class="param-label">结束时间:</span>
+                      <span class="param-label">End Time:</span>
+                      <!-- 结束时间 -->
                       <span class="param-value">{{ formatTime(item.endDate) }}</span>
                     </div>
                     <div class="param-line full-width" v-if="item.remark">
-                      <span class="param-label">停机原因:</span>
+                      <span class="param-label">Stop Reason:</span>
+                      <!-- 停机原因 -->
                       <span class="param-value">{{ item.remark }}</span>
                     </div>
                   </div>
@@ -118,84 +141,117 @@
                 type="primary"
                 icon="el-icon-edit"
                 @click.stop="handleEdit(item)"
-              >编辑</el-button>
+              >Edit</el-button>
+              <!-- 编辑 -->
               <el-button
                 size="mini"
                 type="danger"
                 icon="el-icon-delete"
                 :loading="item.deleteLoading"
                 @click.stop="handleDelete(item)"
-              >删除</el-button>
+              >Delete</el-button>
+              <!-- 删除 -->
             </div>
           </el-card>
         </el-col>
       </el-row>
       <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
-        <el-empty description="暂无数据"></el-empty>
+        <el-empty description="No data"></el-empty>
+        <!-- 暂无数据 -->
       </div>
     </div>
 
-    <!-- 编辑/新增弹窗 -->
+    <!-- Edit/Add Dialog / 编辑/新增弹窗 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
       <el-form :model="formData" ref="formData" label-width="120px" :rules="formRules">
-        <el-form-item label="停机ID" prop="stopid" v-if="formData.stopid">
+        <el-form-item label="Stop ID" prop="stopid" v-if="formData.stopid">
+          <!-- 停机ID -->
           <el-input v-model="formData.stopid" disabled></el-input>
         </el-form-item>
 
-        <el-form-item label="钢卷号" prop="coilid">
-          <el-input v-model="formData.coilid" placeholder="请输入钢卷号"></el-input>
+        <el-form-item label="Coil ID" prop="coilid">
+          <!-- 钢卷号 -->
+          <el-input v-model="formData.coilid" placeholder="Please enter Coil ID"></el-input>
+          <!-- 请输入钢卷号 -->
         </el-form-item>
 
-        <el-form-item label="班" prop="shift">
-          <el-select v-model="formData.shift" placeholder="请选择班次" clearable>
-            <el-option label="早班" value="早班"></el-option>
-            <el-option label="中班" value="中班"></el-option>
-            <el-option label="晚班" value="晚班"></el-option>
+        <el-form-item label="Shift" prop="shift">
+          <!-- 班 -->
+          <el-select v-model="formData.shift" placeholder="Please select shift" clearable>
+            <!-- 请选择班次 -->
+            <el-option label="Morning Shift" value="早班"></el-option>
+            <!-- 早班 -->
+            <el-option label="Afternoon Shift" value="中班"></el-option>
+            <!-- 中班 -->
+            <el-option label="Night Shift" value="晚班"></el-option>
+            <!-- 晚班 -->
           </el-select>
         </el-form-item>
 
-        <el-form-item label="组" prop="crew">
-          <el-input v-model="formData.crew" placeholder="请输入组号"></el-input>
+        <el-form-item label="Crew" prop="crew">
+          <!-- 组 -->
+          <el-input v-model="formData.crew" placeholder="Please enter crew number"></el-input>
+          <!-- 请输入组号 -->
         </el-form-item>
 
-        <el-form-item label="区域" prop="area">
-          <el-input v-model="formData.area" placeholder="请输入区域"></el-input>
+        <el-form-item label="Area" prop="area">
+          <!-- 区域 -->
+          <el-input v-model="formData.area" placeholder="Please enter area"></el-input>
+          <!-- 请输入区域 -->
         </el-form-item>
 
-        <el-form-item label="机组" prop="unit">
-          <el-input v-model="formData.unit" placeholder="请输入机组"></el-input>
+        <el-form-item label="Unit" prop="unit">
+          <!-- 机组 -->
+          <el-input v-model="formData.unit" placeholder="Please enter unit"></el-input>
+          <!-- 请输入机组 -->
         </el-form-item>
 
-        <el-form-item label="设备" prop="seton">
-          <el-input v-model="formData.seton" placeholder="请输入设备"></el-input>
+        <el-form-item label="Device" prop="seton">
+          <!-- 设备 -->
+          <el-input v-model="formData.seton" placeholder="Please enter device"></el-input>
+          <!-- 请输入设备 -->
         </el-form-item>
 
-        <el-form-item label="开始时间" prop="startDate">
-          <el-date-picker v-model="formData.startDate" type="datetime" placeholder="选择开始时间"
+        <el-form-item label="Start Time" prop="startDate">
+          <!-- 开始时间 -->
+          <el-date-picker v-model="formData.startDate" type="datetime" placeholder="Select start time"
             value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+          <!-- 选择开始时间 -->
         </el-form-item>
 
-        <el-form-item label="结束时间" prop="endDate">
-          <el-date-picker v-model="formData.endDate" type="datetime" placeholder="选择结束时间"
+        <el-form-item label="End Time" prop="endDate">
+          <!-- 结束时间 -->
+          <el-date-picker v-model="formData.endDate" type="datetime" placeholder="Select end time"
             value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+          <!-- 选择结束时间 -->
         </el-form-item>
 
-        <el-form-item label="停机类型" prop="stopType">
-          <el-select v-model="formData.stopType" placeholder="请选择停机类型" clearable>
-            <el-option label="计划停机" value="计划停机"></el-option>
-            <el-option label="故障停机" value="故障停机"></el-option>
-            <el-option label="维护停机" value="维护停机"></el-option>
-            <el-option label="其他" value="其他"></el-option>
+        <el-form-item label="Stop Type" prop="stopType">
+          <!-- 停机类型 -->
+          <el-select v-model="formData.stopType" placeholder="Please select stop type" clearable>
+            <!-- 请选择停机类型 -->
+            <el-option label="Planned Stop" value="计划停机"></el-option>
+            <!-- 计划停机 -->
+            <el-option label="Fault Stop" value="故障停机"></el-option>
+            <!-- 故障停机 -->
+            <el-option label="Maintenance Stop" value="维护停机"></el-option>
+            <!-- 维护停机 -->
+            <el-option label="Other" value="其他"></el-option>
+            <!-- 其他 -->
           </el-select>
         </el-form-item>
 
-        <el-form-item label="停机原因" prop="remark">
-          <el-input v-model="formData.remark" placeholder="请输入停机原因" type="textarea" rows="4"></el-input>
+        <el-form-item label="Stop Reason" prop="remark">
+          <!-- 停机原因 -->
+          <el-input v-model="formData.remark" placeholder="Please enter stop reason" type="textarea" rows="4"></el-input>
+          <!-- 请输入停机原因 -->
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <!-- 取消 -->
+        <el-button type="primary" @click="handleSave" :loading="saveLoading">Save</el-button>
+        <!-- 保存 -->
       </div>
     </el-dialog>
   </div>
@@ -208,20 +264,21 @@ export default {
   name: 'StoppageManagement',
   data() {
     return {
-      // 查询表单数据
+      // Query form data / 查询表单数据
       queryForm: {
-        // 只保留年月日YYYY-mm-dd
+        // Only keep YYYY-MM-dd format / 只保留年月日YYYY-mm-dd
         startDate: '2023-08-13',
         endDate: '2025-08-20'
       },
-      // 表格数据
+      // Table data / 表格数据
       tableData: [],
-      // 加载状态
+      // Loading state / 加载状态
       tableLoading: false,
       btnLoading: false,
-      // 弹窗状态
+      // Dialog state / 弹窗状态
       dialogVisible: false,
-      dialogTitle: '新增停机记录',
+      dialogTitle: 'Add Stoppage Record',
+      // 新增停机记录
       // 表单数据
       formData: {
         stopid: '',
@@ -238,30 +295,33 @@ export default {
         stopType: '',
         remark: ''
       },
-      // 表单验证规则
+      // Form validation rules / 表单验证规则
       formRules: {
         startDate: [
-          { required: true, message: '请选择开始时间', trigger: 'blur' }
+          { required: true, message: 'Please select start time', trigger: 'blur' }
+          // 请选择开始时间
         ],
         endDate: [
-          { required: true, message: '请选择结束时间', trigger: 'blur' }
+          { required: true, message: 'Please select end time', trigger: 'blur' }
+          // 请选择结束时间
         ],
         seton: [
-          { required: true, message: '请输入设备', trigger: 'blur' }
+          { required: true, message: 'Please enter device', trigger: 'blur' }
+          // 请输入设备
         ]
       },
-      // 保存按钮加载状态
+      // Save button loading state / 保存按钮加载状态
       saveLoading: false,
-      // 当前操作的行数据
+      // Current row data / 当前操作的行数据
       currentRow: {}
     };
   },
   created() {
-    // 页面加载时默认查询一次
+    // Query once on page load / 页面加载时默认查询一次
     this.getStoppageList();
   },
   methods: {
-    // 获取停机记录列表
+    // Get stoppage record list / 获取停机记录列表
     getStoppageList() {
       this.tableLoading = true;
       listStoppage(this.queryForm)
@@ -276,17 +336,17 @@ export default {
         .catch(error => {
           this.tableLoading = false;
           this.btnLoading = false;
-          console.error('获取数据失败:', error);
-          this.$message.error('获取数据失败，请稍后重试');
+          console.error('Failed to fetch data:', error); // 获取数据失败
+          this.$message.error('Failed to fetch data, please retry'); // 获取数据失败，请稍后重试
         });
     },
 
-    // 处理查询
+    // Handle query / 处理查询
     handleQuery() {
-      // 验证开始时间不能晚于结束时间
+      // Validate start time cannot be later than end time / 验证开始时间不能晚于结束时间
       if (this.queryForm.startDate && this.queryForm.endDate &&
         new Date(this.queryForm.startDate) > new Date(this.queryForm.endDate)) {
-        this.$message.warning('开始时间不能晚于结束时间');
+        this.$message.warning('Start time cannot be later than end time'); // 开始时间不能晚于结束时间
         return;
       }
 
@@ -294,30 +354,30 @@ export default {
       this.getStoppageList();
     },
 
-    // 处理重置
+    // Handle reset / 处理重置
     handleReset() {
       this.$refs.queryForm.resetFields();
       this.getStoppageList();
     },
 
-    // 行点击事件
+    // Row click event / 行点击事件
     handleRowClick(row) {
       this.currentRow = row;
     },
-    // 格式化时间
+    // Format time / 格式化时间
     formatTime(time) {
       if (!time) return '-';
-      // 如果是日期时间格式，直接返回
+      // If it's datetime format, return directly / 如果是日期时间格式，直接返回
       if (time.includes(' ')) {
         return time;
       }
-      // 如果是日期格式，返回日期
+      // If it's date format, return date / 如果是日期格式，返回日期
       return time;
     },
 
-    // 新增
+    // Add / 新增
     handleAdd() {
-      this.dialogTitle = '新增停机记录';
+      this.dialogTitle = 'Add Stoppage Record'; // 新增停机记录
       this.formData = {
         stopid: '',
         coilid: '',
@@ -336,21 +396,22 @@ export default {
       this.dialogVisible = true;
     },
 
-    // 编辑
+    // Edit / 编辑
     handleEdit(row) {
-      this.dialogTitle = '编辑停机记录';
+      this.dialogTitle = 'Edit Stoppage Record'; // 编辑停机记录
       this.formData = { ...row };
       this.dialogVisible = true;
     },
 
-    // 删除
+    // Delete / 删除
     handleDelete(row) {
-      this.$confirm(`确定要删除ID为 ${row.stopid} 的停机记录吗？`, '确认删除', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(`Confirm to delete stoppage record with ID ${row.stopid}?`, 'Confirm Delete', {
+        // 确定要删除ID为 ${row.stopid} 的停机记录吗？, 确认删除
+        confirmButtonText: 'Confirm', // 确定
+        cancelButtonText: 'Cancel', // 取消
         type: 'danger'
       }).then(() => {
-        // 设置当前行的删除按钮为加载状态
+        // Set current row delete button to loading state / 设置当前行的删除按钮为加载状态
         row.deleteLoading = true;
 
         deleteStoppage(row.stopid)
@@ -358,63 +419,63 @@ export default {
             row.deleteLoading = false;
 
             if (response.code === 200) {
-              this.$message.success('删除成功');
-              // 重新查询数据
+              this.$message.success('Delete successful'); // 删除成功
+              // Re-query data / 重新查询数据
               this.getStoppageList();
             } else {
-              this.$message.error(response.msg || '删除失败');
+              this.$message.error(response.msg || 'Delete failed'); // 删除失败
             }
           })
           .catch(error => {
             row.deleteLoading = false;
-            console.error('删除失败:', error);
-            this.$message.error('删除失败，请稍后重试');
+            console.error('Delete failed:', error); // 删除失败
+            this.$message.error('Delete failed, please retry'); // 删除失败，请稍后重试
           });
       }).catch(() => {
-        // 用户取消删除
-        this.$message.info('已取消删除');
+        // User cancelled delete / 用户取消删除
+        this.$message.info('Delete cancelled'); // 已取消删除
       });
     },
 
-    // 保存
+    // Save / 保存
     handleSave() {
       this.$refs.formData.validate(valid => {
         if (valid) {
-          // 验证开始时间不能晚于结束时间
+          // Validate start time cannot be later than end time / 验证开始时间不能晚于结束时间
           if (new Date(this.formData.startDate) > new Date(this.formData.endDate)) {
-            this.$message.warning('开始时间不能晚于结束时间');
+            this.$message.warning('Start time cannot be later than end time'); // 开始时间不能晚于结束时间
             return;
           }
 
-          // 计算停机时长(分钟)
+          // Calculate stoppage duration (minutes) / 计算停机时长(分钟)
           const start = new Date(this.formData.startDate).getTime();
           const end = new Date(this.formData.endDate).getTime();
           this.formData.duration = Math.round((end - start) / (1000 * 60) * 10) / 10;
 
-          // 设置当前时间为更新时间
+          // Set current time as update time / 设置当前时间为更新时间
           const now = new Date();
           this.formData.insdate = now.toISOString().slice(0, 19).replace('T', ' ');
 
           this.saveLoading = true;
 
-          // 调用更新接口
+          // Call update API / 调用更新接口
           updateStoppage(this.formData)
             .then(response => {
               this.saveLoading = false;
 
               if (response.code === 200) {
-                this.$message.success('保存成功');
+                this.$message.success('Save successful'); // 保存成功
                 this.dialogVisible = false;
-                // 重新查询数据
+                // Re-query data / 重新查询数据
                 this.getStoppageList();
               } else {
-                this.$message.error(response.msg || '保存失败');
+                this.$message.error(response.msg || 'Save failed'); // 保存失败
               }
             })
             .catch(error => {
               this.saveLoading = false;
-              console.error('保存失败:', error);
-              this.$message.error('保存失败，请稍后重试');
+              console.error('Save failed:', error); // 保存失败
+              this.$message.error('Save failed, please retry'); // 保存失败，请稍后重试
             });
         }
       });
diff --git a/apps/l2/src/views/l2/track/components/FurCurrent.vue b/apps/l2/src/views/l2/track/components/FurCurrent.vue
new file mode 100644
index 0000000..c17ec6e
--- /dev/null
+++ b/apps/l2/src/views/l2/track/components/FurCurrent.vue
@@ -0,0 +1,179 @@
+<template>
+  <!-- 炉火参数表单 -->
+  <div class="app-container">
+    <!-- flex布局容器，开启自动换行 -->
+    <div class="params-list">
+      <!-- 遍历筛选后的驱动数据键值对 -->
+      <div
+        v-for="[key, value] in filteredDriveData"
+        :key="key"
+        :class="['param-item', { blink: blinkKeyMap[key] }]"
+      >
+        <!-- 上方label -->
+        <span class="param-label">{{ formatLabel(key) }}</span>
+        <!-- 下方value -->
+        <span class="param-value">{{ formatValue(value) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FurCurrent',
+  props: {
+    driveData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      prevDriveData: {}, // 存储上一次的驱动数据，用于对比变化
+      blinkKeyMap: {}, // 每个key独立的闪烁状态（对象形式：{ key1: true, key2: false }）
+      timerMap: {} // 每个key独立的定时器缓存，用于清除旧定时器
+    }
+  },
+  // 筛选包含Actual（不区分大小写）的键值对
+  computed: {
+    filteredDriveData() {
+      // 校验
+      if (!this.driveData || typeof this.driveData !== 'object') {
+        return [];
+      }
+      return Object.entries(this.driveData).filter(([key]) => {
+        return key.toLowerCase().includes('actual');
+      });
+    }
+  },
+  watch: {
+    driveData: {
+      handler(newVal) {
+        if (Object.keys(this.prevDriveData).length === 0) {
+          // 首次加载数据，仅缓存数据，不触发闪烁
+          this.prevDriveData = JSON.parse(JSON.stringify(newVal));
+          return;
+        }
+
+        // 对比新值和旧值，找出变化的属性名
+        Object.entries(newVal).forEach(([key, value]) => {
+          // 仅对比已有属性的变化，且仅处理筛选后的key（包含Actual）
+          if (this.prevDriveData.hasOwnProperty(key) && key.toLowerCase().includes('actual')) {
+            if (this.prevDriveData[key] !== value) {
+              this.triggerBlink(key); // 为每个变化的key单独触发闪烁
+            }
+          }
+        });
+
+        // 更新缓存的旧数据
+        this.prevDriveData = JSON.parse(JSON.stringify(newVal));
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 单独触发某个key的闪烁（核心优化：独立控制）
+    triggerBlink(key) {
+      // 清除该key的旧定时器，避免1秒内多次更新导致定时器叠加
+      if (this.timerMap[key]) {
+        clearTimeout(this.timerMap[key]);
+      }
+
+      // 设置当前key为闪烁状态（触发动画）
+      this.$set(this.blinkKeyMap, key, true);
+
+      // 单独为该key设置定时器，到期后关闭闪烁状态
+      this.timerMap[key] = setTimeout(() => {
+        this.$set(this.blinkKeyMap, key, false);
+        // 定时器执行后，清除缓存的定时器ID
+        delete this.timerMap[key];
+      }, 500); // 闪烁时长可自定义（1秒）
+    },
+    // 格式化标签名（将驼峰命名转为中文式分段，提升可读性）
+    formatLabel(key) {
+      if (!key) return '';
+      // 驼峰命名转空格分隔
+      const result = key.replace(/([A-Z])/g, ' $1');
+      // 首字母大写
+      return result.charAt(0).toUpperCase() + result.slice(1);
+    },
+    // 格式化值（数字类型保留4位小数，提升展示美观度）
+    formatValue(value) {
+      if (typeof value === 'number') {
+        return value.toFixed(4);
+      }
+      return value;
+    }
+  },
+  // 组件销毁时清除所有定时器，避免内存泄漏
+  beforeUnmount() {
+    Object.values(this.timerMap).forEach(timer => {
+      clearTimeout(timer);
+    });
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  border-radius: 8px;
+  min-height: 100vh;
+}
+
+/* flex布局容器 - 开启换行 */
+.params-list {
+  display: flex;
+  flex-wrap: wrap; /* flex自动换行核心属性 */
+  gap: 16px; /* 项目之间的间距（水平+垂直） */
+  margin-top: 20px;
+}
+
+/* 固定宽度的参数项 - 内部上下布局 */
+.param-item {
+  width: 200px; /* 固定宽度，可根据需求调整 */
+  padding: 12px 16px;
+  background-color: #ffffff;
+  border: 2px solid #e6e6e6;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  display: flex; /* 内部flex垂直布局 */
+  flex-direction: column; /* 垂直排列：label在上，value在下 */
+  align-items: flex-start; /* 左对齐，可改为center居中 */
+  gap: 8px; /* label和value之间的垂直间距 */
+}
+
+.param-label {
+  font-weight: 500;
+  color: #333333;
+  font-size: 14px;
+  word-wrap: break-word; /* 超长label自动换行 */
+}
+
+.param-value {
+  color: #666666;
+  font-family: 'Courier New', monospace; /* 等宽字体，数字对齐更美观 */
+  font-size: 15px;
+}
+
+/* 闪烁动画定义（保留原有动画效果，优化触发逻辑） */
+@keyframes borderBlink {
+  0% {
+    border-color: #4cd964; /* 初始绿色 */
+    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.2);
+  }
+  50% {
+    border-color: #28a745; /* 深绿色 */
+    box-shadow: 0 0 8px 2px rgba(76, 217, 100, 0.5);
+  }
+  100% {
+    border-color: #4cd964; /* 恢复初始绿色 */
+    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.2);
+  }
+}
+
+/* 闪烁样式：每次blink类添加时，动画重新触发 */
+.blink {
+  border: 2px solid #4cd964; /* 绿色边框 */
+  animation: borderBlink 0.5s ease-in-out 1; /* 强制执行1次动画，避免叠加 */
+}
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/track/components/LatestSetValues.vue b/apps/l2/src/views/l2/track/components/LatestSetValues.vue
new file mode 100644
index 0000000..5b3702b
--- /dev/null
+++ b/apps/l2/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/apps/l2/src/views/l2/track/graph.vue b/apps/l2/src/views/l2/track/graph.vue
index 8d69580..51511c9 100644
--- a/apps/l2/src/views/l2/track/graph.vue
+++ b/apps/l2/src/views/l2/track/graph.vue
@@ -26,63 +26,76 @@
       <el-row v-if="selectedCard">
         <el-col :span="12">
           <div class="detail-item">
-            <span class="detail-label">位置名称：</span>
+            <span class="detail-label">Position Name:</span>
+            <!-- 位置名称 -->
             <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">位置代号：</span>
+            <span class="detail-label">Position Code:</span>
+            <!-- 位置代号 -->
             <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">钢卷号：</span>
+            <span class="detail-label">Coil ID:</span>
+            <!-- 钢卷号 -->
             <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">计划ID：</span>
+            <span class="detail-label">Plan ID:</span>
+            <!-- 计划ID -->
             <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">计划号：</span>
+            <span class="detail-label">Plan No:</span>
+            <!-- 计划号 -->
             <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">开卷机编号：</span>
+            <span class="detail-label">Pay-off Reel No:</span>
+            <!-- 开卷机编号 -->
             <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
           </div>
           <div class="detail-item">
-            <span class="detail-label">卷取机编号：</span>
+            <span class="detail-label">Take-up Reel No:</span>
+            <!-- 卷取机编号 -->
             <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
           </div>
         </el-col>
         <el-col :span="12">
-          <!-- 加载状态 -->
-          <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
+          <!-- Loading Status / 加载状态 -->
+          <div class="empty-tip" v-if="isLoadingReturn">Loading return info...</div>
+          <!-- 加载回退信息中... -->
 
-          <!-- 错误状态 -->
+          <!-- Error Status / 错误状态 -->
           <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
             {{ returnError }}
           </div>
 
-          <!-- 回退信息内容 -->
+          <!-- Return Info Content / 回退信息内容 -->
           <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
             <div class="detail-item">
-              <span class="detail-label">回退钢卷号：</span>
+              <span class="detail-label">Return Coil ID:</span>
+              <!-- 回退钢卷号 -->
               <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">回退计划ID：</span>
+              <span class="detail-label">Return Plan ID:</span>
+              <!-- 回退计划ID -->
               <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">回退计划号：</span>
+              <span class="detail-label">Return Plan No:</span>
+              <!-- 回退计划号 -->
               <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">回退类型：</span>
+              <span class="detail-label">Return Type:</span>
+              <!-- 回退类型 -->
               <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">回退重量：</span>
+              <span class="detail-label">Return Weight:</span>
+              <!-- 回退重量 -->
               <span class="detail-value">
                 {{ returnInfo.returnWeight || '-' }}
                 {{ returnInfo.returnWeight ? 'kg' : '' }}
@@ -90,56 +103,64 @@
             </div>
           </div>
 
+          <!-- No Return Info / 无回退信息 -->
+          <div class="empty-tip" v-else>No return info</div>
           <!-- 无回退信息 -->
-          <div class="empty-tip" v-else>无回退信息</div>
         </el-col>
       </el-row>
       <el-row v-else>
-        <div class="empty-tip">请选择钢卷卡片查看详情</div>
+        <div class="empty-tip">Please select a coil card to view details</div>
+        <!-- 请选择钢卷卡片查看详情 -->
       </el-row>
       <el-row>
         <div class="operation-panel">
           <div class="panel-content">
-            <!-- 非调整模式：显示操作按钮 -->
+            <!-- Non-adjustment Mode: Show Operation Buttons / 非调整模式：显示操作按钮 -->
             <div class="operation-buttons" v-if="!adjustMode">
               <div class="button-group" v-if="selectedCard">
                 <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')" class="btn-block">
-                  钢卷上线
+                  Coil Online
+                  <!-- 钢卷上线 -->
                 </el-button>
                 <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
                   class="btn-block mt-2">
-                  手动卸卷
+                  Manual Unload
+                  <!-- 手动卸卷 -->
                 </el-button>
                 <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
                   class="btn-block mt-2">
-                  整卷回退
+                  Full Return
+                  <!-- 整卷回退 -->
                 </el-button>
                 <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
                   class="btn-block mt-2">
-                  半卷回退
+                  Half Return
+                  <!-- 半卷回退 -->
                 </el-button>
                 <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')" class="btn-block mt-2">
-                  卸卷并封闭
+                  Unload & Block
+                  <!-- 卸卷并封闭 -->
                 </el-button>
-                <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
-                甩尾
-              </el-button> -->
               </div>
             </div>
 
-            <!-- 调整模式：显示提示 -->
+            <!-- Adjustment Mode: Show Tips / 调整模式：显示提示 -->
             <div class="adjust-tip" v-if="adjustMode">
               <div class="tip-box">
                 <i class="el-icon-info"></i>
-                <p class="tip-text">当前为调整模式</p>
-                <p class="tip-desc">请在上方选择「当前位置」和「目标位置」，完成后点击确认调整</p>
+                <p class="tip-text">Current Mode: Adjustment</p>
+                <!-- 当前为调整模式 -->
+                <p class="tip-desc">Please select 'Current Position' and 'Target Position' above, then click Confirm Adjustment</p>
+                <!-- 请在上方选择「当前位置」和「目标位置」，完成后点击确认调整 -->
               </div>
               <div class="selected-count" v-if="selectedPositions.length > 0">
                 <div class="count-item current" v-if="selectedPositions[0]">
-                  已选当前位置：{{ selectedPositions[0].positionNameEn }}
+                  Selected Current: {{ selectedPositions[0].positionNameEn }}
+                  <!-- 已选当前位置 -->
                 </div>
                 <div class="count-item target" v-if="selectedPositions[1]">
-                  已选目标位置：{{ selectedPositions[1].positionNameEn }}
+                  Selected Target: {{ selectedPositions[1].positionNameEn }}
+                  <!-- 已选目标位置 -->
                 </div>
               </div>
             </div>
@@ -150,55 +171,72 @@
 
     <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
       <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
-        <el-form-item label="开卷机编号" prop="porIdx">
+        <el-form-item label="Pay-off Reel No" prop="porIdx">
+          <!-- 开卷机编号 -->
           <el-input v-model="operateMatForm.porIdx"></el-input>
         </el-form-item>
-        <el-form-item label="卷取机编号" prop="trIdx">
+        <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="计划id" prop="planId">
-          <el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></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>
-        <el-form-item label="钢卷号" prop="entryMatId">
-          <el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></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>
-        <!-- <el-form-item label="计划号" prop="planNo">
-          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
-        </el-form-item> -->
-        <el-form-item label="操作类型" prop="operation">
+        <el-form-item label="Operation Type" prop="operation">
+          <!-- 操作类型 -->
           <el-select v-model="operateMatForm.operation" disabled>
-            <el-option label="钢卷上线" value="ONLINE"></el-option>
-            <el-option label="手动卸卷" value="UNLOAD"></el-option>
-            <el-option label="整卷回退" value="ALL_RETURN"></el-option>
-            <el-option label="半卷回退" value="HALF_RETURN"></el-option>
-            <el-option label="卸卷并封闭" value="BLOCK"></el-option>
-            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
+            <el-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="回退卷号" prop="returnMatId">
-            <el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
+          <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="回退重量" prop="returnWeight">
-            <el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
+          <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="回退备注" prop="returnRemark">
+          <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="产出钢卷长度" prop="coilLength">
-            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
+          <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">取消</el-button>
-        <el-button type="primary" @click="submitOperateForm">确定</el-button>
+        <el-button @click="operateMatStatus = false">Cancel</el-button>
+        <!-- 取消 -->
+        <el-button type="primary" @click="submitOperateForm">Confirm</el-button>
+        <!-- 确定 -->
       </div>
     </el-dialog>
   </div>
@@ -328,17 +366,21 @@ export default {
         coilLength: null
       },
       operateRules: {
-        planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
-        entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
-        operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
+        planId: [{ required: true, message: 'Please enter Plan ID', trigger: 'blur' }],
+        // 请输入计划id
+        entryMatId: [{ required: true, message: 'Please enter Coil ID', trigger: 'blur' }],
+        // 请输入钢卷号
+        operation: [{ required: true, message: 'Please select operation type', trigger: 'change' }],
+        // 请选择操作类型
         returnMatId: [
           {
             required: true,
-            message: '请输入回退卷号',
+            message: 'Please enter Return Coil ID',
+            // 请输入回退卷号
             trigger: 'blur',
             validator: (rule, val, cb) => {
               if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
-                cb(new Error('请输入回退卷号'))
+                cb(new Error('Please enter Return Coil ID')) // 请输入回退卷号
               } else cb()
             }
           }
@@ -346,11 +388,12 @@ export default {
         returnWeight: [
           {
             required: true,
-            message: '请输入回退重量',
+            message: 'Please enter Return Weight',
+            // 请输入回退重量
             trigger: 'blur',
             validator: (rule, val, cb) => {
               if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
-                cb(new Error('请输入回退重量'))
+                cb(new Error('Please enter Return Weight')) // 请输入回退重量
               } else cb()
             }
           }
@@ -363,86 +406,86 @@ export default {
     }
   },
   computed: {
-    // 操作对话框标题
+    // Operation dialog title (English with Chinese comments) / 操作对话框标题（英文显示，中文注释）
     getOperateTitle() {
       const titleMap = {
-        'ONLINE': '钢卷上线',
-        'UNLOAD': '手动卸卷',
-        'ALL_RETURN': '整卷回退',
-        'HALF_RETURN': '半卷回退',
-        'BLOCK': '卸卷并封闭',
-        'THROW_TAIL': '甩尾'
+        '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] || '钢卷操作'
+      return titleMap[this.operateMatForm.operation] || 'Coil Operation' // 钢卷操作
     }
   },
 
   methods: {
-    // 获取钢卷数据
+    // Fetch coil data / 获取钢卷数据
     fetchData() {
       getTrackMatPosition().then(res => {
         this.matMapList = res.data.matMapList || []
       }).catch(err => {
-        console.error('获取钢卷数据失败：', err)
-        this.$message.error('获取数据失败，请重试')
+        console.error('Failed to fetch coil data:', err) // 获取钢卷数据失败
+        this.$message.error('Failed to fetch data, please retry') // 获取数据失败，请重试
       })
     },
 
     /**
-     * 获取回退信息
-     * @param {Number} posIdx - 位置索引（接口必填query参数）
+     * Fetch return information / 获取回退信息
+     * @param {Number} posIdx - Position index (required query parameter) / 位置索引（接口必填query参数）
      */
     fetchReturnData(posIdx) {
-      // 1. 校验posIdx
+      // 1. Validate posIdx / 校验posIdx
       if (!posIdx && posIdx !== 0) {
         this.returnInfo = {};
-        this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
+        this.returnError = 'Missing position index (posIdx), cannot fetch return info'; // 缺少位置索引（posIdx），无法获取回退信息
         return;
       }
 
-      // 2. 加载状态初始化
+      // 2. Initialize loading state / 加载状态初始化
       this.isLoadingReturn = true;
       this.returnError = '';
 
-      // 3. 调用回退接口（posIdx作为query参数传递）
+      // 3. Call return API (posIdx as query parameter) / 调用回退接口（posIdx作为query参数传递）
       getBackData({ posIdx })
         .then(res => {
           this.isLoadingReturn = false;
-          // 接口成功且有数据
+          // API success with data / 接口成功且有数据
           if (res.code === 200 && res.data) {
             this.returnInfo = res.data;
           } else {
             this.returnInfo = {};
-            this.returnError = res.msg || '获取回退信息失败';
+            this.returnError = res.msg || 'Failed to fetch return info'; // 获取回退信息失败
           }
         })
         .catch(err => {
           this.isLoadingReturn = false;
           this.returnInfo = {};
-          this.returnError = '获取回退信息出错，请重试';
-          console.error('回退信息接口异常：', err);
+          this.returnError = 'Error fetching return info, please retry'; // 获取回退信息出错，请重试
+          console.error('Return info API exception:', err); // 回退信息接口异常
         });
     },
 
-    // 进入调整模式
+    // Enter adjustment mode / 进入调整模式
     enterAdjustMode() {
       this.adjustMode = true
       this.selectedPositions = []
       this.selectedCard = null
-      this.$message.info('已进入调整模式，请选择当前位置和目标位置')
+      this.$message.info('Entered adjustment mode, please select current and target positions') // 已进入调整模式，请选择当前位置和目标位置
     },
 
-    // 退出调整模式
+    // Exit adjustment mode / 退出调整模式
     exitAdjustMode() {
       this.adjustMode = false
       this.selectedPositions = []
-      this.$message.info('已取消调整模式')
+      this.$message.info('Adjustment mode cancelled') // 已取消调整模式
     },
 
-    // 选择卡片（区分调整/非调整模式）
+    // Select card (distinguish adjustment/non-adjustment mode) / 选择卡片（区分调整/非调整模式）
     selectCard(item) {
       if (this.adjustMode) {
-        // 调整模式：最多选2个，支持取消
+        // Adjustment mode: max 2 selections, support cancellation / 调整模式：最多选2个，支持取消
         const isSelected = this.selectedPositions.includes(item)
         if (isSelected) {
           this.selectedPositions = this.selectedPositions.filter(val => val !== item)
@@ -450,14 +493,14 @@ export default {
           if (this.selectedPositions.length < 2) {
             this.selectedPositions.push(item)
           } else {
-            this.$message.warning('最多只能选择2个位置进行调整')
+            this.$message.warning('Maximum 2 positions can be selected for adjustment') // 最多只能选择2个位置进行调整
           }
         }
       } else {
-        // 非调整模式：单选
+        // Non-adjustment mode: single selection / 非调整模式：单选
         this.selectedCard = this.selectedCard === item ? null : item
 
-        // 选中卡片时查询回退信息，取消选中时清空
+        // Query return info when card selected, clear when deselected / 选中卡片时查询回退信息，取消选中时清空
         if (this.selectedCard) {
           this.fetchReturnData(this.selectedCard.posIdx);
         } else {
@@ -496,10 +539,10 @@ export default {
       return '可选位置'
     },
 
-    // 确认调整位置
+    // Confirm position adjustment / 确认调整位置
     handleConfirmAdjust() {
       if (this.selectedPositions.length !== 2) {
-        this.$message.warning('请选择当前位置和目标位置（共2个）')
+        this.$message.warning('Please select current and target positions (2 total)') // 请选择当前位置和目标位置（共2个）
         return
       }
 
@@ -509,21 +552,22 @@ export default {
         targetPos: target.positionNameEn
       }
 
-      this.$confirm(`确定将 ${current.positionNameEn} 的钢卷调整到 ${target.positionNameEn}？`, '确认调整', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(`Confirm to adjust coil from ${current.positionNameEn} to ${target.positionNameEn}?`, 'Confirm Adjustment', {
+        // 确定将 ${current.positionNameEn} 的钢卷调整到 ${target.positionNameEn}？, 确认调整
+        confirmButtonText: 'Confirm', // 确定
+        cancelButtonText: 'Cancel', // 取消
         type: 'warning'
       }).then(() => {
         adjustPosition(params).then(() => {
-          this.$message.success('调整成功')
+          this.$message.success('Adjustment successful') // 调整成功
           this.exitAdjustMode()
           this.fetchData()
         }).catch(err => {
-          console.error('调整失败：', err)
-          this.$message.error('调整失败，请重试')
+          console.error('Adjustment failed:', err) // 调整失败
+          this.$message.error('Adjustment failed, please retry') // 调整失败，请重试
         })
       }).catch(() => {
-        this.$message.info('已取消调整')
+        this.$message.info('Adjustment cancelled') // 已取消调整
       })
     },
 
@@ -545,20 +589,20 @@ export default {
       this.operateMatStatus = true
     },
 
-    // 提交操作表单
+    // Submit operation form / 提交操作表单
     submitOperateForm() {
       this.$refs.operateForm.validate(valid => {
         if (valid) {
           operateMat(this.operateMatForm).then(() => {
-            this.$message.success('操作成功')
+            this.$message.success('Operation successful') // 操作成功
             this.operateMatStatus = false
             this.fetchData()
           }).catch(err => {
-            console.error('操作失败：', err)
-            this.$message.error('操作失败，请重试')
+            console.error('Operation failed:', err) // 操作失败
+            this.$message.error('Operation failed, please retry') // 操作失败，请重试
           })
         } else {
-          this.$message.warning('请完善表单信息')
+          this.$message.warning('Please complete the form') // 请完善表单信息
         }
       })
     }
diff --git a/apps/l2/src/views/l2/track/index.vue b/apps/l2/src/views/l2/track/index.vue
index 6bef8bc..9acbd6a 100644
--- a/apps/l2/src/views/l2/track/index.vue
+++ b/apps/l2/src/views/l2/track/index.vue
@@ -4,23 +4,27 @@
     <div class="monitor-header">
       <div class="header-left">
         <div class="status-indicator" :class="{ active: isConnected }"></div>
-        <h1 class="main-title">{{ $t('track.title') }}</h1>
+        <h1 class="main-title">Process Tracking Real-time Monitor</h1>
+        <!-- 过程跟踪实时监控系统 -->
         </div>
       <div class="header-right">
         <div class="connection-info">
-          <span class="label">{{ $t('track.connectionStatus') }}：</span>
+          <span class="label">Connection Status:</span>
+          <!-- 连接状态 -->
           <span class="value" :class="{ connected: isConnected }">
-            {{ isConnected ? $t('track.connected') : $t('track.connecting') }}
+            {{ isConnected ? 'Connected' : 'Connecting...' }}
+            <!-- {{ isConnected ? '已连接' : '连接中...' }} -->
           </span>
         </div>
         <div class="time-display">{{ currentTime }}</div>
       </div>
     </div>
 
-    <!-- 数据类型选择器 -->
+    <!-- Data Type Selector / 数据类型选择器 -->
     <div class="type-selector-panel">
       <div class="selector-wrapper">
-        <label class="selector-label">{{ $t('track.dataType') }}</label>
+        <label class="selector-label">Data Type</label>
+        <!-- 数据类型 -->
         <el-select v-model="currentType" @change="handleTypeChange" size="small" class="type-select">
           <el-option
             v-for="type in types"
@@ -35,11 +39,13 @@
         </div>
       <div class="stats-info">
         <div class="stat-item">
-          <span class="stat-label">{{ $t('track.packetCount') }}</span>
+          <span class="stat-label">Messages</span>
+          <!-- 数据包 -->
           <span class="stat-value">{{ messageCount }}</span>
                   </div>
         <div class="stat-item">
-          <span class="stat-label">{{ $t('track.refreshRate') }}</span>
+          <span class="stat-label">Refresh Rate</span>
+          <!-- 刷新率 -->
           <span class="stat-value">{{ refreshRate }} Hz</span>
                   </div>
                   </div>
@@ -47,38 +53,44 @@
 
     <!-- 主数据区域 - 仅在track_measure类型时显示图表 -->
     <div v-if="currentType === 'track_measure'" class="data-panels">
-      <!-- 入口数据监控 -->
+      <!-- Entry Section Data Monitor / 入口段数据监控 -->
       <div class="data-panel">
         <div class="panel-header">
           <div class="header-title">
             <i class="el-icon-s-data"></i>
-            <span>{{ $t('track.entryData') }}</span>
+            <span>Entry Section Monitor</span>
+            <!-- 入口段数据监控 -->
               </div>
           <div class="panel-badges">
-            <span class="badge success" v-if="chartData.entry.time.length > 0">{{ $t('track.realTime') }}</span>
+            <span class="badge success" v-if="chartData.entry.time.length > 0">Real-time</span>
+            <!-- 实时 -->
             <span class="badge info">{{ chartData.entry.time.length }}/{{ maxDataPoints }}</span>
                   </div>
                   </div>
         <div class="panel-content">
-          <!-- 实时数据卡片 -->
+          <!-- Real-time Data Cards / 实时数据卡片 -->
           <div class="data-cards">
             <div class="data-card">
-              <div class="card-label">{{ $t('track.entryTension1') }}</div>
+              <div class="card-label">Tension POR-BR1</div>
+              <!-- 入口张力1 -->
               <div class="card-value">{{ getLatestValue('entry', 'tensionPorBr1') }}</div>
-              <div class="card-unit">kN</div>
+              <div class="card-unit">daN</div>
                   </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.entryTension2') }}</div>
+              <div class="card-label">Tension BR1-BR2</div>
+              <!-- 入口张力2 -->
               <div class="card-value">{{ getLatestValue('entry', 'tensionBr1Br2') }}</div>
-              <div class="card-unit">kN</div>
+              <div class="card-unit">daN</div>
                 </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.entryTension3') }}</div>
+              <div class="card-label">Tension BR2-BR3</div>
+              <!-- 入口张力3 -->
               <div class="card-value">{{ getLatestValue('entry', 'tensionBr2Br3') }}</div>
-              <div class="card-unit">kN</div>
+              <div class="card-unit">daN</div>
               </div>
             <div class="data-card highlight">
-              <div class="card-label">{{ $t('track.stripSpeed') }}</div>
+              <div class="card-label">Strip Speed</div>
+              <!-- 带钢速度 -->
               <div class="card-value">{{ getLatestValue('entry', 'stripSpeed') }}</div>
               <div class="card-unit">m/min</div>
             </div>
@@ -88,34 +100,39 @@
             </div>
           </div>
 
-      <!-- 炉温数据监控 -->
+      <!-- Furnace Temperature Monitor / 炉温数据监控 -->
       <div class="data-panel">
         <div class="panel-header">
           <div class="header-title">
             <i class="el-icon-sunny"></i>
-            <span>{{ $t('track.furnaceData') }}</span>
+            <span>Furnace Temperature Monitor</span>
+            <!-- 炉温数据监控 -->
               </div>
           <div class="panel-badges">
-            <span class="badge success" v-if="chartData.furnace.time.length > 0">{{ $t('track.realTime') }}</span>
+            <span class="badge success" v-if="chartData.furnace.time.length > 0">Real-time</span>
+            <!-- 实时 -->
             <span class="badge info">{{ chartData.furnace.time.length }}/{{ maxDataPoints }}</span>
               </div>
               </div>
         <div class="panel-content">
-          <!-- 实时数据卡片 -->
+          <!-- Real-time Data Cards / 实时数据卡片 -->
           <div class="data-cards">
             <div class="data-card temperature">
-              <div class="card-label">{{ $t('track.phFurnaceTempActual') }}</div>
-              <div class="card-value">{{ getLatestValue('furnace', 'phFurnaceTemperatureActual') }}</div>
+              <div class="card-label">PH Exit Temp</div>
+              <!-- PH炉出口温度 -->
+              <div class="card-value">{{ getLatestValue('furnace', 'phfExitStripTemp') }}</div>
               <div class="card-unit">°C</div>
               </div>
             <div class="data-card temperature">
-              <div class="card-label">{{ $t('track.nof1FurnaceTempActual') }}</div>
-              <div class="card-value">{{ getLatestValue('furnace', 'nof1FurnaceTemperatureActual') }}</div>
+              <div class="card-label">RTF Exit Temp</div>
+              <!-- RTF炉出口温度 -->
+              <div class="card-value">{{ getLatestValue('furnace', 'rtfExitStripTemp') }}</div>
               <div class="card-unit">°C</div>
               </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.nof1FurnaceTempSet') }}</div>
-              <div class="card-value">{{ getLatestValue('furnace', 'nof1FurnaceTemperatureSet') }}</div>
+              <div class="card-label">Pot Temperature</div>
+              <!-- 锌锅温度 -->
+              <div class="card-value">{{ getLatestValue('furnace', 'potTemperature') }}</div>
               <div class="card-unit">°C</div>
               </div>
               </div>
@@ -124,38 +141,44 @@
             </div>
               </div>
               
-      <!-- 涂层数据监控 -->
+      <!-- Coating Section Monitor / 涂层段数据监控 -->
       <div class="data-panel">
         <div class="panel-header">
           <div class="header-title">
             <i class="el-icon-brush"></i>
-            <span>{{ $t('track.coatData') }}</span>
+            <span>Coating Section Monitor</span>
+            <!-- 涂层段数据监控 -->
                 </div>
           <div class="panel-badges">
-            <span class="badge success" v-if="chartData.coat.time.length > 0">{{ $t('track.realTime') }}</span>
+            <span class="badge success" v-if="chartData.coat.time.length > 0">Real-time</span>
+            <!-- 实时 -->
             <span class="badge info">{{ chartData.coat.time.length }}/{{ maxDataPoints }}</span>
                 </div>
                 </div>
         <div class="panel-content">
-          <!-- 实时数据卡片 -->
+          <!-- Real-time Data Cards / 实时数据卡片 -->
           <div class="data-cards">
             <div class="data-card">
-              <div class="card-label">{{ $t('track.topCoatWeight') }}</div>
+              <div class="card-label">Avg Coating Weight Top</div>
+              <!-- 顶部平均涂层重量 -->
               <div class="card-value">{{ getLatestValue('coat', 'avrCoatingWeightTop') }}</div>
               <div class="card-unit">g/m²</div>
                 </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.bottomCoatWeight') }}</div>
+              <div class="card-label">Avg Coating Weight Bottom</div>
+              <!-- 底部平均涂层重量 -->
               <div class="card-value">{{ getLatestValue('coat', 'avrCoatingWeightBottom') }}</div>
               <div class="card-unit">g/m²</div>
                 </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.airKnifePressure') }}</div>
+              <div class="card-label">Air Knife Pressure</div>
+              <!-- 气刀压力 -->
               <div class="card-value">{{ getLatestValue('coat', 'airKnifePressure') }}</div>
               <div class="card-unit">kPa</div>
               </div>
             <div class="data-card highlight">
-              <div class="card-label">{{ $t('track.exitSpeed') }}</div>
+              <div class="card-label">TM Exit Speed</div>
+              <!-- TM出口速度 -->
               <div class="card-value">{{ getLatestValue('coat', 'stripSpeedTmExit') }}</div>
               <div class="card-unit">m/min</div>
             </div>
@@ -165,33 +188,38 @@
         </div>
       </div>
 
-      <!-- 出口数据监控 -->
+      <!-- Exit Section Monitor / 出口段数据监控 -->
       <div class="data-panel">
         <div class="panel-header">
           <div class="header-title">
             <i class="el-icon-document-checked"></i>
-            <span>{{ $t('track.exitData') }}</span>
+            <span>Exit Section Monitor</span>
+            <!-- 出口段数据监控 -->
           </div>
           <div class="panel-badges">
-            <span class="badge success" v-if="chartData.exit.time.length > 0">{{ $t('track.realTime') }}</span>
+            <span class="badge success" v-if="chartData.exit.time.length > 0">Real-time</span>
+            <!-- 实时 -->
             <span class="badge info">{{ chartData.exit.time.length }}/{{ maxDataPoints }}</span>
           </div>
         </div>
         <div class="panel-content">
-          <!-- 实时数据卡片 -->
+          <!-- Real-time Data Cards / 实时数据卡片 -->
           <div class="data-cards">
             <div class="data-card">
-              <div class="card-label">{{ $t('track.exitTension1') }}</div>
+              <div class="card-label">Tension BR8-BR9</div>
+              <!-- 出口张力1 -->
               <div class="card-value">{{ getLatestValue('exit', 'tensionBr8Br9') }}</div>
-              <div class="card-unit">kN</div>
+              <div class="card-unit">daN</div>
             </div>
             <div class="data-card">
-              <div class="card-label">{{ $t('track.exitTension2') }}</div>
+              <div class="card-label">Tension BR9-TR</div>
+              <!-- 出口张力2 -->
               <div class="card-value">{{ getLatestValue('exit', 'tensionBr9Tr') }}</div>
-              <div class="card-unit">kN</div>
+              <div class="card-unit">daN</div>
           </div>
             <div class="data-card highlight">
-              <div class="card-label">{{ $t('track.exitSpeed') }}</div>
+              <div class="card-label">Exit Speed</div>
+              <!-- 出口速度 -->
               <div class="card-value">{{ getLatestValue('exit', 'speedExitSection') }}</div>
               <div class="card-unit">m/min</div>
             </div>
@@ -202,19 +230,22 @@
             </div>
           </div>
 
-    <!-- 其他类型数据展示 -->
+    <!-- Other Type Data Display / 其他类型数据展示 -->
     <div v-else class="other-type-display">
       <div class="other-type-card">
         <div class="card-icon">
           <i class="el-icon-view"></i>
         </div>
         <h3 class="card-title">{{ getCurrentTypeLabel() }}</h3>
-        <p class="card-desc">{{ $t('track.noChartSupport') }}</p>
+        <p class="card-desc">This data type does not support chart display. Raw data is shown below.</p>
+        <!-- 当前数据类型不支持图表展示，原始数据如下 -->
       </div>
       <div class="raw-data-display">
         <div class="raw-data-header">
-          <span class="raw-title">{{ $t('track.rawData') }}</span>
-          <el-button size="mini" @click="copyRawData" icon="el-icon-document-copy">{{ $t('track.copy') }}</el-button>
+          <span class="raw-title">Raw Data</span>
+          <!-- 原始数据 -->
+          <el-button size="mini" @click="copyRawData" icon="el-icon-document-copy">Copy</el-button>
+          <!-- 复制 -->
     </div>
         <pre class="raw-content">{{ formattedRawData }}</pre>
     </div>
@@ -231,12 +262,18 @@ export default {
     return {
       socket: null,
       types: [
-        { value: 'alarm', label: this.$t('track.alarmInfo'), desc: this.$t('track.alarmDesc') },
-        { value: 'track_position', label: this.$t('track.positionTrack'), desc: this.$t('track.positionDesc') },
-        { value: 'calc_setup_result', label: this.$t('track.calcSetupResult'), desc: this.$t('track.calcDesc') },
-        { value: 'track_measure', label: this.$t('track.processMeasure'), desc: this.$t('track.measureDesc') },
-        { value: 'track_signal', label: this.$t('track.signalTrack'), desc: this.$t('track.signalDesc') },
-        { value: 'track_matmap', label: this.$t('track.matmap'), desc: this.$t('track.matmapDesc') }
+        { value: 'alarm', label: 'Alarm Info', desc: 'System alarms and exceptions' },
+        // 告警信息 - 系统告警与异常
+        { value: 'track_position', label: 'Position Tracking', desc: 'Coil position information' },
+        // 位置跟踪 - 钢卷位置信息
+        { value: 'calc_setup_result', label: 'Setup Calculation', desc: 'Calculation result data' },
+        // 设定计算 - 计算结果数据
+        { value: 'track_measure', label: 'Process Measurement', desc: 'Real-time measurement data' },
+        // 过程测量 - 实时测量数据
+        { value: 'track_signal', label: 'Signal Tracking', desc: 'Signal status data' },
+        // 信号跟踪 - 信号状态数据
+        { value: 'track_matmap', label: 'Material Mapping', desc: 'Material mapping relationship' }
+        // 物料映射 - 物料映射关系
       ],
       currentType: 'track_measure',
       isConnected: false,
@@ -250,33 +287,84 @@ export default {
       furnaceChart: null,
       coatChart: null,
       exitChart: null,
+      // Chart data storage
       // 图表数据存储
+      // Note: Only key fields are displayed in the UI. All fields defined in DeviceEnum are available in rect.vue
+      // 注意：界面仅显示关键字段。DeviceEnum 中定义的所有字段在 rect.vue 中可用
       chartData: {
         entry: {
           time: [],
-          tensionPorBr1: [],
-          tensionBr1Br2: [],
-          tensionBr2Br3: [],
-          stripSpeed: []
+          // POR1 fields / POR1字段
+          tensionPorBr1: [], // Displayed / 已显示
+          stripSpeed: [], // Displayed / 已显示
+          // POR2 fields / POR2字段
+          tensionPorBr2: [], // Available in rect.vue / 在 rect.vue 中可用
+          // WELDER fields / WELDER字段
+          weldStatus: [], // Available in rect.vue / 在 rect.vue 中可用
+          // ENL1/ENL2/ENL3 fields / ENL1/ENL2/ENL3字段
+          celLength: [], // Available in rect.vue / 在 rect.vue 中可用
+          celCapacity: [], // Available in rect.vue / 在 rect.vue 中可用
+          tensionCel: [], // Available in rect.vue / 在 rect.vue 中可用
+          celLengthMax: [], // Available in rect.vue / 在 rect.vue 中可用
+          celLengthMin: [], // Available in rect.vue / 在 rect.vue 中可用
+          bR4or5toBR6Tension: [], // Available in rect.vue / 在 rect.vue 中可用
+          // Additional entry fields / 其他入口段字段
+          tensionBr1Br2: [], // Displayed / 已显示
+          tensionBr2Br3: [] // Displayed / 已显示
         },
         furnace: {
           time: [],
-          phFurnaceTemperatureActual: [],
-          nof1FurnaceTemperatureActual: [],
-          nof1FurnaceTemperatureSet: []
+          // FUR1 fields / FUR1字段
+          phfExitStripTemp: [], // Displayed / 已显示 (PH炉出口温度)
+          potTemperature: [], // Displayed / 已显示 (锌锅温度)
+          gasConsumption: [], // Available in rect.vue / 在 rect.vue 中可用 (燃气消耗)
+          // FUR2 fields / FUR2字段
+          rtfExitStripTemp: [], // Displayed / 已显示 (RTF炉出口温度)
+          zincPotPower: [], // Available in rect.vue / 在 rect.vue 中可用 (锌锅功率)
+          // FUR3 fields / FUR3字段
+          jcsExitStripTemp: [], // Available in rect.vue / 在 rect.vue 中可用 (冷却段出口温度)
+          coolingTowerStripTemp: [], // Available in rect.vue / 在 rect.vue 中可用 (冷却塔温度)
+          // FUR4/POT/TOWER fields / FUR4/POT/TOWER字段
+          scsExitStripTemp: [], // Available in rect.vue / 在 rect.vue 中可用 (均衡段出口温度)
+          // CLEAN fields / CLEAN字段
+          cleaningVoltage: [], // Available in rect.vue / 在 rect.vue 中可用 (清洗电压)
+          cleaningCurrent: [], // Available in rect.vue / 在 rect.vue 中可用 (清洗电流)
+          alkaliConcentration: [], // Available in rect.vue / 在 rect.vue 中可用 (碱液浓度)
+          alkaliTemperature: [] // Available in rect.vue / 在 rect.vue 中可用 (碱液温度)
         },
         coat: {
           time: [],
-          avrCoatingWeightTop: [],
-          avrCoatingWeightBottom: [],
-          airKnifePressure: [],
-          stripSpeedTmExit: []
+          // COAT fields / COAT字段
+          avrCoatingWeightTop: [], // Displayed / 已显示 (顶部平均涂层重量)
+          avrCoatingWeightBottom: [], // Displayed / 已显示 (底部平均涂层重量)
+          airKnifePressure: [], // Displayed / 已显示 (气刀压力)
+          stripSpeedTmExit: [], // Displayed / 已显示 (TM出口速度)
+          // Additional COAT fields available in rect.vue / 其他 COAT 字段在 rect.vue 中可用:
+          // stdCoatingWeightTop, maxCoatingWeightTop, minCoatingWeightTop,
+          // stdCoatingWeightBottom, maxCoatingWeightBottom, minCoatingWeightBottom,
+          // airKnifeFlow, airKnifeGap, tensionBr8Tm, tensionTmBr9, tensionBr8Br9,
+          // tmMask, tmElongation, rollForceOperator, rollForceDrive, motorTorque,
+          // bendingForce, antiCrimpingRollMesh, billyRollMesh,
+          // tensionTlBr10Br11, tensionBr9toBr10Br11, tlFlag, tlElongation,
+          // levelingUnit1Mesh, levelingUnit2Mesh, antiCrossBowUnitMesh,
+          // tensionBr10Br11toBr12, stripSpeedAfp, stripTempAfp
+          // TM fields / TM字段
+          tensionBr5Tm: [], // Available in rect.vue / 在 rect.vue 中可用 (BR5-TM张力)
+          // TL fields / TL字段
+          tlElongation: [], // Available in rect.vue / 在 rect.vue 中可用 (拉矫延伸率)
+          tensionTlBr7: [] // Available in rect.vue / 在 rect.vue 中可用 (TL-BR7张力)
         },
         exit: {
           time: [],
-          tensionBr8Br9: [],
-          tensionBr9Tr: [],
-          speedExitSection: []
+          // TR fields / TR字段
+          tensionBr8Br9: [], // Displayed / 已显示 (BR8-BR9张力)
+          tensionBr9Tr: [], // Displayed / 已显示 (BR9-TR张力)
+          speedExitSection: [], // Displayed / 已显示 (出口段速度)
+          coilLength: [], // Available in rect.vue / 在 rect.vue 中可用 (钢卷长度)
+          // CXL1/CXL2 fields / CXL1/CXL2字段
+          cxlLength: [], // Available in rect.vue / 在 rect.vue 中可用 (出口活套位置)
+          cxlCapacity: [], // Available in rect.vue / 在 rect.vue 中可用 (出口活套套量)
+          tensionCxl: [] // Available in rect.vue / 在 rect.vue 中可用 (出口活套张力)
         }
       },
       maxDataPoints: 50
@@ -284,7 +372,7 @@ export default {
   },
   computed: {
     formattedRawData() {
-      if (!this.rawData) return this.$t('track.waitingData');
+      if (!this.rawData) return 'Waiting for data...'; // 等待接收数据...
       try {
         return JSON.stringify(JSON.parse(this.rawData), null, 2);
       } catch (e) {
@@ -331,12 +419,12 @@ export default {
       return type ? type.label : this.currentType;
     },
 
-    // 复制原始数据
+    // Copy Raw Data / 复制原始数据
     copyRawData() {
       navigator.clipboard.writeText(this.formattedRawData).then(() => {
-        this.$message.success(this.$t('track.copySuccess'));
+        this.$message.success('Copied to clipboard'); // 已复制到剪贴板
       }).catch(() => {
-        this.$message.error(this.$t('track.copyFailed'));
+        this.$message.error('Copy failed'); // 复制失败
       });
     },
 
@@ -385,7 +473,8 @@ export default {
           textStyle: { color: '#fff' }
         },
         legend: {
-          data: [$t('track.entryTension1'), $t('track.entryTension2'), $t('track.entryTension3'), $t('track.stripSpeed')],
+          data: ['Tension POR-BR1', 'Tension BR1-BR2', 'Tension BR2-BR3', 'Strip Speed'],
+          // ['入口张力1', '入口张力2', '入口张力3', '带钢速度']
           textStyle: { color: '#b0b0b0', fontSize: 12 },
           top: 10
         },
@@ -406,7 +495,7 @@ export default {
         },
         series: [
           {
-            name: this.$t('track.entryTension1'),
+            name: 'Tension POR-BR1', // 入口张力1
             type: 'line',
             data: [],
             smooth: true,
@@ -415,7 +504,7 @@ export default {
             areaStyle: { color: 'rgba(0, 212, 255, 0.1)' }
           },
           {
-            name: this.$t('track.entryTension2'),
+            name: 'Tension BR1-BR2', // 入口张力2
             type: 'line',
             data: [],
             smooth: true,
@@ -423,7 +512,7 @@ export default {
             itemStyle: { color: '#00ff9d' }
           },
           {
-            name: this.$t('track.entryTension3'),
+            name: 'Tension BR2-BR3', // 入口张力3
             type: 'line',
             data: [],
             smooth: true,
@@ -431,7 +520,7 @@ export default {
             itemStyle: { color: '#ffa502' }
           },
           {
-            name: this.$t('track.stripSpeed'),
+            name: 'Strip Speed', // 带钢速度
             type: 'line',
             data: [],
             smooth: true,
@@ -454,7 +543,8 @@ export default {
           textStyle: { color: '#fff' }
         },
         legend: {
-          data: [$t('track.phFurnaceTempActual'), $t('track.nof1FurnaceTempActual'), $t('track.nof1FurnaceTempSet')],
+          data: ['PH Exit Temp', 'RTF Exit Temp', 'Pot Temperature'],
+          // ['PH炉出口温度', 'RTF炉出口温度', '锌锅温度']
           textStyle: { color: '#b0b0b0', fontSize: 12 },
           top: 10
         },
@@ -475,7 +565,7 @@ export default {
         },
         series: [
           {
-            name: this.$t('track.phFurnaceTempActual'),
+            name: 'PH Exit Temp', // PH炉出口温度
             type: 'line',
             data: [],
             smooth: true,
@@ -484,7 +574,7 @@ export default {
             areaStyle: { color: 'rgba(255, 99, 72, 0.1)' }
           },
           {
-            name: this.$t('track.nof1FurnaceTempActual'),
+            name: 'RTF Exit Temp', // RTF炉出口温度
             type: 'line',
             data: [],
             smooth: true,
@@ -492,7 +582,7 @@ export default {
             itemStyle: { color: '#ffa502' }
           },
           {
-            name: this.$t('track.nof1FurnaceTempSet'),
+            name: 'Pot Temperature', // 锌锅温度
             type: 'line',
             data: [],
             smooth: true,
@@ -515,7 +605,8 @@ export default {
           textStyle: { color: '#fff' }
         },
         legend: {
-          data: [$t('track.avrCoatingWeightTop'), $t('track.avrCoatingWeightBottom'), $t('track.airKnifePressure'), $t('track.exitSpeed')],
+          data: ['Avg Coating Weight Top', 'Avg Coating Weight Bottom', 'Air Knife Pressure', 'TM Exit Speed'],
+          // ['顶部平均涂层重量', '底部平均涂层重量', '气刀压力', 'TM出口速度']
           textStyle: { color: '#b0b0b0', fontSize: 12 },
           top: 10
         },
@@ -536,7 +627,7 @@ export default {
         },
         series: [
           {
-            name: this.$t('track.avrCoatingWeightTop'),
+            name: 'Avg Coating Weight Top', // 顶部平均涂层重量
             type: 'line',
             data: [],
             smooth: true,
@@ -545,7 +636,7 @@ export default {
             areaStyle: { color: 'rgba(0, 255, 157, 0.1)' }
           },
           {
-            name: this.$t('track.avrCoatingWeightBottom'),
+            name: 'Avg Coating Weight Bottom', // 底部平均涂层重量
             type: 'line',
             data: [],
             smooth: true,
@@ -553,7 +644,7 @@ export default {
             itemStyle: { color: '#00d4ff' }
           },
           {
-            name: this.$t('track.airKnifePressure'),
+            name: 'Air Knife Pressure', // 气刀压力
             type: 'line',
             data: [],
             smooth: true,
@@ -561,7 +652,7 @@ export default {
             itemStyle: { color: '#ffa502' }
           },
           {
-            name: this.$t('track.exitSpeed'),
+            name: 'TM Exit Speed', // TM出口速度
             type: 'line',
             data: [],
             smooth: true,
@@ -584,7 +675,8 @@ export default {
           textStyle: { color: '#fff' }
         },
         legend: {
-          data: [$t('track.exitTension1'), $t('track.exitTension2'), $t('track.exitSpeed')],
+          data: ['Tension BR8-BR9', 'Tension BR9-TR', 'Exit Speed'],
+          // ['出口张力1', '出口张力2', '出口速度']
           textStyle: { color: '#b0b0b0', fontSize: 12 },
           top: 10
         },
@@ -605,7 +697,7 @@ export default {
         },
         series: [
           {
-            name: this.$t('track.exitTension1'),
+            name: 'Tension BR8-BR9', // 出口张力1
             type: 'line',
             data: [],
             smooth: true,
@@ -614,7 +706,7 @@ export default {
             areaStyle: { color: 'rgba(0, 212, 255, 0.1)' }
           },
           {
-            name: this.$t('track.exitTension2'),
+            name: 'Tension BR9-TR', // 出口张力2
             type: 'line',
             data: [],
             smooth: true,
@@ -622,7 +714,7 @@ export default {
             itemStyle: { color: '#00ff9d' }
           },
           {
-            name: this.$t('track.exitSpeed'),
+            name: 'Exit Speed', // 出口速度
             type: 'line',
             data: [],
             smooth: true,
@@ -732,11 +824,43 @@ export default {
     },
 
     resetChartData() {
+      // Reset all chart data including all fields from DeviceEnum
+      // 重置所有图表数据，包括 DeviceEnum 中的所有字段
       this.chartData = {
-        entry: { time: [], tensionPorBr1: [], tensionBr1Br2: [], tensionBr2Br3: [], stripSpeed: [] },
-        furnace: { time: [], phFurnaceTemperatureActual: [], nof1FurnaceTemperatureActual: [], nof1FurnaceTemperatureSet: [] },
-        coat: { time: [], avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [] },
-        exit: { time: [], tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [] }
+        entry: {
+          time: [],
+          tensionPorBr1: [], tensionPorBr2: [], stripSpeed: [],
+          weldStatus: [],
+          celLength: [], celCapacity: [], tensionCel: [],
+          celLengthMax: [], celLengthMin: [], bR4or5toBR6Tension: [],
+          tensionBr1Br2: [], tensionBr2Br3: [],
+          cleaningVoltage: [], cleaningCurrent: [], alkaliConcentration: [], alkaliTemperature: []
+        },
+        furnace: {
+          time: [],
+          phfExitStripTemp: [], potTemperature: [], gasConsumption: [],
+          rtfExitStripTemp: [], zincPotPower: [],
+          jcsExitStripTemp: [], coolingTowerStripTemp: [],
+          scsExitStripTemp: []
+        },
+        coat: {
+          time: [],
+          avrCoatingWeightTop: [], avrCoatingWeightBottom: [], airKnifePressure: [], stripSpeedTmExit: [],
+          stdCoatingWeightTop: [], maxCoatingWeightTop: [], minCoatingWeightTop: [],
+          stdCoatingWeightBottom: [], maxCoatingWeightBottom: [], minCoatingWeightBottom: [],
+          airKnifeFlow: [], airKnifeGap: [], tensionBr8Tm: [], tensionTmBr9: [], tensionBr8Br9: [],
+          tmMask: [], tmElongation: [], rollForceOperator: [], rollForceDrive: [],
+          motorTorque: [], bendingForce: [], antiCrimpingRollMesh: [], billyRollMesh: [],
+          tensionTlBr10Br11: [], tensionBr9toBr10Br11: [], tlFlag: [], tlElongation: [],
+          levelingUnit1Mesh: [], levelingUnit2Mesh: [], antiCrossBowUnitMesh: [],
+          tensionBr10Br11toBr12: [], stripSpeedAfp: [], stripTempAfp: [],
+          tensionBr5Tm: [], tensionTlBr7: []
+        },
+        exit: {
+          time: [],
+          tensionBr8Br9: [], tensionBr9Tr: [], speedExitSection: [], coilLength: [],
+          cxlLength: [], cxlCapacity: [], tensionCxl: []
+        }
       };
       this.updateCharts();
     },
@@ -759,35 +883,103 @@ export default {
       
       if (data.appMeasureEntryMessage) {
         this.addDataPoint('entry', timeLabel, {
+          // POR1 fields / POR1字段
           tensionPorBr1: data.appMeasureEntryMessage.tensionPorBr1,
+          stripSpeed: data.appMeasureEntryMessage.stripSpeed,
+          // POR2 fields / POR2字段
+          tensionPorBr2: data.appMeasureEntryMessage.tensionPorBr2,
+          // WELDER fields / WELDER字段
+          weldStatus: data.appMeasureEntryMessage.weldStatus,
+          // ENL1/ENL2/ENL3 fields / ENL1/ENL2/ENL3字段
+          celLength: data.appMeasureEntryMessage.celLength,
+          celCapacity: data.appMeasureEntryMessage.celCapacity,
+          tensionCel: data.appMeasureEntryMessage.tensionCel,
+          celLengthMax: data.appMeasureEntryMessage.celLengthMax,
+          celLengthMin: data.appMeasureEntryMessage.celLengthMin,
+          bR4or5toBR6Tension: data.appMeasureEntryMessage.bR4or5toBR6Tension,
+          // Additional entry fields / 其他入口段字段
           tensionBr1Br2: data.appMeasureEntryMessage.tensionBr1Br2,
           tensionBr2Br3: data.appMeasureEntryMessage.tensionBr2Br3,
-          stripSpeed: data.appMeasureEntryMessage.stripSpeed
+          // CLEAN fields / CLEAN字段 (from AppMeasureEntryMessage)
+          cleaningVoltage: data.appMeasureEntryMessage.cleaningVoltage,
+          cleaningCurrent: data.appMeasureEntryMessage.cleaningCurrent,
+          alkaliConcentration: data.appMeasureEntryMessage.alkaliConcentration,
+          alkaliTemperature: data.appMeasureEntryMessage.alkaliTemperature
         });
       }
       
       if (data.appMeasureFurnaceMessage) {
         this.addDataPoint('furnace', timeLabel, {
-          phFurnaceTemperatureActual: data.appMeasureFurnaceMessage.phFurnaceTemperatureActual,
-          nof1FurnaceTemperatureActual: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureActual,
-          nof1FurnaceTemperatureSet: data.appMeasureFurnaceMessage.nof1FurnaceTemperatureSet
+          // FUR1 fields / FUR1字段
+          phfExitStripTemp: data.appMeasureFurnaceMessage.phfExitStripTemp || data.appMeasureFurnaceMessage.phFurnaceTemperatureActual,
+          potTemperature: data.appMeasureFurnaceMessage.potTemperature,
+          gasConsumption: data.appMeasureFurnaceMessage.gasConsumption || data.appMeasureFurnaceMessage.gasInstantaneousConsumption,
+          // FUR2 fields / FUR2字段
+          rtfExitStripTemp: data.appMeasureFurnaceMessage.rtfExitStripTemp || data.appMeasureFurnaceMessage.rtf1FurnaceTemperatureActual,
+          zincPotPower: data.appMeasureFurnaceMessage.zincPotPower || data.appMeasureFurnaceMessage.potPower,
+          // FUR3 fields / FUR3字段
+          jcsExitStripTemp: data.appMeasureFurnaceMessage.jcsExitStripTemp || data.appMeasureFurnaceMessage.jcf1FurnaceTemperatureActual,
+          coolingTowerStripTemp: data.appMeasureFurnaceMessage.coolingTowerStripTemp || data.appMeasureFurnaceMessage.coolingTowerTemperature,
+          // FUR4/POT/TOWER fields / FUR4/POT/TOWER字段
+          scsExitStripTemp: data.appMeasureFurnaceMessage.scsExitStripTemp
         });
       }
       
       if (data.appMeasureCoatMessage) {
         this.addDataPoint('coat', timeLabel, {
+          // COAT fields / COAT字段
           avrCoatingWeightTop: data.appMeasureCoatMessage.avrCoatingWeightTop,
           avrCoatingWeightBottom: data.appMeasureCoatMessage.avrCoatingWeightBottom,
           airKnifePressure: data.appMeasureCoatMessage.airKnifePressure,
-          stripSpeedTmExit: data.appMeasureCoatMessage.stripSpeedTmExit
+          stripSpeedTmExit: data.appMeasureCoatMessage.stripSpeedTmExit,
+          // Additional COAT fields (all available in rect.vue) / 其他 COAT 字段（在 rect.vue 中可用）
+          stdCoatingWeightTop: data.appMeasureCoatMessage.stdCoatingWeightTop,
+          maxCoatingWeightTop: data.appMeasureCoatMessage.maxCoatingWeightTop,
+          minCoatingWeightTop: data.appMeasureCoatMessage.minCoatingWeightTop,
+          stdCoatingWeightBottom: data.appMeasureCoatMessage.stdCoatingWeightBottom,
+          maxCoatingWeightBottom: data.appMeasureCoatMessage.maxCoatingWeightBottom,
+          minCoatingWeightBottom: data.appMeasureCoatMessage.minCoatingWeightBottom,
+          airKnifeFlow: data.appMeasureCoatMessage.airKnifeFlow,
+          airKnifeGap: data.appMeasureCoatMessage.airKnifeGap,
+          tensionBr8Tm: data.appMeasureCoatMessage.tensionBr8Tm,
+          tensionTmBr9: data.appMeasureCoatMessage.tensionTmBr9,
+          tensionBr8Br9: data.appMeasureCoatMessage.tensionBr8Br9,
+          tmMask: data.appMeasureCoatMessage.tmMask,
+          tmElongation: data.appMeasureCoatMessage.tmElongation,
+          rollForceOperator: data.appMeasureCoatMessage.rollForceOperator,
+          rollForceDrive: data.appMeasureCoatMessage.rollForceDrive,
+          motorTorque: data.appMeasureCoatMessage.motorTorque,
+          bendingForce: data.appMeasureCoatMessage.bendingForce,
+          antiCrimpingRollMesh: data.appMeasureCoatMessage.antiCrimpingRollMesh,
+          billyRollMesh: data.appMeasureCoatMessage.billyRollMesh,
+          tensionTlBr10Br11: data.appMeasureCoatMessage.tensionTlBr10Br11,
+          tensionBr9toBr10Br11: data.appMeasureCoatMessage.tensionBr9toBr10Br11,
+          tlFlag: data.appMeasureCoatMessage.tlFlag,
+          tlElongation: data.appMeasureCoatMessage.tlElongation,
+          levelingUnit1Mesh: data.appMeasureCoatMessage.levelingUnit1Mesh,
+          levelingUnit2Mesh: data.appMeasureCoatMessage.levelingUnit2Mesh,
+          antiCrossBowUnitMesh: data.appMeasureCoatMessage.antiCrossBowUnitMesh,
+          tensionBr10Br11toBr12: data.appMeasureCoatMessage.tensionBr10Br11toBr12,
+          stripSpeedAfp: data.appMeasureCoatMessage.stripSpeedAfp,
+          stripTempAfp: data.appMeasureCoatMessage.stripTempAfp,
+          // TM fields / TM字段
+          tensionBr5Tm: data.appMeasureCoatMessage.tensionBr5Tm,
+          // TL fields / TL字段
+          tensionTlBr7: data.appMeasureCoatMessage.tensionTlBr7
         });
       }
       
       if (data.appMeasureExitMessage) {
         this.addDataPoint('exit', timeLabel, {
+          // TR fields / TR字段
           tensionBr8Br9: data.appMeasureExitMessage.tensionBr8Br9,
           tensionBr9Tr: data.appMeasureExitMessage.tensionBr9Tr,
-          speedExitSection: data.appMeasureExitMessage.speedExitSection
+          speedExitSection: data.appMeasureExitMessage.speedExitSection,
+          coilLength: data.appMeasureExitMessage.coilLength,
+          // CXL1/CXL2 fields / CXL1/CXL2字段
+          cxlLength: data.appMeasureExitMessage.cxlLength,
+          cxlCapacity: data.appMeasureExitMessage.cxlCapacity,
+          tensionCxl: data.appMeasureExitMessage.tensionCxl
         });
       }
       
@@ -831,9 +1023,9 @@ export default {
         this.furnaceChart.setOption({
           xAxis: { data: this.chartData.furnace.time },
           series: [
-            { data: this.chartData.furnace.phFurnaceTemperatureActual },
-            { data: this.chartData.furnace.nof1FurnaceTemperatureActual },
-            { data: this.chartData.furnace.nof1FurnaceTemperatureSet }
+            { data: this.chartData.furnace.phfExitStripTemp },
+            { data: this.chartData.furnace.rtfExitStripTemp },
+            { data: this.chartData.furnace.potTemperature }
           ]
         });
       }
diff --git a/apps/l2/src/views/l2/track/rect.vue b/apps/l2/src/views/l2/track/rect.vue
index 2bcb8ba..70392e3 100644
--- a/apps/l2/src/views/l2/track/rect.vue
+++ b/apps/l2/src/views/l2/track/rect.vue
@@ -1,2364 +1,2587 @@
 <template>
-  <div class="track-container">
-    <el-row :gutter="20">
-      <!-- 左侧：设备列表 -->
-      <el-col :span="16">
-        <!-- 加载状态 -->
-        <div v-if="isLoading" class="loading-container">
-          <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
-          <span>{{ $t('common.loading') }}</span>
-        </div>
+    <div class="track-container">
+      <!-- Set Values Floating Panel / 设定值悬浮窗 -->
+      <FloatingPanel ref="setValuesPanel" title="Set Values" width="720px" storageKey="TRACK_SET_VALUES">
+        <LatestSetValues :driveData="setupValue.drive" :furnaceData="setupValue.furnace" />
+      </FloatingPanel>
 
-        <!-- WebSocket 连接状态指示 -->
-        <div v-if="!isLoading" class="ws-status-bar">
-          <el-tooltip :content="$t('track.measureData')" 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="$t('track.positionTracking')" 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="$t('track.operationSignal')" 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="$t('track.materialMapping')" 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="$t('track.calculationResult')" placement="top">
-            <el-badge :is-dot="true" :type="socketStatus.calcSetup ? 'success' : 'danger'">
-              <i class="el-icon-s-marketing"></i>
-            </el-badge>
-          </el-tooltip>
-        </div>
+      <FloatingPanel ref="furCurrentPanel" title="Furnace Current" width="400px" storageKey="TRACK_FUR_CURRENT">
+        <FurCurrent :driveData="realtimeData.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>
+  
+          <!-- 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>
+                </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">
-          <!-- 入口段区域 -->
-          <div class="section-area entry-area">
-            <div class="section-header">
-              {{ $t('track.entrySection') }}
-              <span class="section-info" v-if="positionData.entrySpeed">{{ $t('track.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>
+            <!-- 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 class="section-area furnace-area">
-            <div class="section-header">
-              {{ $t('track.furnaceSection') }}
-              <span class="section-info" v-if="positionData.technologySpeed">{{ $t('track.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 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>
-            <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 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>
-          </div>
-
-          <!-- 涂层段区域 -->
-          <div class="section-area coat-area">
-            <div class="section-header">{{ $t('track.coatSection') }}</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>
-
-          <!-- 出口段区域 -->
-          <div class="section-area exit-area">
-            <div class="section-header">
-              {{ $t('track.exitSection') }}
-              <span class="section-info" v-if="positionData.exitSpeed">{{ $t('track.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>
-
-          <!-- 其他段区域 -->
-          <div class="section-area" v-if="exitOtherDevicesList.length">
-            <div class="section-header">{{ $t('track.otherSection') }}</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">
-          <!-- 生产计划列表 -->
-          <div class="panel">
-            <div class="panel-title">
-              <i class="el-icon-s-order"></i> {{ $t('track.productionPlan') }}
-            </div>
-            <div class="plan-list-vertical">
-              <el-empty v-if="planQueue.length === 0" :description="$t('track.noProductionPlan')" :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">{{ $t('track.planId') }}：{{ plan.planid || '-' }}</div>
-                    <div class="plan-coil">{{ $t('track.coilid') }}：{{ plan.coilid || '-' }}</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>
-                  <el-tag :type="getPlanStatusTagType(plan.status)" size="mini">{{ getPlanStatusText(plan.status) }}</el-tag>
                 </div>
-                <div class="plan-item-bottom">
-                  <span>{{ $t('track.steelGrade') }}：{{ plan.steelGrade || '-' }}</span>
-                  <span>{{ $t('track.sequence') }}：{{ plan.seqid || '-' }}</span>
+              </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>
+                <!-- 速度 -->
+                 <!-- 展开 -->
+                <el-button type="text" size="small" @click="openFurCurrentPanel">
+                  <i class="el-icon-paperclip"></i>
+                  more
+                </el-button>
+              </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>
-
-          <!-- 生产计划详情 -->
-          <div class="panel" v-if="selectedPlan">
-            <div class="panel-title">
-              <i class="el-icon-document"></i> {{ $t('track.productionPlanDetail') }}
-              <el-button size="mini" type="text" icon="el-icon-close" @click="selectedPlan = null"></el-button>
-            </div>
-            <div class="plan-detail-content">
-              <!-- 位置信息（如果在产线上） -->
-            <div v-if="selectedPlanPosition" class="position-alert">
-              <div class="position-icon">
-                <i class="el-icon-location"></i>
+        </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="position-info">
-                <div class="position-label">{{ $t('track.currentPosition') }}</div>
-                <div class="position-name">{{ selectedPlanPosition.positionNameCn }}</div>
-                <div class="position-code">{{ selectedPlanPosition.positionNameEn }}</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>
-              
-              <el-descriptions :column="1" border size="small">
-                <el-descriptions-item label="计划ID">{{ selectedPlan.planid || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="钢卷号">{{ selectedPlan.coilid || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="顺序号">{{ selectedPlan.seqid || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="状态">
-                  <el-tag :type="getPlanStatusTagType(selectedPlan.status)" size="small" effect="dark">
-                    {{ getPlanStatusText(selectedPlan.status) }}
-                  </el-tag>
-                </el-descriptions-item>
-                <el-descriptions-item label="钢种">{{ selectedPlan.steelGrade || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="入口厚度">
-                  {{ selectedPlan.entryThick ? selectedPlan.entryThick + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="入口宽度">
-                  {{ selectedPlan.entryWidth ? selectedPlan.entryWidth + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="入口重量">
-                  {{ selectedPlan.entryWeight ? selectedPlan.entryWeight + ' t' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="入口长度">
-                  {{ selectedPlan.entryLength ? selectedPlan.entryLength + ' mm' : '-' }}
-                </el-descriptions-item>
-                <el-descriptions-item label="订单号">{{ selectedPlan.orderNo || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="机组号">{{ selectedPlan.unitCode || '-' }}</el-descriptions-item>
-                <el-descriptions-item label="计划类型">{{ selectedPlan.planType || '-' }}</el-descriptions-item>
-              </el-descriptions>
-              
-              <!-- 时间信息 -->
-            <div class="plan-time-info" v-if="selectedPlan.onlineDate || selectedPlan.startDate || selectedPlan.endDate">
-              <div class="info-subtitle">{{ $t('track.timeInfo') }}</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="上线时间" 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="开始时间" 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="结束时间" 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>
-
-          <!-- 最近操作信号 -->
-          <div class="panel" v-if="signalData">
-            <div class="panel-title">
-              <i class="el-icon-bell"></i> {{ $t('track.recentOperation') }}
-              <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 ? '手动操作' : '自动操作' }}
-              </el-tag>
-              <div class="signal-detail">
-                <div><strong>操作类型:</strong> 
-                  <span :class="getOperationTextClass(signalData.operation)">
-                    {{ getOperationText(signalData.operation) }}
-                  </span>
-                </div>
-                <div><strong>钢卷号:</strong> {{ producingCoilId || signalData.entryMatId || '-' }}</div>
-                <div><strong>计划ID:</strong> {{ signalData.planId || '-' }}</div>
-                <div v-if="signalData.porIdx !== null && signalData.porIdx !== undefined">
-                  <strong>开卷机:</strong> {{ signalData.porIdx }}
-                </div>
-                <div v-if="signalData.trIdx !== null && signalData.trIdx !== undefined">
-                  <strong>卷取机:</strong> {{ signalData.trIdx }}
-                </div>
-                <div v-if="signalData.virtualPlanFlag">
-                  <el-tag type="danger" size="mini">虚拟卷</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>
-          <!-- 操作按钮 -->
-          <div class="panel">
-            <div class="panel-title">{{ $t('track.operation') }}</div>
-            <div class="btn-list">
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">{{ $t('track.coilOnline') }}</el-button>
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">{{ $t('track.manualUnload') }}</el-button>
-              <el-button class="action-btn" size="small"
-                @click="handleOperate(selectedCard, 'ALL_RETURN')">{{ $t('track.allReturn') }}</el-button>
-              <el-button class="action-btn" size="small"
-                @click="handleOperate(selectedCard, 'HALF_RETURN')">{{ $t('track.halfReturn') }}</el-button>
-              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">{{ $t('track.unloadAndBlock') }}</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>
-          <!-- 设备基本信息 -->
-          <div class="panel" v-if="selectedCard">
-            <div class="panel-title">{{ $t('track.basicInfo') }}</div>
-            <table class="info-table">
-              <tr>
-                <td>{{ $t('track.positionName') }}</td>
-                <td>{{ selectedCard.positionNameCn || '-' }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('track.positionCode') }}</td>
-                <td>{{ selectedCard.positionNameEn || '-' }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('track.coilid') }}</td>
-                <td>{{ selectedCard.matId || '-' }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('track.planId') }}</td>
-                <td>{{ selectedCard.planId || '-' }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('track.planId') }}</td>
-                <td>{{ selectedCard.planNo || '-' }}</td>
-              </tr>
-            </table>
-          </div>
-
-          <!-- 设备实时数据 -->
-
-          <div class="panel">
-
-            <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
-            <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
-              <el-form-item label="当前位置" prop="current">
-                <el-select v-model="adjustForm.current" :placeholder="$t('common.pleaseSelect')">
-                  <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
-                    :value="item.positionNameEn"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="目标位置" prop="target">
-                <el-select v-model="adjustForm.target" :placeholder="$t('common.pleaseSelect')">
-                  <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">{{ $t('track.confirmAdjustment') }}</el-button>
-          </div>
-        </div>
-
-      </el-col>
-    </el-row>
-
-    <!-- 计算结果对话框 -->
-    <el-dialog
-      :title="$t('track.calculationSetupResult')"
-      :visible.sync="showCalcResultDialog"
-      width="80%"
-      v-if="calcSetupResult"
-    >
-      <div class="calc-result-header">
-        <el-tag :type="calcSetupResult.flag ? 'success' : 'danger'">
-          {{ calcSetupResult.flag ? $t('track.calculationSuccess') : $t('track.calculationFailed') }}
-        </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="$t('track.passno')" width="80" fixed></el-table-column>
-        <el-table-column prop="entryThick" :label="$t('track.entryThickness')" width="120"></el-table-column>
-        <el-table-column prop="exitThick" :label="$t('track.exitThickness')" width="120"></el-table-column>
-        <el-table-column prop="reduction" :label="$t('track.reduction')" width="100"></el-table-column>
-        <el-table-column prop="rollSpeed" :label="$t('track.rollSpeed')" width="120"></el-table-column>
-        <el-table-column prop="rollForce" :label="$t('track.rollForce')" width="120"></el-table-column>
-        <el-table-column prop="entryTension" :label="$t('track.entryTension')" width="120"></el-table-column>
-        <el-table-column prop="exitTension" :label="$t('track.exitTension')" width="120"></el-table-column>
-      </el-table>
-      <div v-else class="empty-msg">{{ $t('track.noCalculationResult') }}</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="$t('track.por')" prop="porIdx">
-          <el-input v-model="operateMatForm.porIdx"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('track.tr')" prop="trIdx">
-          <el-input v-model="operateMatForm.trIdx"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('track.planId')" prop="planId">
-          <el-input v-model="operateMatForm.planId" :placeholder="$t('track.pleaseInputPlanId')"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('track.coilid')" prop="entryMatId">
-          <el-input v-model="operateMatForm.entryMatId" :placeholder="$t('track.pleaseInputCoilid')"></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="计划号" prop="planNo">
-          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
-        </el-form-item> -->
-        <el-form-item :label="$t('track.operationType')" prop="operation">
-          <el-select v-model="operateMatForm.operation" disabled>
-            <el-option :label="$t('track.coilOnline')" value="ONLINE"></el-option>
-            <el-option :label="$t('track.manualUnload')" value="UNLOAD"></el-option>
-            <el-option :label="$t('track.allReturn')" value="ALL_RETURN"></el-option>
-            <el-option :label="$t('track.halfReturn')" value="HALF_RETURN"></el-option>
-            <el-option :label="$t('track.unloadAndBlock')" value="BLOCK"></el-option>
-            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
-          </el-select>
-        </el-form-item>
-
-        <!-- 回退相关字段 -->
-        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
-          <el-form-item :label="$t('track.returnMatId')" prop="returnMatId">
-            <el-input v-model="operateMatForm.returnMatId" :placeholder="$t('track.pleaseInputReturnMatId')"></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="$t('track.returnWeight')" prop="returnWeight">
-            <el-input v-model="operateMatForm.returnWeight" :placeholder="$t('track.pleaseInputReturnWeight')"></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="$t('track.returnRemark')" 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>
-
-        <!-- 产出长度字段 -->
-        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
-          <el-form-item :label="$t('track.outputCoilLength')" prop="coilLength">
-            <el-input v-model="operateMatForm.coilLength" type="number" :placeholder="$t('track.pleaseInputOutputCoilLength')"></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">{{ $t('common.cancel') }}</el-button>
-        <el-button type="primary" @click="submitOperateForm">{{ $t('common.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'
-
-// 基于后端 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'] },
-  ENL2: { sectionType: 'PROCESS', sourceType: 'ENTRY', paramFields: ['celLength', 'celCapacity', 'tensionCel'] },
-
-  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','tensionBr5Tm',
-    'tensionTmBr6','tensionBr5Br6','tmMask','tmElongation','rollForceOperator','rollForceDrive',
-    'motorTorque','bendingForce','antiCrimpingRollMesh','billyRollMesh',
-    'tensionTlBr7','tensionBr6Br7','tlFlag','tlElongation','levelingUnit1Mesh','levelingUnit2Mesh',
-    'antiCrossBowUnitMesh','tensionBr7Br8','stripSpeedAfp','stripTempAfp'
-  ] },
-
-  CXL1: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
-  CXL2: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['cxlLength', 'cxlCapacity', 'tensionCxl'] },
-  INS: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['inspectionStatus'] },
-  TR: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['coilLength', 'speedExitSection', 'tensionBr9Tr'] },
-  EXC: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] },
-  WEIGHT: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: [] },
-  WEIT: { sectionType: 'EXIT', sourceType: 'EXIT', paramFields: ['coilLength', 'speedExitSection'] }
-}
-
-const PARAM_LABELS = {
-  tensionPorBr1: 'tensionPorBr1',
-  tensionPorBr2: 'tensionPorBr2',
-  stripSpeed: 'stripSpeed',
-  weldStatus: 'weldStatus',
-  celLength: 'celLength',
-  celCapacity: 'celCapacity',
-  tensionCel: 'tensionCel',
-  cleaningVoltage: 'cleaningVoltage',
-  cleaningCurrent: 'cleaningCurrent',
-  alkaliConcentration: 'alkaliConcentration',
-  alkaliTemperature: 'alkaliTemperature',
-  phfExitStripTemp: 'phfExitStripTemp',
-  potTemperature: 'potTemperature',
-  gasConsumption: 'gasConsumption',
-  rtfExitStripTemp: 'rtfExitStripTemp',
-  zincPotPower: 'zincPotPower',
-  jcsExitStripTemp: 'jcsExitStripTemp',
-  coolingTowerStripTemp: 'coolingTowerStripTemp',
-  scsExitStripTemp: 'scsExitStripTemp',
-  tensionBr5Tm: 'tensionBr5Tm',
-  stripSpeedTmExit: 'stripSpeedTmExit',
-  tmElongation: 'tmElongation',
-  tensionTlBr7: 'tensionTlBr7',
-  tlElongation: 'tlElongation',
-  cxlLength: 'cxlLength',
-  cxlCapacity: 'cxlCapacity',
-  tensionCxl: 'tensionCxl',
-  inspectionStatus: 'inspectionStatus',
-  coilLength: 'coilLength',
-  speedExitSection: 'speedExitSection',
-  tensionBr9Tr: 'tensionBr9Tr',
-  avrCoatingWeightTop: 'avrCoatingWeightTop',
-  avrCoatingWeightBottom: 'avrCoatingWeightBottom'
-}
-
-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'
+  import FurCurrent from './components/FurCurrent.vue'
+  
+  // 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, FurCurrent },
+    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: '',
+        furData: {},
+      }
+    },
+    computed: {
+      // 当前计划（ONLINE 或 PRODUCING状态）
+      currentPlans() {
+        return this.planQueue.filter(plan => 
+          ['ONLINE', 'PRODUCING', 'PRODUCTING'].includes(plan.status)
+        )
       },
-      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)
-      )
+      // 当前生产中的计划（取状态为生产中的首条）
+      producingPlan() {
+        return this.planQueue.find(plan => ['PRODUCING', 'PRODUCTING'].includes(plan.status))
+      },
+  
+      // 当前生产中的钢卷号
+      producingCoilId() {
+        if (this.producingPlan) {
+          return this.producingPlan.coilid || this.producingPlan.matId || ''
+        }
+        return ''
+      },
       
-      return position
-    },
-    
-    getOperateTitle() {
-      const titleMap = {
-        'ONLINE': '钢卷上线',
-        'UNLOAD': '手动卸卷',
-        'ALL_RETURN': '整卷回退',
-        'HALF_RETURN': '半卷回退',
-        'BLOCK': '卸卷并封闭',
-        'THROW_TAIL': '甩尾'
-      }
-      return titleMap[this.operateMatForm.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 = []
+      // 显示的计划列表（根据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', 'tensionBr1Br2', 'tensionBr2Br3', 'celLength', 'celCapacity', 
+          // 'celLengthMax', 'celLengthMin', 'cleaningCurrent', 'cleaningVoltage', 
+          'stripLocation', 'rinseTemperature', 'alkaliTemperature'])
+      },
+      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', 'tensionBr6toBr7Br8', 'tensionBr8Tm', 
+          'tensionTmBr9', '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: this.$t(`track.${PARAM_LABELS[field] || field}`),
+              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: this.$t(`track.${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
+  
+        return data
       }
     },
+  
+        methods: {
+      // Open set values floating panel / 打开设定值悬浮窗
+      openSetValuesPanel() {
+        this.$refs.setValuesPanel && this.$refs.setValuesPanel.open()
+      },
 
-    // ============ 数据处理方法 ============
-    
-    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()
-    },
+      openFurCurrentPanel() {
+        this.$refs.furCurrentPanel && this.$refs.furCurrentPanel.open()
+      },
 
-    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 ? `[${this.$t('track.manualOperation')}]` : `[${this.$t('track.autoOperation')}]`
-      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${this.$t('track.coilid')}: ${data.entryMatId}\n${this.$t('track.planId')}: ${data.planId || '-'}`,
-          type: config.type,
-          duration: config.duration,
-          position: 'top-right',
-          showClose: true
-        })
-      
-      }
-
-      // 如果需要弹窗确认（甩尾等重要操作）
-      if (config.needAlert) {
-        this.$alert(
-          `${this.$t('track.coilid')}: ${data.entryMatId}\n${this.$t('track.planId')}: ${data.planId || '-'}\n${this.$t('track.operationType')}: ${operationText}\n${this.$t('track.operationType')}: ${autoFlagText}`,
-          `${config.icon} ${config.title}`,
-          {
-            confirmButtonText: this.$t('common.confirm'),
-            type: config.type,
-            center: true
+      // 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 连接管理 ============
       
-      // 如果物料映射 WebSocket 未连接，则刷新数据
-      if (!this.socketStatus.matmap) {
-        this.fetchData()
-      }
-
-
-      // 记录本次操作类型
-      this.lastSignalOperation = data.operation
-    },
-
-    processMatmapData(data) {
-      if (Array.isArray(data)) {
-        this.matMapList = data
+      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(`${this.$t('track.calculationSuccess')} (Key: ${data.key})`)
-        this.showCalcResultDialog = true
-      } else {
-        this.$message.error(`${this.$t('track.calculationFailed')} (Key: ${data.key})`)
-      }
-    },
-
-    // ============ 辅助方法 ============
-    
-    getOperationText(operation) {
-      const operationMap = {
-        ONLINE: this.$t('track.coilOnline'),
-        UNLOAD: this.$t('track.manualUnload'),
-        PRODUCING: this.$t('track.producing'),
-        PRODUCT: this.$t('track.product'),
-        PAY_OVER: this.$t('track.payOver'),
-        THROW_TAIL: this.$t('track.throwTail'),
-        ALL_RETURN: this.$t('track.allReturn'),
-        HALF_RETURN: this.$t('track.halfReturn'),
-        BLOCK: this.$t('track.unloadAndBlock')
-      }
-      return operationMap[operation] || operation
-    },
-
-    // 获取操作类型配置
-    getOperationConfig(operation) {
-      const configs = {
-        ONLINE: {
-          icon: '🎬',
-          title: this.$t('track.onlineNotice'),
-          type: 'success',
-          duration: 4000,
-          needAlert: false
-        },
-        UNLOAD: {
-          icon: '📤',
-          title: this.$t('track.unloadNotice'),
+      // 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: this.$t('track.producingNotice'),
-          type: 'success',
-          duration: 3000,
-          needAlert: false
-        },
-        PRODUCT: {
-          icon: '✅',
-          title: this.$t('track.productNotice'),
-          type: 'success',
-          duration: 4000,
-          needAlert: false
-        },
-        PAY_OVER: {
-          icon: '⚠️',
-          title: this.$t('track.payOverNotice'),
-          type: 'warning',
-          duration: 5000,
-          needAlert: true
-        },
-        THROW_TAIL: {
-          icon: '⚠️',
-          title: this.$t('track.throwTailNotice'),
-          type: 'warning',
-          duration: 5000,
-          needAlert: true
-        },
-        ALL_RETURN: {
-          icon: '↩️',
-          title: this.$t('track.allReturnNotice'),
-          type: 'warning',
-          duration: 4000,
-          needAlert: false
-        },
-        HALF_RETURN: {
-          icon: '↩️',
-          title: this.$t('track.halfReturnNotice'),
-          type: 'warning',
-          duration: 4000,
-          needAlert: false
-        },
-        BLOCK: {
-          icon: '🚫',
-          title: this.$t('track.blockNotice'),
-          type: 'warning',
-          duration: 3000,
-          needAlert: false
         }
-      }
-      return configs[operation] || {
-        icon: '📢',
-        title: this.$t('track.operationNotice'),
-        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个计划
-    },
-
-    // 获取计划状态文本
-    getPlanStatusText(status) {
-      const statusMap = {
-        NEW: '新建',
-        READY: '就绪',
-        ONLINE: '上线',
-        PRODUCING: '生产中',
-        PRODUCT: '生产完成',
-        PAY_OVER: '甩尾',
-        UNLOAD: '卸卷',
-        COMPLETED: '已完成',
-        CANCELLED: '已取消'
-      }
-      return statusMap[status] || status || '未知'
-    },
-
-    // 获取计划状态标签类型
-    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
-      })
-    },
-
-    // 获取设备状态文本
-    getDeviceStatus(deviceId) {
-      const deviceInfo = this.getDeviceInfo(deviceId)
-      
-      // 如果有物料映射的钢卷号，显示钢卷号
-      if (deviceInfo?.matId) {
-        return deviceInfo.matId
-      }
-      
-      // 根据实时数据判断工作状态
-      if (this.isDeviceWorking(deviceId)) {
-        return '工作中'
-      }
-      
-      return '空闲'
-    },
-
+      },
   
-    /**
-     * 获取回退信息
-     * @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('请选择当前位置和目标位置')
-        return
-      }
-
-      const params = {
-        currentPos: current,
-        targetPos: target,
-      }
-
-      this.$confirm(`确定将 ${current} 的钢卷调整到 ${target}？`, '确认调整', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        adjustPosition(params).then(() => {
-          this.$message.success('调整成功')
-          this.fetchData()
-        }).catch(err => {
-          console.error('调整失败：', err)
-          this.$message.error('调整失败，请重试')
-        })
-      }).catch(() => {
-        this.$message.info('已取消调整')
-      })
-    },
-
-    // 打开操作对话框
-    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('操作成功')
-            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('操作失败：', err)
-            this.$message.error('操作失败，请重试')
+            console.error('Adjustment failed:', err) // 调整失败
+            this.$message.error('Adjustment failed, please retry') // 调整失败，请重试
           })
-        } else {
-          this.$message.warning('请完善表单信息')
+        }).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