diff --git a/klp-ui/src/api/hrm/index.js b/klp-ui/src/api/hrm/index.js
new file mode 100644
index 00000000..3b8a7089
--- /dev/null
+++ b/klp-ui/src/api/hrm/index.js
@@ -0,0 +1,341 @@
+import request from '@/utils/request'
+
+// 组织
+export function listOrg(query) {
+  return request({
+    url: '/hrm/org/list',
+    method: 'get',
+    params: query
+  })
+}
+export function allOrg(query) {
+  return request({
+    url: '/hrm/org/all',
+    method: 'get',
+    params: query
+  })
+}
+export function addOrg(data) {
+  return request({
+    url: '/hrm/org',
+    method: 'post',
+    data
+  })
+}
+export function updateOrg(data) {
+  return request({
+    url: '/hrm/org',
+    method: 'put',
+    data
+  })
+}
+export function delOrg(orgIds) {
+  return request({
+    url: `/hrm/org/${orgIds}`,
+    method: 'delete'
+  })
+}
+export function getOrg(orgId) {
+  return request({
+    url: `/hrm/org/${orgId}`,
+    method: 'get'
+  })
+}
+
+// 员工
+export function listEmployee(query) {
+  return request({
+    url: '/hrm/employee/list',
+    method: 'get',
+    params: query
+  })
+}
+export function allEmployee(query) {
+  return request({
+    url: '/hrm/employee/all',
+    method: 'get',
+    params: query
+  })
+}
+export function addEmployee(data) {
+  return request({
+    url: '/hrm/employee',
+    method: 'post',
+    data
+  })
+}
+export function updateEmployee(data) {
+  return request({
+    url: '/hrm/employee',
+    method: 'put',
+    data
+  })
+}
+export function delEmployee(empIds) {
+  return request({
+    url: `/hrm/employee/${empIds}`,
+    method: 'delete'
+  })
+}
+export function getEmployee(empId) {
+  return request({
+    url: `/hrm/employee/${empId}`,
+    method: 'get'
+  })
+}
+
+// 证书与合同
+export function listCertificate(query) {
+  return request({
+    url: '/hrm/certificate/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listContract(query) {
+  return request({
+    url: '/hrm/contract/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 员工组织岗位关系
+export function listEmpOrgPosition(query) {
+  return request({
+    url: '/hrm/empOrg/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 职级/岗位
+export function listGrade(query) {
+  return request({
+    url: '/hrm/grade/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPosition(query) {
+  return request({
+    url: '/hrm/position/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 班次/排班/打卡/考勤
+export function listShift(query) {
+  return request({
+    url: '/hrm/shift/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listSchedule(query) {
+  return request({
+    url: '/hrm/schedule/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPunch(query) {
+  return request({
+    url: '/hrm/punch/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listAttendCalc(query) {
+  return request({
+    url: '/hrm/attend/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listLeaveBalance(query) {
+  return request({
+    url: '/hrm/leave/balance/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 申请单
+export function listLeaveReq(query) {
+  return request({
+    url: '/hrm/leave/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listOvertimeReq(query) {
+  return request({
+    url: '/hrm/overtime/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listTravelReq(query) {
+  return request({
+    url: '/hrm/travel/req/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listSealReq(query) {
+  return request({
+    url: '/hrm/seal/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}`,
+    method: 'get'
+  })
+}
+export function addSealReq(data) {
+  return request({
+    url: '/hrm/seal',
+    method: 'post',
+    data
+  })
+}
+export function updateSealReq(data) {
+  return request({
+    url: '/hrm/seal',
+    method: 'put',
+    data
+  })
+}
+export function delSealReq(bizIds) {
+  return request({
+    url: `/hrm/seal/${bizIds}`,
+    method: 'delete'
+  })
+}
+export function approveSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/approve`,
+    method: 'post'
+  })
+}
+export function rejectSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/reject`,
+    method: 'post'
+  })
+}
+export function cancelSealReq(bizId) {
+  return request({
+    url: `/hrm/seal/${bizId}/cancel`,
+    method: 'post'
+  })
+}
+export function stampSealJava(bizId, data) {
+  return request({
+    url: `/hrm/seal/${bizId}/stamp/java`,
+    method: 'post',
+    data
+  })
+}
+export function stampSealPython(bizId, data) {
+  return request({
+    url: `/hrm/seal/${bizId}/stamp/python`,
+    method: 'post',
+    data
+  })
+}
+
+// 流程任务
+export function listFlowTask(query) {
+  return request({
+    url: '/hrm/flow/task/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listTodoFlowTask(assigneeUserId) {
+  return request({
+    url: '/hrm/flow/task/todo',
+    method: 'get',
+    params: { assigneeUserId }
+  })
+}
+export function approveFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/approve`,
+    method: 'post',
+    data
+  })
+}
+export function rejectFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/reject`,
+    method: 'post',
+    data
+  })
+}
+export function withdrawFlowTask(taskId, data) {
+  return request({
+    url: `/hrm/flow/task/${taskId}/withdraw`,
+    method: 'post',
+    data
+  })
+}
+
+export function listFlowAction(query) {
+  return request({
+    url: '/hrm/flow/action/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listFlowForm(query) {
+  return request({
+    url: '/hrm/flow/form/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getFlowForm(formId) {
+  return request({
+    url: `/hrm/flow/form/${formId}`,
+    method: 'get'
+  })
+}
+
+// 薪酬
+export function listPayPlan(query) {
+  return request({
+    url: '/hrm/pay/plan/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPayRun(query) {
+  return request({
+    url: '/hrm/pay/run/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listPayslip(query) {
+  return request({
+    url: '/hrm/payslip/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 指标快照
+export function listStatSnapshot(query) {
+  return request({
+    url: '/hrm/stat/snapshot/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/klp-ui/src/api/l2/pdo.js b/klp-ui/src/api/l2/pdo.js
index f621540d..823b4a09 100644
--- a/klp-ui/src/api/l2/pdo.js
+++ b/klp-ui/src/api/l2/pdo.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/plan.js b/klp-ui/src/api/l2/plan.js
index e1fef910..0db59892 100644
--- a/klp-ui/src/api/l2/plan.js
+++ b/klp-ui/src/api/l2/plan.js
@@ -44,7 +44,7 @@ function formatDateFields(data) {
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/report.js b/klp-ui/src/api/l2/report.js
index c425a27a..cdbea23d 100644
--- a/klp-ui/src/api/l2/report.js
+++ b/klp-ui/src/api/l2/report.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/roller.js b/klp-ui/src/api/l2/roller.js
index c672f2b8..f356b56d 100644
--- a/klp-ui/src/api/l2/roller.js
+++ b/klp-ui/src/api/l2/roller.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/steelGrade.js b/klp-ui/src/api/l2/steelGrade.js
index 08169fcf..68de1c8c 100644
--- a/klp-ui/src/api/l2/steelGrade.js
+++ b/klp-ui/src/api/l2/steelGrade.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/stop.js b/klp-ui/src/api/l2/stop.js
index 43e430cc..fac87984 100644
--- a/klp-ui/src/api/l2/stop.js
+++ b/klp-ui/src/api/l2/stop.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/api/l2/track.js b/klp-ui/src/api/l2/track.js
index 856e87dc..d1bd59d3 100644
--- a/klp-ui/src/api/l2/track.js
+++ b/klp-ui/src/api/l2/track.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 export default function createFetch(url) {
   const l2Request = axios.create({
-    baseURL: url,
+    baseURL: 'http://' + url,
     headers: {
       'Content-Type': 'application/json'
     },
diff --git a/klp-ui/src/utils/websocketManager.js b/klp-ui/src/utils/websocketManager.js
new file mode 100644
index 00000000..5352f380
--- /dev/null
+++ b/klp-ui/src/utils/websocketManager.js
@@ -0,0 +1,137 @@
+/**
+ * WebSocket 管理器
+ * 用于管理多个 WebSocket 连接
+ */
+
+class WebSocketManager {
+  constructor(url) {
+    this.connections = new Map()
+    this.baseUrl = url
+  }
+
+  /**
+   * 创建 WebSocket 连接
+   * @param {String} type - WebSocket 类型 (track_measure, track_position, track_signal, track_matmap, calc_setup_result)
+   * @param {Function} onMessage - 接收消息的回调函数
+   * @param {Function} onOpen - 连接打开的回调函数
+   * @param {Function} onError - 错误回调函数
+   * @param {Function} onClose - 关闭回调函数
+   */
+  connect(type, { onMessage, onOpen, onError, onClose } = {}) {
+    // 如果已存在连接，先断开
+    if (this.connections.has(type)) {
+      this.disconnect(type)
+    }
+
+    const url = `${this.baseUrl}?type=${type}`
+    console.log(`[WebSocket] 正在连接: ${type}`)
+
+    try {
+      const socket = new WebSocket(url)
+      
+      socket.onopen = (event) => {
+        console.log(`[WebSocket] 连接成功: ${type}`)
+        if (onOpen) onOpen(event)
+      }
+
+      socket.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data)
+          if (onMessage) onMessage(data)
+        } catch (error) {
+          console.error(`[WebSocket] 数据解析失败 (${type}):`, error)
+          // 如果不是 JSON，直接传递原始数据
+          if (onMessage) onMessage(event.data)
+        }
+      }
+
+      socket.onerror = (error) => {
+        console.error(`[WebSocket] 连接错误 (${type}):`, error)
+        if (onError) onError(error)
+      }
+
+      socket.onclose = (event) => {
+        console.log(`[WebSocket] 连接关闭 (${type}):`, event.code, event.reason)
+        this.connections.delete(type)
+        
+        if (onClose) {
+          onClose(event)
+        } else if (event.code !== 1000) {
+          // 非正常关闭，3秒后自动重连
+          console.log(`[WebSocket] 3秒后尝试重连: ${type}`)
+          setTimeout(() => {
+            this.connect(type, { onMessage, onOpen, onError, onClose })
+          }, 3000)
+        }
+      }
+
+      this.connections.set(type, socket)
+      return socket
+    } catch (error) {
+      console.error(`[WebSocket] 创建连接失败 (${type}):`, error)
+      // 失败后3秒重试
+      setTimeout(() => {
+        this.connect(type, { onMessage, onOpen, onError, onClose })
+      }, 3000)
+    }
+  }
+
+  /**
+   * 断开指定类型的连接
+   */
+  disconnect(type) {
+    const socket = this.connections.get(type)
+    if (socket) {
+      console.log(`[WebSocket] 主动断开: ${type}`)
+      socket.close(1000, '主动关闭')
+      this.connections.delete(type)
+    }
+  }
+
+  /**
+   * 断开所有连接
+   */
+  disconnectAll() {
+    console.log('[WebSocket] 断开所有连接')
+    this.connections.forEach((socket, type) => {
+      this.disconnect(type)
+    })
+  }
+
+  /**
+   * 获取指定类型的连接状态
+   */
+  isConnected(type) {
+    const socket = this.connections.get(type)
+    return socket && socket.readyState === WebSocket.OPEN
+  }
+
+  /**
+   * 获取所有连接状态
+   */
+  getAllStatus() {
+    const status = {}
+    this.connections.forEach((socket, type) => {
+      status[type] = socket.readyState === WebSocket.OPEN
+    })
+    return status
+  }
+
+  /**
+   * 发送消息（如果需要）
+   */
+  send(type, message) {
+    const socket = this.connections.get(type)
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      const data = typeof message === 'string' ? message : JSON.stringify(message)
+      socket.send(data)
+      return true
+    }
+    console.warn(`[WebSocket] 无法发送消息，连接未打开: ${type}`)
+    return false
+  }
+}
+
+// 导出单例
+export default WebSocketManager
+
diff --git a/klp-ui/src/views/hrm/attendance/index.vue b/klp-ui/src/views/hrm/attendance/index.vue
new file mode 100644
index 00000000..bdcd2eed
--- /dev/null
+++ b/klp-ui/src/views/hrm/attendance/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid triple">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>班次</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadShift">刷新</el-button>
+        </div>
+        <el-table :data="shiftList" v-loading="shiftLoading" height="320" stripe>
+          <el-table-column label="名称" prop="shiftName" min-width="140" />
+          <el-table-column label="时间段" min-width="180">
+            <template slot-scope="scope">{{ scope.row.startTime }} - {{ scope.row.endTime }}</template>
+          </el-table-column>
+          <el-table-column label="夜班" prop="nightShift" min-width="80">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="scope.row.nightShift ? 'warning' : 'info'">
+                {{ scope.row.nightShift ? '是' : '否' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="休息" prop="restMinutes" min-width="100" />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>排班</span>
+          <div class="actions-inline">
+            <el-date-picker
+              v-model="scheduleQuery.date"
+              type="date"
+              placeholder="日期"
+              size="mini"
+              value-format="yyyy-MM-dd"
+              @change="loadSchedule"
+            />
+            <el-button size="mini" type="primary" @click="loadSchedule">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="scheduleList" v-loading="scheduleLoading" height="320" stripe>
+          <el-table-column label="员工" prop="empId" min-width="100" />
+          <el-table-column label="日期" prop="workDate" min-width="120" />
+          <el-table-column label="班次" prop="shiftId" min-width="120" />
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>打卡与考勤结果</span>
+          <div class="actions-inline">
+            <el-date-picker
+              v-model="punchQuery.range"
+              type="daterange"
+              start-placeholder="开始"
+              end-placeholder="结束"
+              size="mini"
+              value-format="yyyy-MM-dd"
+              @change="loadPunchAndAttend"
+            />
+          </div>
+        </div>
+        <div class="dual-tables">
+          <div class="table-half">
+            <div class="table-title">打卡记录</div>
+            <el-table :data="punchList" v-loading="punchLoading" height="230" stripe>
+              <el-table-column label="时间" prop="punchTime" min-width="150">
+                <template slot-scope="scope">{{ formatDate(scope.row.punchTime) }}</template>
+              </el-table-column>
+              <el-table-column label="来源" prop="source" min-width="100" />
+              <el-table-column label="定位/设备" prop="location" min-width="140" show-overflow-tooltip />
+            </el-table>
+          </div>
+          <div class="table-half">
+            <div class="table-title">考勤结果</div>
+            <el-table :data="attendList" v-loading="attendLoading" height="230" stripe>
+              <el-table-column label="日期" prop="workDate" min-width="120" />
+              <el-table-column label="出勤分钟" prop="attendMinutes" min-width="110" />
+              <el-table-column label="加班分钟" prop="overtimeMinutes" min-width="110" />
+              <el-table-column label="请假分钟" prop="leaveMinutes" min-width="110" />
+              <el-table-column label="异常" prop="exceptionMsg" min-width="140" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span :class="['exception-tag', scope.row.exceptionMsg ? 'is-error' : '']">
+                    {{ scope.row.exceptionMsg || '正常' }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listShift, listSchedule, listPunch, listAttendCalc } from '@/api/hrm'
+
+export default {
+  name: 'HrmAttendance',
+  data() {
+    return {
+      shiftList: [],
+      shiftLoading: false,
+      scheduleList: [],
+      scheduleLoading: false,
+      scheduleQuery: { date: '' },
+      punchList: [],
+      punchLoading: false,
+      punchQuery: { range: [] },
+      attendList: [],
+      attendLoading: false
+    }
+  },
+  created() {
+    this.loadShift()
+    this.loadSchedule()
+    this.loadPunchAndAttend()
+  },
+  methods: {
+    formatDate(val) {
+      if (!val) return ''
+      const date = new Date(val)
+      const pad = n => (n < 10 ? `0${n}` : n)
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+    },
+    loadShift() {
+      this.shiftLoading = true
+      listShift({ pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.shiftList = res.rows || []
+        })
+        .finally(() => {
+          this.shiftLoading = false
+        })
+    },
+    loadSchedule() {
+      this.scheduleLoading = true
+      listSchedule({ ...this.scheduleQuery, pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.scheduleList = res.rows || []
+        })
+        .finally(() => {
+          this.scheduleLoading = false
+        })
+    },
+    loadPunchAndAttend() {
+      this.punchLoading = true
+      this.attendLoading = true
+      const [startTime, endTime] = this.punchQuery.range || []
+      listPunch({ pageNum: 1, pageSize: 200, startTime, endTime })
+        .then(res => {
+          this.punchList = res.rows || []
+        })
+        .finally(() => {
+          this.punchLoading = false
+        })
+      listAttendCalc({ pageNum: 1, pageSize: 200 })
+        .then(res => {
+          this.attendList = res.rows || []
+        })
+        .finally(() => {
+          this.attendLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.dual-tables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.table-half {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+}
+.table-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.exception-tag {
+  color: #409eff;
+  &.is-error {
+    color: #e76f51;
+    font-weight: 600;
+  }
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+  .dual-tables {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/index.vue b/klp-ui/src/views/hrm/index.vue
new file mode 100644
index 00000000..66dbbb58
--- /dev/null
+++ b/klp-ui/src/views/hrm/index.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="hrm-page">
+    <section class="hero">
+      <div>
+        <h2>HRM 工作台</h2>
+        <p class="subtitle">汇总视图 · 快速进入各子模块</p>
+        <div class="entry-actions">
+          <router-link to="/hrm/org">
+            <el-button type="info" plain icon="el-icon-s-custom">组织与员工</el-button>
+          </router-link>
+          <router-link to="/hrm/attendance">
+            <el-button type="warning" plain icon="el-icon-s-flag">考勤与排班</el-button>
+          </router-link>
+          <router-link to="/hrm/requests">
+            <el-button type="primary" icon="el-icon-s-claim">申请与审批</el-button>
+          </router-link>
+          <router-link to="/hrm/payroll">
+            <el-button type="success" plain icon="el-icon-coin">薪酬与指标</el-button>
+          </router-link>
+        </div>
+      </div>
+      <div class="hero-stat">
+        <div class="stat-card" v-for="card in heroStats" :key="card.key">
+          <div class="label">{{ card.label }}</div>
+          <div class="value">{{ card.value }}</div>
+          <div class="desc">{{ card.desc }}</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel-grid">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>我的待办</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadTodo">刷新</el-button>
+        </div>
+        <el-table :data="todoList" height="320" v-loading="todoLoading" stripe>
+          <el-table-column label="任务" prop="taskId" min-width="120">
+            <template slot-scope="scope">
+              <span class="pill">{{ scope.row.taskId }}</span>
+              <span class="muted">实例: {{ scope.row.instId }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="节点" prop="nodeId" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="到期" prop="expireTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.expireTime) }}</template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>流程历史</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="flowQuery.instId"
+              placeholder="实例ID"
+              size="mini"
+              style="width: 160px"
+              clearable
+              @keyup.enter.native="loadFlowActions"
+            />
+            <el-button size="mini" type="primary" @click="loadFlowActions">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="flowActions" height="320" v-loading="flowLoading" stripe>
+          <el-table-column label="动作" prop="action" min-width="120">
+            <template slot-scope="scope">
+              <el-tag size="small" type="info">{{ scope.row.action }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="执行人" prop="actionUserId" min-width="120" />
+          <el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip />
+          <el-table-column label="时间" prop="createTime" min-width="160">
+            <template slot-scope="scope">{{ formatDate(scope.row.createTime) }}</template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </section>
+
+    <section class="panel-grid triple">
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>组织与员工概览</span>
+          <router-link to="/hrm/org"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>组织数量</span><strong>{{ summary.orgCount }}</strong></li>
+          <li><span>员工数量</span><strong>{{ summary.empCount }}</strong></li>
+          <li><span>在职员工</span><strong>{{ summary.activeEmp }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>考勤与排班概览</span>
+          <router-link to="/hrm/attendance"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>班次</span><strong>{{ summary.shiftCount }}</strong></li>
+          <li><span>排班记录</span><strong>{{ summary.scheduleCount }}</strong></li>
+          <li><span>异常考勤</span><strong class="error">{{ summary.attendException }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>申请与审批概览</span>
+          <router-link to="/hrm/requests"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>请假单</span><strong>{{ summary.leaveCount }}</strong></li>
+          <li><span>加班单</span><strong>{{ summary.otCount }}</strong></li>
+          <li><span>待审批</span><strong class="warning">{{ summary.pendingReq }}</strong></li>
+        </ul>
+      </el-card>
+
+      <el-card class="metal-panel mini" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬与指标概览</span>
+          <router-link to="/hrm/payroll"><el-button size="mini" type="text">进入</el-button></router-link>
+        </div>
+        <ul class="summary-list">
+          <li><span>薪酬方案</span><strong>{{ summary.planCount }}</strong></li>
+          <li><span>批次</span><strong>{{ summary.runCount }}</strong></li>
+          <li><span>工资条</span><strong>{{ summary.payslipCount }}</strong></li>
+        </ul>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import {
+  listOrg,
+  listEmployee,
+  listShift,
+  listSchedule,
+  listAttendCalc,
+  listLeaveReq,
+  listOvertimeReq,
+  listPayPlan,
+  listPayRun,
+  listPayslip,
+  listTodoFlowTask,
+  listFlowAction
+} from '@/api/hrm'
+
+export default {
+  name: 'HrmWorkbench',
+  data() {
+    return {
+      heroStats: [
+        { key: 'todo', label: '待办', value: '—', desc: '待处理任务' },
+        { key: 'employee', label: '员工', value: '—', desc: '在册人数' },
+        { key: 'attendance', label: '考勤', value: '—', desc: '本周异常' }
+      ],
+      summary: {
+        orgCount: 0,
+        empCount: 0,
+        activeEmp: 0,
+        shiftCount: 0,
+        scheduleCount: 0,
+        attendException: 0,
+        leaveCount: 0,
+        otCount: 0,
+        pendingReq: 0,
+        planCount: 0,
+        runCount: 0,
+        payslipCount: 0
+      },
+      todoList: [],
+      todoLoading: false,
+      flowActions: [],
+      flowLoading: false,
+      flowQuery: { instId: '' }
+    }
+  },
+  created() {
+    this.loadTodo()
+    this.loadFlowActions()
+    this.loadSummary()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = {
+        pending: 'warning',
+        draft: 'info',
+        approved: 'success',
+        rejected: 'danger',
+        active: 'success',
+        inactive: 'info'
+      }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const date = new Date(val)
+      const pad = n => (n < 10 ? `0${n}` : n)
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+    },
+    loadTodo() {
+      this.todoLoading = true
+      listTodoFlowTask()
+        .then(res => {
+          this.todoList = res.data || []
+          this.heroStats.find(i => i.key === 'todo').value = this.todoList.length
+        })
+        .finally(() => {
+          this.todoLoading = false
+        })
+    },
+    loadFlowActions() {
+      this.flowLoading = true
+      listFlowAction({ pageNum: 1, pageSize: 10, instId: this.flowQuery.instId })
+        .then(res => {
+          this.flowActions = res.rows || res.data || []
+        })
+        .finally(() => {
+          this.flowLoading = false
+        })
+    },
+    async loadSummary() {
+      const [orgRes, empRes, shiftRes, scheduleRes, attendRes, leaveRes, otRes, planRes, runRes, payslipRes] =
+        await Promise.all([
+          listOrg({ pageNum: 1, pageSize: 999 }),
+          listEmployee({ pageNum: 1, pageSize: 999 }),
+          listShift({ pageNum: 1, pageSize: 200 }),
+          listSchedule({ pageNum: 1, pageSize: 200 }),
+          listAttendCalc({ pageNum: 1, pageSize: 200 }),
+          listLeaveReq({ pageNum: 1, pageSize: 200 }),
+          listOvertimeReq({ pageNum: 1, pageSize: 200 }),
+          listPayPlan({ pageNum: 1, pageSize: 200 }),
+          listPayRun({ pageNum: 1, pageSize: 200 }),
+          listPayslip({ pageNum: 1, pageSize: 200 })
+        ])
+      const orgs = orgRes.rows || []
+      const emps = empRes.rows || []
+      const shifts = shiftRes.rows || []
+      const schedules = scheduleRes.rows || []
+      const attends = attendRes.rows || []
+      const leaves = leaveRes.rows || []
+      const ots = otRes.rows || []
+      const plans = planRes.rows || []
+      const runs = runRes.rows || []
+      const payslips = payslipRes.rows || []
+
+      this.summary.orgCount = orgs.length
+      this.summary.empCount = emps.length
+      this.summary.activeEmp = emps.filter(e => e.status === 'active').length
+      this.summary.shiftCount = shifts.length
+      this.summary.scheduleCount = schedules.length
+      this.summary.attendException = attends.filter(a => a.exceptionMsg).length
+      this.summary.leaveCount = leaves.length
+      this.summary.otCount = ots.length
+      this.summary.pendingReq = [...leaves, ...ots].filter(i => i.status === 'pending').length
+      this.summary.planCount = plans.length
+      this.summary.runCount = runs.length
+      this.summary.payslipCount = payslips.length
+      this.heroStats.find(i => i.key === 'employee').value = this.summary.empCount
+      this.heroStats.find(i => i.key === 'attendance').value = this.summary.attendException
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: linear-gradient(90deg, #fafafa 0%, #ffffff 100%);
+  border: 1px solid #e6e8ed;
+  border-radius: 12px;
+  padding: 18px 22px;
+  margin-bottom: 18px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
+  h2 {
+    margin: 0;
+    font-weight: 700;
+    color: #303133;
+  }
+  .subtitle {
+    margin: 8px 0 12px;
+    color: #606266;
+  }
+}
+.entry-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.hero-stat {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  min-width: 340px;
+}
+.stat-card {
+  background: #fff;
+  border: 1px solid #e6e8ed;
+  border-radius: 8px;
+  padding: 12px;
+  min-width: 90px;
+  .label {
+    color: #909399;
+    font-size: 12px;
+  }
+  .value {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1f2d3d;
+    margin: 4px 0;
+  }
+  .desc {
+    color: #a0a3ad;
+    font-size: 12px;
+  }
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  &.triple {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.metal-panel.mini {
+  min-height: 180px;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.pill {
+  display: inline-block;
+  padding: 2px 8px;
+  background: #f4f5f7;
+  border-radius: 12px;
+  margin-right: 6px;
+}
+.muted {
+  color: #a0a3ad;
+  font-size: 12px;
+}
+.summary-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 4px;
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    color: #606266;
+    strong {
+      color: #303133;
+    }
+    .error {
+      color: #e76f51;
+    }
+    .warning {
+      color: #e6a23c;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .panel-grid,
+  .panel-grid.triple {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/org/index.vue b/klp-ui/src/views/hrm/org/index.vue
new file mode 100644
index 00000000..76b720c5
--- /dev/null
+++ b/klp-ui/src/views/hrm/org/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>组织树</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadOrg">刷新</el-button>
+        </div>
+        <el-tree
+          v-loading="orgLoading"
+          :data="orgTree"
+          node-key="orgId"
+          :props="{ label: 'orgName', children: 'children' }"
+          accordion
+          highlight-current
+          @node-click="handleOrgClick"
+        >
+          <span slot-scope="{ data }" class="custom-tree-node">
+            <span>{{ data.orgName }}</span>
+            <el-tag size="mini" effect="plain" type="info" class="tree-tag">{{ data.orgType || '组织' }}</el-tag>
+          </span>
+        </el-tree>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>员工档案</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="empQuery.empName"
+              placeholder="姓名/工号"
+              size="mini"
+              clearable
+              @keyup.enter.native="loadEmployee"
+              style="width: 180px"
+            />
+            <el-select
+              v-model="empQuery.status"
+              size="mini"
+              placeholder="状态"
+              clearable
+              style="width: 140px"
+              @change="loadEmployee"
+            >
+              <el-option label="在职" value="active" />
+              <el-option label="离职" value="inactive" />
+            </el-select>
+            <el-button size="mini" type="primary" icon="el-icon-search" @click="loadEmployee">查询</el-button>
+          </div>
+        </div>
+        <el-table :data="employeeList" v-loading="empLoading" height="700" stripe>
+          <el-table-column label="工号" prop="empNo" min-width="110" />
+          <el-table-column label="姓名" prop="empName" min-width="120" />
+          <el-table-column label="性别" prop="gender" min-width="80" />
+          <el-table-column label="手机" prop="mobile" min-width="130" />
+          <el-table-column label="雇佣类型" prop="employmentType" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="入职日期" prop="hireDate" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.hireDate) }}</template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listOrg, listEmployee } from '@/api/hrm'
+
+export default {
+  name: 'HrmOrgEmployee',
+  data() {
+    return {
+      orgTree: [],
+      orgLoading: false,
+      orgSelected: null,
+      employeeList: [],
+      empLoading: false,
+      empQuery: { empName: '', status: undefined, mainOrgId: undefined }
+    }
+  },
+  created() {
+    this.loadOrg()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger', active: 'success', inactive: 'info' }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const d = new Date(val)
+      const p = n => (n < 10 ? `0${n}` : n)
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+    },
+    loadOrg() {
+      this.orgLoading = true
+      listOrg({ pageNum: 1, pageSize: 999 })
+        .then(res => {
+          const rows = res.rows || []
+          this.orgTree = this.buildTree(rows)
+          if (!this.orgSelected && this.orgTree.length) this.orgSelected = this.orgTree[0].orgId
+          this.empQuery.mainOrgId = this.orgSelected
+          this.loadEmployee()
+        })
+        .finally(() => {
+          this.orgLoading = false
+        })
+    },
+    buildTree(list) {
+      const map = {}
+      list.forEach(item => {
+        map[item.orgId] = { ...item, children: [] }
+      })
+      const roots = []
+      list.forEach(item => {
+        const parent = map[item.parentId]
+        if (parent) parent.children.push(map[item.orgId])
+        else roots.push(map[item.orgId])
+      })
+      return roots
+    },
+    handleOrgClick(node) {
+      this.orgSelected = node.orgId
+      this.empQuery.mainOrgId = node.orgId
+      this.loadEmployee()
+    },
+    loadEmployee() {
+      if (!this.empQuery.mainOrgId) return
+      this.empLoading = true
+      listEmployee({ ...this.empQuery, pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.employeeList = res.rows || []
+        })
+        .finally(() => {
+          this.empLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 12px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.tree-tag {
+  margin-left: 8px;
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/payroll/index.vue b/klp-ui/src/views/hrm/payroll/index.vue
new file mode 100644
index 00000000..5342d943
--- /dev/null
+++ b/klp-ui/src/views/hrm/payroll/index.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid triple">
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬方案</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadPayPlan">刷新</el-button>
+        </div>
+        <el-table :data="payPlanList" v-loading="payPlanLoading" height="320" stripe>
+          <el-table-column label="方案" prop="planName" min-width="140" />
+          <el-table-column label="币种" prop="currency" min-width="90" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="描述" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>薪酬批次</span>
+          <el-button size="mini" icon="el-icon-refresh" @click="loadPayRun">刷新</el-button>
+        </div>
+        <el-table :data="payRunList" v-loading="payRunLoading" height="320" stripe>
+          <el-table-column label="批次" prop="runName" min-width="140" />
+          <el-table-column label="周期" prop="period" min-width="120" />
+          <el-table-column label="状态" prop="status" min-width="100">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+        </el-table>
+      </el-card>
+
+      <el-card class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>工资条 & 指标</span>
+          <div class="actions-inline">
+            <el-input
+              v-model="payslipQuery.batchNo"
+              placeholder="批次编号"
+              size="mini"
+              style="width: 150px"
+              clearable
+              @keyup.enter.native="loadPayslip"
+            />
+            <el-button size="mini" type="primary" @click="loadPayslip">查询</el-button>
+          </div>
+        </div>
+        <div class="dual-tables">
+          <div class="table-half">
+            <div class="table-title">工资条</div>
+            <el-table :data="payslipList" v-loading="payslipLoading" height="230" stripe>
+              <el-table-column label="员工" prop="empId" min-width="100" />
+              <el-table-column label="应发" prop="amountGross" min-width="100">
+                <template slot-scope="scope">￥{{ formatNumber(scope.row.amountGross) }}</template>
+              </el-table-column>
+              <el-table-column label="实发" prop="amountNet" min-width="100">
+                <template slot-scope="scope">￥{{ formatNumber(scope.row.amountNet) }}</template>
+              </el-table-column>
+              <el-table-column label="状态" prop="status" min-width="90">
+                <template slot-scope="scope">
+                  <el-tag :type="statusType(scope.row.status)" size="mini">{{ scope.row.status || '-' }}</el-tag>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="table-half">
+            <div class="table-title">指标快照</div>
+            <el-table :data="statList" v-loading="statLoading" height="230" stripe>
+              <el-table-column label="类型" prop="statType" min-width="120" />
+              <el-table-column label="维度" prop="dimension" min-width="120" show-overflow-tooltip />
+              <el-table-column label="数值" prop="value" min-width="100" />
+              <el-table-column label="日期" prop="statDate" min-width="120" />
+            </el-table>
+          </div>
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script>
+import { listPayPlan, listPayRun, listPayslip, listStatSnapshot } from '@/api/hrm'
+
+export default {
+  name: 'HrmPayroll',
+  data() {
+    return {
+      payPlanList: [],
+      payPlanLoading: false,
+      payRunList: [],
+      payRunLoading: false,
+      payslipList: [],
+      payslipLoading: false,
+      payslipQuery: { batchNo: '' },
+      statList: [],
+      statLoading: false
+    }
+  },
+  created() {
+    this.loadPayPlan()
+    this.loadPayRun()
+    this.loadPayslip()
+    this.loadStatSnapshot()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger', active: 'success', inactive: 'info' }
+      return map[status] || 'info'
+    },
+    formatNumber(num) {
+      if (num === null || num === undefined || isNaN(num)) return '0'
+      return Number(num).toLocaleString(undefined, { maximumFractionDigits: 2 })
+    },
+    loadPayPlan() {
+      this.payPlanLoading = true
+      listPayPlan({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.payPlanList = res.rows || []
+        })
+        .finally(() => {
+          this.payPlanLoading = false
+        })
+    },
+    loadPayRun() {
+      this.payRunLoading = true
+      listPayRun({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.payRunList = res.rows || []
+        })
+        .finally(() => {
+          this.payRunLoading = false
+        })
+    },
+    loadPayslip() {
+      this.payslipLoading = true
+      listPayslip({ pageNum: 1, pageSize: 50, batchNo: this.payslipQuery.batchNo })
+        .then(res => {
+          this.payslipList = res.rows || []
+        })
+        .finally(() => {
+          this.payslipLoading = false
+        })
+    },
+    loadStatSnapshot() {
+      this.statLoading = true
+      listStatSnapshot({ pageNum: 1, pageSize: 50 })
+        .then(res => {
+          this.statList = res.rows || []
+        })
+        .finally(() => {
+          this.statLoading = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.dual-tables {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.table-half {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+}
+.table-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+  .dual-tables {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/requests/index.vue b/klp-ui/src/views/hrm/requests/index.vue
new file mode 100644
index 00000000..c47a9c79
--- /dev/null
+++ b/klp-ui/src/views/hrm/requests/index.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="hrm-page">
+    <section class="panel-grid quad">
+      <el-card v-for="item in requestBlocks" :key="item.key" class="metal-panel" shadow="hover">
+        <div slot="header" class="panel-header">
+          <span>{{ item.title }}</span>
+          <div class="actions-inline">
+            <el-select
+              v-if="item.statusField"
+              v-model="item.query.status"
+              size="mini"
+              placeholder="状态"
+              clearable
+              style="width: 120px"
+              @change="item.loader"
+            >
+              <el-option label="草稿" value="draft" />
+              <el-option label="审批中" value="pending" />
+              <el-option label="通过" value="approved" />
+              <el-option label="驳回" value="rejected" />
+            </el-select>
+            <el-button size="mini" icon="el-icon-refresh" @click="item.loader">刷新</el-button>
+          </div>
+        </div>
+        <el-table :data="item.list" v-loading="item.loading" height="300" stripe>
+          <el-table-column label="员工" prop="empId" min-width="100" />
+          <el-table-column label="类型/目的" :prop="item.typeField" min-width="120" />
+          <el-table-column label="开始" prop="startTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.startTime) }}</template>
+          </el-table-column>
+          <el-table-column label="结束" prop="endTime" min-width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.endTime) }}</template>
+          </el-table-column>
+          <el-table-column label="状态" prop="status" min-width="110">
+            <template slot-scope="scope">
+              <el-tag :type="statusType(scope.row.status)">{{ scope.row.status || '-' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="附件" prop="accessoryApplyIds" min-width="150" show-overflow-tooltip />
+          <el-table-column
+            v-if="item.key === 'seal'"
+            label="操作"
+            min-width="220"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="approveSeal(scope.row)">通过</el-button>
+              <el-button size="mini" type="text" @click="rejectSeal(scope.row)">驳回</el-button>
+              <el-button size="mini" type="text" @click="cancelSeal(scope.row)">撤销</el-button>
+              <el-button size="mini" type="text" @click="openStamp(scope.row)">盖章</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </section>
+
+    <el-dialog
+      title="盖章"
+      :visible.sync="stampDialogVisible"
+      width="720px"
+      append-to-body
+    >
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form :model="stampForm" label-width="110px" size="small">
+            <el-form-item label="待盖章文件" prop="targetFileUrl">
+              <el-input v-model="stampForm.targetFileUrl" placeholder="PDF或图片 OSS 完整 URL" />
+            </el-form-item>
+            <el-form-item label="章图片" prop="stampImageUrl">
+              <el-select
+                v-model="stampForm.stampImageUrl"
+                filterable
+                clearable
+                placeholder="选择章图（字典配置）"
+                @change="preloadStampImage"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="opt in dict.type.hrm_stamp_image || []"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="页码">
+              <el-input-number v-model="stampForm.pageNo" :min="1" />
+            </el-form-item>
+            <el-form-item label="坐标/尺寸">
+              <div class="readonly-row">
+                <span>X: {{ stampForm.xPx || '-' }} px</span>
+                <span>Y: {{ stampForm.yPx || '-' }} px</span>
+              </div>
+              <div class="readonly-row">
+                <span>宽: {{ stampForm.widthPx || stampImageNatural.width || '-' }} px</span>
+                <span>高: {{ stampForm.heightPx || stampImageNatural.height || '-' }} px</span>
+              </div>
+              <div class="hint-text">点击右侧预览即可定位，尺寸默认取章图原始大小</div>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <div class="preview-card">
+            <div class="preview-title">图形化定位（点击预览设置坐标）</div>
+            <div
+              class="preview-area"
+              ref="previewArea"
+              v-if="stampForm.targetFileUrl"
+            >
+              <img
+                :src="stampForm.targetFileUrl"
+                class="preview-img"
+                @load="handlePreviewLoad"
+                @click="handlePreviewClick"
+                alt="preview"
+              >
+              <div
+                v-if="marker.visible"
+                class="stamp-marker"
+                :style="markerStyle"
+              ></div>
+            </div>
+            <div v-else class="preview-placeholder">请先填写待盖章文件URL（建议提供图片预览）</div>
+          </div>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="stampDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="stampSubmitting" @click="submitStamp">盖章</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listLeaveReq,
+  listOvertimeReq,
+  listTravelReq,
+  listSealReq,
+  approveSealReq,
+  rejectSealReq,
+  cancelSealReq,
+  stampSealJava,
+  stampSealPython
+} from '@/api/hrm'
+
+export default {
+  name: 'HrmRequests',
+  data() {
+    return {
+      requestBlocks: [],
+      stampDialogVisible: false,
+      stampSubmitting: false,
+      stampForm: {
+        targetFileUrl: '',
+        stampImageUrl: '',
+        pageNo: 1,
+        xPx: 0,
+        yPx: 0,
+        widthPx: undefined,
+        heightPx: undefined
+      },
+      currentSeal: null,
+      previewNatural: { width: 0, height: 0 },
+      marker: { visible: false, x: 0, y: 0, width: 0, height: 0 },
+      stampImageNatural: { width: 0, height: 0 }
+    }
+  },
+  created() {
+    this.initRequests()
+  },
+  methods: {
+    statusType(status) {
+      if (!status) return 'info'
+      const map = { pending: 'warning', draft: 'info', approved: 'success', rejected: 'danger' }
+      return map[status] || 'info'
+    },
+    formatDate(val) {
+      if (!val) return ''
+      const d = new Date(val)
+      const p = n => (n < 10 ? `0${n}` : n)
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+    },
+    initRequests() {
+      this.requestBlocks = [
+        { key: 'leave', title: '请假单', typeField: 'leaveType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadLeaveReq },
+        { key: 'overtime', title: '加班单', typeField: 'overtimeType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadOvertimeReq },
+        { key: 'travel', title: '出差单', typeField: 'travelType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadTravelReq },
+        { key: 'seal', title: '用印申请', typeField: 'sealType', statusField: 'status', query: { pageNum: 1, pageSize: 10, status: undefined }, list: [], loading: false, loader: this.loadSealReq }
+      ]
+      this.requestBlocks.forEach(b => b.loader())
+    },
+    loadLeaveReq() {
+      const block = this.requestBlocks.find(i => i.key === 'leave')
+      block.loading = true
+      listLeaveReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadOvertimeReq() {
+      const block = this.requestBlocks.find(i => i.key === 'overtime')
+      block.loading = true
+      listOvertimeReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadTravelReq() {
+      const block = this.requestBlocks.find(i => i.key === 'travel')
+      block.loading = true
+      listTravelReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    loadSealReq() {
+      const block = this.requestBlocks.find(i => i.key === 'seal')
+      block.loading = true
+      listSealReq(block.query)
+        .then(res => {
+          block.list = res.rows || []
+        })
+        .finally(() => {
+          block.loading = false
+        })
+    },
+    approveSeal(row) {
+      approveSealReq(row.bizId).then(() => {
+        this.$message.success('已通过')
+        this.loadSealReq()
+      })
+    },
+    rejectSeal(row) {
+      rejectSealReq(row.bizId).then(() => {
+        this.$message.success('已驳回')
+        this.loadSealReq()
+      })
+    },
+    cancelSeal(row) {
+      cancelSealReq(row.bizId).then(() => {
+        this.$message.success('已撤销')
+        this.loadSealReq()
+      })
+    },
+    openStamp(row) {
+      this.currentSeal = row
+      this.stampDialogVisible = true
+      this.marker.visible = false
+    },
+    submitStamp() {
+      if (!this.currentSeal) return
+      this.stampSubmitting = true
+      stampSealJava(this.currentSeal.bizId, this.stampForm)
+        .then(() => {
+          this.$message.success('盖章指令已提交')
+          this.stampDialogVisible = false
+          this.loadSealReq()
+        })
+        .finally(() => {
+          this.stampSubmitting = false
+        })
+    },
+    handlePreviewLoad(e) {
+      const img = e.target
+      this.previewNatural = { width: img.naturalWidth, height: img.naturalHeight }
+      this.updateMarkerStyle()
+    },
+    handlePreviewClick(event) {
+      if (!this.previewNatural.width || !this.previewNatural.height) return
+      const rect = this.$refs.previewArea.getBoundingClientRect()
+      const displayWidth = rect.width
+      const displayHeight = rect.height
+      const clickX = event.clientX - rect.left
+      const clickY = event.clientY - rect.top
+      const xRatio = clickX / displayWidth
+      const yRatio = clickY / displayHeight
+      const xPx = Math.round(xRatio * this.previewNatural.width)
+      // 注意 PDF 坐标原点左下，这里预览原点左上，需要转换
+      const yPx = Math.round((1 - yRatio) * this.previewNatural.height)
+      this.stampForm.xPx = xPx
+      this.stampForm.yPx = yPx
+      // 默认尺寸取章图天然尺寸
+      if (this.stampImageNatural.width) {
+        this.stampForm.widthPx = this.stampForm.widthPx || this.stampImageNatural.width
+        this.stampForm.heightPx = this.stampForm.heightPx || this.stampImageNatural.height
+      }
+      this.updateMarkerStyle()
+    },
+    preloadStampImage() {
+      if (!this.stampForm.stampImageUrl) return
+      const img = new Image()
+      img.onload = () => {
+        this.stampImageNatural = { width: img.width, height: img.height }
+      }
+      img.src = this.stampForm.stampImageUrl
+    },
+    updateMarkerStyle() {
+      if (!this.previewNatural.width || !this.previewNatural.height) return
+      const rect = this.$refs.previewArea?.getBoundingClientRect?.()
+      if (!rect) return
+      const displayWidth = rect.width
+      const displayHeight = rect.height
+      const xRatio = this.stampForm.xPx / this.previewNatural.width
+      const yRatio = 1 - this.stampForm.yPx / this.previewNatural.height
+      const wRatio = (this.stampForm.widthPx || this.stampImageNatural.width || 0) / this.previewNatural.width
+      const hRatio = (this.stampForm.heightPx || this.stampImageNatural.height || 0) / this.previewNatural.height
+      this.marker = {
+        visible: true,
+        x: xRatio * displayWidth,
+        y: yRatio * displayHeight,
+        width: wRatio * displayWidth,
+        height: hRatio * displayHeight
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hrm-page {
+  padding: 16px 20px 32px;
+  background: #f8f9fb;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+.metal-panel {
+  border: 1px solid #d7d9df;
+  border-radius: 10px;
+  background: #fff;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  color: #303133;
+}
+.actions-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.coord-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.preview-card {
+  border: 1px dashed #e6e8ed;
+  border-radius: 8px;
+  padding: 8px;
+  min-height: 340px;
+}
+.preview-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.preview-area {
+  position: relative;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+  background: #f5f7fa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+.preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: crosshair;
+}
+.preview-placeholder {
+  color: #a0a3ad;
+  font-size: 13px;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px dashed #ebeef5;
+  border-radius: 6px;
+}
+.stamp-marker {
+  position: absolute;
+  border: 2px dashed #409eff;
+  background: rgba(64, 158, 255, 0.08);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+@media (max-width: 1200px) {
+  .panel-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/hrm/workbench/index.vue b/klp-ui/src/views/hrm/workbench/index.vue
new file mode 100644
index 00000000..3c778f02
--- /dev/null
+++ b/klp-ui/src/views/hrm/workbench/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <HrmWorkbench />
+</template>
+
+<script>
+import HrmWorkbench from '../index.vue'
+export default {
+  name: 'HrmWorkbenchPage',
+  components: { HrmWorkbench }
+}
+</script>
diff --git a/klp-ui/src/views/lines/index.vue b/klp-ui/src/views/lines/index.vue
index fcd16480..42a521dc 100644
--- a/klp-ui/src/views/lines/index.vue
+++ b/klp-ui/src/views/lines/index.vue
@@ -1,14 +1,13 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" type="card">
+    <!-- <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="计划执行" name="Plan" v-if="tabs.includes('Plan')"></el-tab-pane>
       <el-tab-pane label="过程跟踪" name="Track" v-if="tabs.includes('Track')"></el-tab-pane>
       <el-tab-pane label="产出实绩" name="Quality" v-if="tabs.includes('Quality')"></el-tab-pane>
       <el-tab-pane label="停机明细" name="Stop" v-if="tabs.includes('Stop')"></el-tab-pane>
       <el-tab-pane label="实绩报表" name="PdoAnalysis" v-if="tabs.includes('PdoAnalysis')"></el-tab-pane>
       <el-tab-pane label="停机报表" name="StopAnalysis" v-if="tabs.includes('StopAnalysis')"></el-tab-pane>
-      <!-- <el-tab-pane label="换辊报表" name="RollerAnalysis"></el-tab-pane> -->
-    </el-tabs> 
+    </el-tabs>  -->
 
     <keep-alive> 
       <div v-if="ready" class="app-container">
diff --git a/klp-ui/src/views/lines/panels/track/index.vue b/klp-ui/src/views/lines/panels/track/index.vue
index 8cf4d5b5..3d374ea2 100644
--- a/klp-ui/src/views/lines/panels/track/index.vue
+++ b/klp-ui/src/views/lines/panels/track/index.vue
@@ -1,147 +1,406 @@
 <template>
-  <div class="graph-container-box">
-    <el-row>
+  <div class="track-container">
+    <el-row :gutter="20">
+      <!-- 左侧：设备列表 -->
       <el-col :span="16">
-        <knova-stage @rectClick="selectCard" :matMapList="matMapList" :rects="rects" :lines="lines"></knova-stage>
-      </el-col>
-      <el-col :span="8">
-        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
-          <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
-          <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
-            <el-form-item label="当前位置" prop="current">
-              <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
-                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="目标位置" prop="target">
-              <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
-                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target" @click="handleConfirmAdjust">确认调整</el-button>
+        <!-- 加载状态 -->
+        <div v-if="isLoading" class="loading-container">
+          <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
+          <span>加载中...</span>
         </div>
 
-        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
-          <el-row v-if="selectedCard">
-            <el-col :span="12">
-              <div class="detail-item">
-                <span class="detail-label">位置名称：</span>
-                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">位置代号：</span>
-                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">钢卷号：</span>
-                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划ID：</span>
-                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">计划号：</span>
-                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">开卷机编号：</span>
-                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="detail-label">卷取机编号：</span>
-                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
-              </div>
-            </el-col>
-            <el-col :span="12">
-              <!-- 加载状态 -->
-              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
+        <!-- WebSocket 连接状态指示 -->
+        <div v-if="!isLoading" class="ws-status-bar">
+          <el-tooltip content="测量数据" 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="位置追踪" 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="操作信号" 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="物料映射" 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="计算结果" 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 class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
-                {{ returnError }}
+        <div v-if="!isLoading" class="device-layout">
+          <!-- 入口段区域 -->
+          <div class="section-area entry-area">
+            <div class="section-header">
+              入口段
+              <span class="section-info" v-if="positionData.entrySpeed">速度: {{ 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 class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
-                <div class="detail-item">
-                  <span class="detail-label">回退钢卷号：</span>
-                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划ID：</span>
-                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退计划号：</span>
-                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退类型：</span>
-                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">回退重量：</span>
-                  <span class="detail-value">
-                    {{ returnInfo.returnWeight || '-' }}
-                    {{ returnInfo.returnWeight ? 'kg' : '' }}
+            </div>
+            <div class="device-grid">
+              <div v-for="device in entryDevicesList" :key="device.positionNameEn" class="device-card" :class="{
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
+                'has-data': hasMatId(device.positionNameEn)
+              }" @click="selectDevice(device.positionNameEn)">
+                <div class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
                   </span>
                 </div>
               </div>
+            </div>
+          </div>
 
-              <!-- 无回退信息 -->
-              <div class="empty-tip" v-else>无回退信息</div>
-            </el-col>
-          </el-row>
-          <el-row v-else>
-            <div class="empty-tip">请选择钢卷卡片查看详情</div>
-          </el-row>
-        </div>
-
-        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
-          <el-row v-if="selectedCard">
-            <div class="operation-panel">
-              <div class="panel-content">
-                <!-- 非调整模式：显示操作按钮 -->
-                <div class="operation-buttons">
-                  <div class="button-group">
-                    <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
-                      class="btn-block">
-                      钢卷上线
-                    </el-button>
-                    <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
-                      class="btn-block mt-2">
-                      手动卸卷
-                    </el-button>
-                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
-                      class="btn-block mt-2">
-                      整卷回退
-                    </el-button>
-                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
-                      class="btn-block mt-2">
-                      半卷回退
-                    </el-button>
-                    <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
-                      class="btn-block mt-2">
-                      卸卷并封闭
-                    </el-button>
-                    <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
-                甩尾
-              </el-button> -->
-                  </div>
+          <!-- 熔炉段区域 -->
+          <div class="section-area furnace-area">
+            <div class="section-header">
+              熔炉段
+              <span class="section-info" v-if="positionData.technologySpeed">速度: {{ positionData.technologySpeed.toFixed(1) }} m/min</span>
+            </div>
+            <div class="section-summary" v-if="furnaceSectionMetrics.length">
+              <div class="summary-item" v-for="item in furnaceSectionMetrics" :key="item.label">
+                <span class="summary-label">{{ item.label }}：</span>
+                <span class="summary-value">{{ item.value }}</span>
+              </div>
+            </div>
+            <div class="device-grid">
+              <div v-for="device in furnaceDevicesList" :key="device.positionNameEn" class="device-card" :class="{
+                active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
+                'has-data': hasMatId(device.positionNameEn)
+              }" @click="selectDevice(device.positionNameEn)">
+                <div class="device-name">{{ device.positionNameCn }}</div>
+                <div class="device-code">{{ device.positionNameEn }}</div>
+                <div class="device-status">
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
+                  </span>
                 </div>
               </div>
             </div>
-          </el-row>
+          </div>
 
-          <el-row v-else>
-            <div class="empty-tip">请选择钢卷卡片进行操作</div>
-          </el-row>
+          <!-- 涂层段区域 -->
+          <div class="section-area coat-area">
+            <div class="section-header">涂层段</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">
+              出口段
+              <span class="section-info" v-if="positionData.exitSpeed">速度: {{ 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">其他段</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> 生产计划
+            </div>
+            <div class="plan-list-vertical">
+              <el-empty v-if="planQueue.length === 0" description="暂无生产计划" :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">计划ID：{{ plan.planid || '-' }}</div>
+                    <div class="plan-coil">钢卷号：{{ plan.coilid || '-' }}</div>
+                  </div>
+                  <el-tag :type="getPlanStatusTagType(plan.status)" size="mini">{{ getPlanStatusText(plan.status) }}</el-tag>
+                </div>
+                <div class="plan-item-bottom">
+                  <span>钢种：{{ plan.steelGrade || '-' }}</span>
+                  <span>顺序：{{ plan.seqid || '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 生产计划详情 -->
+          <div class="panel" v-if="selectedPlan">
+            <div class="panel-title">
+              <i class="el-icon-document"></i> 生产计划详情
+              <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>
+                </div>
+                <div class="position-info">
+                  <div class="position-label">当前位置</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="计划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">时间信息</div>
+                <el-descriptions :column="1" border size="small">
+                  <el-descriptions-item label="上线时间" v-if="selectedPlan.onlineDate">
+                    {{ formatDateTime(selectedPlan.onlineDate) }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="开始时间" v-if="selectedPlan.startDate">
+                    {{ formatDateTime(selectedPlan.startDate) }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="结束时间" v-if="selectedPlan.endDate">
+                    {{ formatDateTime(selectedPlan.endDate) }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </div>
+            </div>
+          </div>
+
+          <!-- 最近操作信号 -->
+          <div class="panel" v-if="signalData">
+            <div class="panel-title">
+              <i class="el-icon-bell"></i> 最近操作
+              <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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="panel">
+            <div class="panel-title">操作</div>
+            <div class="btn-list">
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'ONLINE')">钢卷上线</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'UNLOAD')">手动卸卷</el-button>
+              <el-button class="action-btn" size="small"
+                @click="handleOperate(selectedCard, 'ALL_RETURN')">整卷回退</el-button>
+              <el-button class="action-btn" size="small"
+                @click="handleOperate(selectedCard, 'HALF_RETURN')">半卷回退</el-button>
+              <el-button class="action-btn" size="small" @click="handleOperate(selectedCard, 'BLOCK')">卸卷并封闭</el-button>
+            </div>
+          </div>
+          <!-- 设备基本信息 -->
+          <div class="panel" v-if="selectedCard">
+            <div class="panel-title">基本信息</div>
+            <table class="info-table">
+              <tr>
+                <td>位置名称</td>
+                <td>{{ selectedCard.positionNameCn || '-' }}</td>
+              </tr>
+              <tr>
+                <td>位置代号</td>
+                <td>{{ selectedCard.positionNameEn || '-' }}</td>
+              </tr>
+              <tr>
+                <td>钢卷号</td>
+                <td>{{ selectedCard.matId || '-' }}</td>
+              </tr>
+              <tr>
+                <td>计划ID</td>
+                <td>{{ selectedCard.planId || '-' }}</td>
+              </tr>
+              <tr>
+                <td>计划号</td>
+                <td>{{ selectedCard.planNo || '-' }}</td>
+              </tr>
+            </table>
+          </div>
+
+          <!-- 设备实时数据 -->
+
+          <div class="panel">
+
+            <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
+            <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
+              <el-form-item label="当前位置" prop="current">
+                <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
+                  <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
+                    :value="item.positionNameEn"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="目标位置" prop="target">
+                <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
+                  <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn"
+                    :value="item.positionNameEn"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target"
+              @click="handleConfirmAdjust">确认调整</el-button>
+          </div>
+        </div>
+
+      </el-col>
     </el-row>
 
+    <!-- 计算结果对话框 -->
+    <el-dialog
+      title="计算设定结果"
+      :visible.sync="showCalcResultDialog"
+      width="80%"
+      v-if="calcSetupResult"
+    >
+      <div class="calc-result-header">
+        <el-tag :type="calcSetupResult.flag ? 'success' : 'danger'">
+          {{ 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="道次号" width="80" fixed></el-table-column>
+        <el-table-column prop="entryThick" label="入口厚度(mm)" width="120"></el-table-column>
+        <el-table-column prop="exitThick" label="出口厚度(mm)" width="120"></el-table-column>
+        <el-table-column prop="reduction" label="压下率(%)" width="100"></el-table-column>
+        <el-table-column prop="rollSpeed" label="轧制速度" width="120"></el-table-column>
+        <el-table-column prop="rollForce" label="轧制力(kN)" width="120"></el-table-column>
+        <el-table-column prop="entryTension" label="入口张力" width="120"></el-table-column>
+        <el-table-column prop="exitTension" label="出口张力" width="120"></el-table-column>
+      </el-table>
+      <div v-else class="empty-msg">无计算结果数据</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="开卷机编号" prop="porIdx">
@@ -199,15 +458,100 @@
 </template>
 
 <script>
-import createFetch from '@/api/l2/track'
-import KnovaStage from '../../components/knovaStage.vue'
-import { rects, lines } from './rects'
+import createApi from '@/api/l2/track'
+import WebSocketManager 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: '开卷张力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: '底部涂重'
+}
+
+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: {
-    KnovaStage
-  },
-  props: {
+   props: {
     baseURL: {
       type: String,
       default: ''
@@ -215,17 +559,67 @@ export default {
   },
   data() {
     return {
-      fetchApi: undefined,
-      rects,
-      lines,
+      // WebSocket 连接状态
+      fetchApi: {},
+      socketStatus: {
+        measure: false,
+        position: false,
+        signal: false,
+        matmap: false,
+        calcSetup: false
+      },
       matMapList: [],
-      selectedCard: null, // 非调整模式选中的单个卡片
+      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,
+        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, // 是否为调整模式
-      deviceMap: {},
+      },
+      adjustMode: false,
       operateMatForm: {
         porIdx: null,
         trIdx: null,
@@ -268,13 +662,59 @@ export default {
         ]
       },
       operateMatStatus: false, // 操作对话框显示状态
-      returnInfo: {}, // 存储回退接口返回的数据
-      isLoadingReturn: false, // 回退信息加载状态
-      returnError: '' // 回退信息获取失败的提示
+      returnInfo: {},
+      isLoadingReturn: false,
+      returnError: ''
     }
   },
   computed: {
-    // 操作对话框标题
+    // 当前计划（ONLINE 或 PRODUCING状态）
+    currentPlans() {
+      return this.planQueue.filter(plan => 
+        ['ONLINE', 'PRODUCING', 'PRODUCTING'].includes(plan.status)
+      )
+    },
+    
+    // 当前生产中的计划（取状态为生产中的首条）
+    producingPlan() {
+      return this.planQueue.find(plan => ['PRODUCING', 'PRODUCTING'].includes(plan.status))
+    },
+
+    // 当前生产中的钢卷号
+    producingCoilId() {
+      if (this.producingPlan) {
+        return this.producingPlan.coilid || this.producingPlan.matId || ''
+      }
+      return ''
+    },
+    
+    // 显示的计划列表（根据tab切换）
+    displayedPlans() {
+      if (this.activeQueueTab === 'current') {
+        return this.currentPlans
+      }
+      return this.planQueue
+    },
+    
+    // 选中计划的位置信息
+    selectedPlanPosition() {
+      if (!this.selectedPlan || !this.matMapList || this.matMapList.length === 0) {
+        return null
+      }
+      
+      // 从matMapList中查找匹配的位置
+      // matMapList中的字段是驼峰命名：planId, matId
+      // 计划对象中的字段可能是：planid, coilid
+      const position = this.matMapList.find(item => 
+        (item.planId && item.planId === this.selectedPlan.planid) ||
+        (item.planId && item.planId === this.selectedPlan.planId) ||
+        (item.matId && item.matId === this.selectedPlan.coilid) ||
+        (item.matId && item.matId === this.selectedPlan.matId)
+      )
+      
+      return position
+    },
+    
     getOperateTitle() {
       const titleMap = {
         'ONLINE': '钢卷上线',
@@ -285,21 +725,761 @@ export default {
         '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 = []
+      // 通用字段：按 DeviceEnum.paramFields 取值
+      meta.paramFields.forEach(field => {
+        const value = this.getFieldValueWithAlias(source, field)
+        if (value !== null && value !== undefined && value !== '') {
+          data.push({
+            label: PARAM_LABELS[field] || field,
+            value: this.formatValue(value),
+            unit: this.getFieldUnit(field)
+          })
+        }
+      })
+
+      return data
     }
   },
 
   methods: {
-    // 获取钢卷数据
-    fetchData() {
-      this.fetchApi.getTrackMatPosition().then(res => {
-        this.matMapList = res.data.matMapList || []
-        // this.deviceMap = res.data.matMapList || {}
-      }).catch(err => {
-        console.error('获取钢卷数据失败：', err)
-        this.$message.error('获取数据失败，请重试')
+    // ============ 辅助：设备元数据 ============
+    getDevicesBySection(sectionType) {
+      return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sectionType === sectionType)
+    },
+    getDevicesBySource(sourceType) {
+      return this.matMapList.filter(d => DEVICE_META[d.positionNameEn]?.sourceType === sourceType)
+    },
+    // 判断设备是否有物料（用于绿框）
+    hasMatId(deviceId) {
+      const info = this.getDeviceInfo(deviceId)
+      return !!(info && info.matId)
+    },
+    getRealtimeSourceData(deviceId) {
+      const sourceType = DEVICE_META[deviceId]?.sourceType
+      if (!sourceType) return null
+      if (sourceType === 'ENTRY') return this.realtimeData.entry
+      if (sourceType === 'FURNACE') return this.realtimeData.furnace
+      if (sourceType === 'COAT') return this.realtimeData.coat
+      if (sourceType === 'EXIT') return this.realtimeData.exit
+      return null
+    },
+    getFieldValueWithAlias(source, field) {
+      // 兼容后端字段命名差异（如大小写、别名）
+      if (!source) return null
+      // 按别名映射
+      if (FIELD_ALIASES[field]) {
+        for (const alias of FIELD_ALIASES[field]) {
+          if (alias in source) return source[alias]
+        }
+      }
+      if (field in source) return source[field]
+      const lower = field.charAt(0).toLowerCase() + field.slice(1)
+      if (lower in source) return source[lower]
+      return null
+    },
+    getFieldUnit(field) {
+      const unitMap = {
+        stripSpeed: 'm/min',
+        stripSpeedTmExit: 'm/min',
+        stripSpeedAfp: 'm/min',
+        celLength: 'm',
+        cxlLength: 'm',
+        celCapacity: '%',
+        cxlCapacity: '%',
+        tensionPorBr1: 'daN',
+        tensionPorBr2: 'daN',
+        tensionBr5Tm: 'daN',
+        tensionTlBr7: 'daN',
+        tensionCxl: 'daN',
+        coilLength: 'm',
+        speedExitSection: 'm/min',
+        tlElongation: '%',
+        tmElongation: '%',
+        cleaningVoltage: 'V',
+        cleaningCurrent: 'A',
+        alkaliConcentration: 'g/L',
+        alkaliTemperature: '℃',
+        phfExitStripTemp: '℃',
+        rtfExitStripTemp: '℃',
+        jcsExitStripTemp: '℃',
+        scsExitStripTemp: '℃',
+        potTemperature: '℃',
+        zincPotPower: 'kW',
+        gasConsumption: 'm³/h'
+      }
+      return unitMap[field] || ''
+    },
+    getSectionSource(sectionType) {
+      if (sectionType === 'ENTRY') return this.realtimeData.entry
+      if (sectionType === 'FURNACE') return this.realtimeData.furnace
+      if (sectionType === 'COAT') return this.realtimeData.coat
+      if (sectionType === 'EXIT') return this.realtimeData.exit
+      return null
+    },
+    buildSectionMetrics(sectionType, fields) {
+      const source = this.getSectionSource(sectionType)
+      return fields.map(f => {
+        const raw = source ? this.getFieldValueWithAlias(source, f) : null
+        const unit = this.getFieldUnit(f)
+        return {
+          label: PARAM_LABELS[f] || f,
+          value: `${this.formatValue(raw)}${unit ? ' ' + unit : ''}`
+        }
+      })
+    },
+    matchReel(deviceId) {
+      if (!['POR1', 'POR2', 'ENL1', 'ENL2', 'CXL1', 'CXL2'].includes(deviceId)) return true
+      if (!this.realtimeData.entry) return false
+      const reel = this.realtimeData.entry.payOffReelNumber
+      if ((deviceId === 'POR1' || deviceId === 'ENL1' || deviceId === 'CXL1') && reel === 1) return true
+      if ((deviceId === 'POR2' || deviceId === 'ENL2' || deviceId === 'CXL2') && reel === 2) return true
+      return false
+    },
+    // ============ WebSocket 连接管理 ============
+    
+    initWebSockets() {
+      // 1. track_measure - 实时测量数据
+
+      const wsManager = new WebSocketManager('ws://' + this.baseURL + '/websocket')
+      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()
+    },
+
+    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})`)
+      }
+    },
+
+    // ============ 辅助方法 ============
+    
+    getOperationText(operation) {
+      const operationMap = {
+        ONLINE: '钢卷上线',
+        UNLOAD: '卸卷',
+        PRODUCING: '生产中',
+        PRODUCT: '生产完成',
+        PAY_OVER: '甩尾',
+        THROW_TAIL: '甩尾',
+        ALL_RETURN: '整卷回退',
+        HALF_RETURN: '半卷回退',
+        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
+      }
+    },
+
+    // ============ API 方法 ============
+    
+    // 刷新生产计划队列（独立方法，可被信号触发）
+    async refreshPlanQueue() {
+      try {
+        // 只查询活动状态的计划，排除已完成和甩尾
+        const statuses = ['ONLINE', 'PRODUCING', 'READY', 'NEW']
+        const allPlans = []
+        
+        // 并行查询所有状态
+        const requests = statuses.map(status => 
+          this.fetchApi.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 this.fetchApi.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参数）
@@ -336,20 +1516,14 @@ export default {
         });
     },
 
-    // 选择卡片（区分调整/非调整模式）
-    selectCard(item) {
-      this.selectedCard = this.selectedCard === item ? null : item
-      // 选中卡片时查询回退信息，取消选中时清空
-      if (this.selectedCard) {
-        this.fetchReturnData(this.selectedCard.posIdx);
-        this.adjustForm.current = this.selectedCard.positionNameEn
-      } else {
-        this.returnInfo = {};
-        this.returnError = '';
-        this.adjustForm.current = null
-      }
+    // 格式化数值
+    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
@@ -371,7 +1545,6 @@ export default {
       }).then(() => {
         this.fetchApi.adjustPosition(params).then(() => {
           this.$message.success('调整成功')
-          this.exitAdjustMode()
           this.fetchData()
         }).catch(err => {
           console.error('调整失败：', err)
@@ -385,9 +1558,10 @@ export default {
     // 打开操作对话框
     handleOperate(row, operation) {
       this.$refs.operateForm?.resetFields()
+      console.log(this.selectCard, row.posIdx)
       this.operateMatForm = {
-        porIdx: row.posIdx || null,
-        trIdx: row.posIdx || null,
+        porIdx: row.posIdx.toString() || '',
+        trIdx: row.posIdx.toString() || '',
         planId: row.planId || '',
         entryMatId: row.matId || '',
         planNo: row.planNo || '',
@@ -400,7 +1574,7 @@ export default {
       this.operateMatStatus = true
     },
 
-    // 提交操作表单 
+    // 提交操作表单
     submitOperateForm() {
       this.$refs.operateForm.validate(valid => {
         if (valid) {
@@ -419,51 +1593,782 @@ export default {
     }
   },
 
-  mounted() {
-    this.fetchApi = createFetch(this.baseURL)
-    this.fetchData()
+  async mounted() {
+    this.fetchApi = createApi(this.baseURL);
+    await this.fetchData()
+    this.initWebSockets()
+  },
+
+  beforeDestroy() {
+    this.disconnectWebSockets()
   }
 }
 </script>
 
-<style scoped lang="scss">
-.graph-container-box {
+<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%;
-  box-sizing: border-box;
-  height: calc(100vh - 86px);
-  padding: 20px;
-  // background-color: #c0c0c0;
+  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;
 }
 
-.graph-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
+/* 队列头部 */
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 15px;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
 
-  img {
-    width: 1881px;
-    height: 608px;
+.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);
   }
-
-  // 图形元素基础样式
-  .graph-list>div {
-    position: absolute;
-  }
-
-  // 文字容器样式
-  .text-wrapper {
-    position: relative;
-    height: 100%;
-  }
-
-  // 文字基础样式（可被配置项覆盖）
-  .text-wrapper span {
-    position: absolute;
-    color: #333;
-    /* 默认文字颜色 */
-    font-size: 14px;
-    /* 默认文字大小 */
+  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;
+  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% {
+    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;
+  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>
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
index df77d480..ec15bc78 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
@@ -162,9 +162,18 @@ export default {
     },
     rulerMaxRow() {
       // 取所有列中level为3的第一层的最大行数
-      const maxRows = Object.values(this.columns)
-        .filter(col => col.layer1?.[0]?.parsedInfo?.level === 3)
+      // 如果不存在level为3的列，则不执行filter操作，直接去最大值
+      // 如果存在level为3的列，则取layer1且level为3的最大行数
+      const columns = Object.values(this.columns)
+      const columnsOnlyLevel3 = columns.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3);
+      let maxRows = []
+      if (columnsOnlyLevel3.length > 0) {
+        maxRows = columnsOnlyLevel3
         .map(col => col.layer1?.length || 0);
+      } else {
+        maxRows = columns
+        .map(col => col.layer1?.length || 0);
+      }
       return maxRows.length > 0 ? Math.max(...maxRows) : 0;
     }
   },
diff --git a/klp-ui/src/views/wms/warehouse/index.vue b/klp-ui/src/views/wms/warehouse/index.vue
index 41076f09..8c3c1d18 100644
--- a/klp-ui/src/views/wms/warehouse/index.vue
+++ b/klp-ui/src/views/wms/warehouse/index.vue
@@ -17,16 +17,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <!-- <el-form-item label="库位类型" prop="warehouseType">
-        <el-select v-model="queryParams.warehouseType" placeholder="请选择库位类型" clearable>
-          <el-option
-            v-for="dict in dict.type.warehouse_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item> -->
       <el-form-item label="启用状态" prop="isEnabled">
         <el-select v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
           <el-option label="启用" :value="1" />
@@ -34,7 +24,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <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-form-item>
     </el-form>
@@ -49,70 +39,55 @@
           @click="handleAdd"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-sort"
-          size="mini"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="warehouseList"
-      row-key="warehouseId"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <!-- <el-table-column label="上级节点" prop="parentId" /> -->
-      <el-table-column label="库位编码" align="center" prop="warehouseCode" />
-      <el-table-column label="库位名称" align="center" prop="warehouseName" />
-      <!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
-        </template>
-      </el-table-column> -->
-      <el-table-column label="排序号" align="center" prop="sortNo" />
-      <el-table-column label="启用状态" align="center" prop="isEnabled">
-        <template slot-scope="scope">
-          <span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-          >新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
+    <!-- 替换树形表格为卡片布局 -->
+    <el-row :gutter="20" v-loading="loading">
+      <!-- 1. 新增卡片动态class区分启用/禁用状态 -->
+      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in warehouseList" :key="item.warehouseId" class="mb20">
+        <el-card 
+          shadow="hover" 
+          class="warehouse-card"
+          :class="{'enabled-card': item.isEnabled == 1, 'disabled-card': item.isEnabled == 0}"
+        >
+          <div class="card-content">
+            <!-- 2. 合并名称和编码为 名称#编码 形式 -->
+            <div class="card-item">
+              <span class="label">库位信息：</span>
+              <span class="value">{{ item.warehouseName }}#{{ item.warehouseCode }}</span>
+            </div>
+            <!-- <div class="card-item">
+              <span class="label">排序号：</span>
+              <span class="value">{{ item.sortNo }}</span>
+            </div> -->
+            <div class="card-item">
+              <span class="label">备注：</span>
+              <!-- 3. 备注添加多行省略样式类 -->
+              <span class="value remark-text">{{ item.remark || '无' }}</span>
+            </div>
+            <div class="card-actions">
+              <!-- 4. 新增启用/禁用快捷开关 -->
+              <el-switch
+                v-model="item.isEnabled"
+                :active-value="1"
+                :inactive-value="0"
+                @change="handleSwitchChange(item)"
+                :disabled="switchLoading"
+              />
+              <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>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
 
-    <!-- 添加或修改库位/库区/库位自关联对话框 -->
+    <!-- 添加或修改库位对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="上级节点" prop="parentId">
-          <WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
+        <el-form-item label="上级节点" prop="parentId" v-show="false">
+          <el-input v-model="form.parentId" disabled />
         </el-form-item>
         <el-form-item label="库位编码" prop="warehouseCode">
           <el-input v-model="form.warehouseCode" placeholder="请输入库位编码" />
@@ -120,16 +95,6 @@
         <el-form-item label="库位名称" prop="warehouseName">
           <el-input v-model="form.warehouseName" placeholder="请输入库位名称" />
         </el-form-item>
-        <!-- <el-form-item label="库位类型" prop="warehouseType">
-          <el-select v-model="form.warehouseType" placeholder="请选择库位类型">
-            <el-option
-              v-for="dict in dict.type.warehouse_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
-          </el-select>
-        </el-form-item> -->
         <el-form-item label="排序号" prop="sortNo">
           <el-input v-model="form.sortNo" placeholder="请输入排序号" />
         </el-form-item>
@@ -153,40 +118,31 @@
 
 <script>
 import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/wms/warehouse";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import WarehouseSelect from '@/components/WarehouseSelect';
 
 export default {
   name: "Warehouse",
-  // dicts: ['warehouse_type'],
-  components: {
-    Treeselect,
-    WarehouseSelect
-  },
+  components: {},
   data() {
     return {
       // 按钮loading
       buttonLoading: false,
+      // 开关loading（新增）
+      switchLoading: false,
       // 遮罩层
       loading: true,
       // 显示搜索条件
       showSearch: true,
-      // 库位/库区/库位自关联表格数据
+      // 库位表格数据（一维数组，非树形）
       warehouseList: [],
-      // 库位/库区/库位自关联树选项
-      warehouseOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
-      // 是否展开，默认全部展开
-      isExpandAll: true,
-      // 重新渲染表格状态
+      // 重新渲染表格状态（树结构相关，保留但无实际作用）
       refreshTable: true,
       // 查询参数
       queryParams: {
-        parentId: undefined,
+        parentId: undefined, // 固定查询parentId=0的数据
         warehouseCode: undefined,
         warehouseName: undefined,
         warehouseType: undefined,
@@ -195,7 +151,7 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
+      // 表单校验（移除warehouseType必填规则）
       rules: {
         warehouseCode: [
           { required: true, message: "库位/库区编码不能为空", trigger: "blur" }
@@ -203,9 +159,9 @@ export default {
         warehouseName: [
           { required: true, message: "库位/库区名称不能为空", trigger: "blur" }
         ],
-        warehouseType: [
-          { required: true, message: "类型不能为空", trigger: "change" }
-        ],
+        isEnabled: [
+          { required: true, message: "启用状态不能为空", trigger: "change" }
+        ]
       }
     };
   },
@@ -213,60 +169,33 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询库位/库区/库位自关联列表 */
+    /** 查询库位列表（移除树形处理） */
     getList() {
       this.loading = true;
       listWarehouse(this.queryParams).then(response => {
-        const list = this.handleTree(response.data, "warehouseId", "parentId");
-        // 递归遍历list，通过sortNo排序
-        const sort = (list) => {
-          list.sort((a, b) => a.sortNo - b.sortNo);
-          list.forEach(item => {
-            if (item.children) {
-              sort(item.children);
-            }
-          });
-        };
-        sort(list);
+        // 直接使用一维数组，按sortNo排序（无需递归）
+        const list = response.data.sort((a, b) => a.sortNo - b.sortNo);
         this.warehouseList = list;
         this.loading = false;
       });
     },
-    /** 转换库位/库区/库位自关联数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.warehouseId,
-        label: node.warehouseName,
-        children: node.children
-      };
-    },
-	/** 查询库位/库区/库位自关联下拉树结构 */
-    getTreeselect() {
-      listWarehouse().then(response => {
-        this.warehouseOptions = [];
-        const data = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "warehouseId", "parentId");
-        this.warehouseOptions.push(data);
-      });
-    },
+
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
+
     // 表单重置
     reset() {
       this.form = {
         warehouseId: null,
-        parentId: null,
+        parentId: undefined, // 固定parentId为0
         warehouseCode: null,
         warehouseName: null,
         warehouseType: 1,
         sortNo: null,
-        isEnabled: null,
+        isEnabled: 1, // 默认启用
         delFlag: null,
         remark: null,
         createTime: null,
@@ -276,60 +205,51 @@ export default {
       };
       this.resetForm("form");
     },
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.getList();
     },
+
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      // 重置后仍保留parentId=0
+      this.queryParams.parentId = undefined;
       this.handleQuery();
     },
+
     /** 新增按钮操作 */
-    handleAdd(row) {
+    handleAdd() {
       this.reset();
-      this.getTreeselect();
-      if (row != null && row.warehouseId) {
-        this.form.parentId = row.warehouseId;
-      } else {
-        this.form.parentId = 0;
-      }
+      // 固定parentId为0，无需树形选择器
+      this.form.parentId = undefined;
       this.open = true;
-      this.title = "添加库位/库区/库位自关联";
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
+      this.title = "添加库位/库区";
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
-	  this.loading = true;
+      this.loading = true;
       this.reset();
-      this.getTreeselect();
-      if (row != null) {
-        this.form.parentId = row.warehouseId;
-      }
+      // 固定parentId为0
+      this.form.parentId = 0;
       getWarehouse(row.warehouseId).then(response => {
-	    this.loading = false;
-        this.form = response.data;
+        this.loading = false;
+        // 覆盖parentId为0
+        this.form = { ...response.data, parentId: undefined };
         this.open = true;
-        this.title = "修改库位/库区/库位自关联";
+        this.title = "修改库位/库区";
       });
     },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
-          // 处理 parentId 为 0 的情况
-          let submitData = { ...this.form };
-          if (submitData.parentId === 0) {
-            delete submitData.parentId;
-          }
+          // 强制设置parentId为0
+          const submitData = { ...this.form, parentId: undefined };
           if (this.form.warehouseId != null) {
             updateWarehouse(submitData).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -350,9 +270,10 @@ export default {
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除库位/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
+      this.$modal.confirm('是否确认删除库位/库区编号为"' + row.warehouseId + '"的数据项？').then(() => {
         this.loading = true;
         return delWarehouse(row.warehouseId);
       }).then(() => {
@@ -363,7 +284,88 @@ export default {
       }).finally(() => {
         this.loading = false;
       });
+    },
+
+    /** 新增：开关切换启用/禁用状态 */
+    handleSwitchChange(item) {
+      this.switchLoading = true;
+      // 构造更新参数（仅更新状态）
+      const updateData = {
+        ...item,
+        isEnabled: item.isEnabled
+      };
+      updateWarehouse(updateData).then(() => {
+        this.$modal.msgSuccess(`已${item.isEnabled === 1 ? '启用' : '禁用'}该库位`);
+        this.getList(); // 刷新列表确保数据一致
+      }).catch(() => {
+        // 切换失败时恢复原状态
+        item.isEnabled = item.isEnabled === 1 ? 0 : 1;
+        this.$modal.msgError("状态切换失败");
+      }).finally(() => {
+        this.switchLoading = false;
+      });
     }
   }
 };
 </script>
+
+<style scoped>
+/* 卡片样式优化 */
+.warehouse-card {
+  height: 100%;
+  transition: border-color 0.3s;
+}
+
+/* 1. 启用卡片绿色边框 */
+.enabled-card {
+  border-color: #67c23a !important;
+}
+
+/* 禁用卡片红色边框 */
+.disabled-card {
+  border-color: #f56c6c !important;
+}
+
+.card-content {
+  padding: 10px 0;
+}
+
+.card-item {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: flex-start; /* 适配多行文本对齐 */
+}
+
+.label {
+  color: #606266;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.value {
+  color: #303133;
+  flex: 1;
+}
+
+/* 2. 备注文本多行省略样式 */
+.remark-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 最多显示2行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5; /* 行高适配 */
+  max-height: 3em; /* 2行 * 1.5行高 = 3em */
+}
+
+.card-actions {
+  margin-top: 15px;
+  display: flex;
+  gap: 10px;
+  align-items: center; /* 开关和按钮垂直居中 */
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file