From be7f6ed23c1ffcff84856322b44b6fba86d44580 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Thu, 6 Nov 2025 17:38:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/l2/.env.staging                  |    2 +-
 apps/l2/src/api/l2/track.js           |   12 +
 apps/l2/src/utils/websocketManager.js |  137 +++
 apps/l2/src/views/l2/plan/index.vue   |    2 +-
 apps/l2/src/views/l2/track/rect.vue   | 1163 +++++++++++++++++++++++--
 5 files changed, 1220 insertions(+), 96 deletions(-)
 create mode 100644 apps/l2/src/utils/websocketManager.js

diff --git a/apps/l2/.env.staging b/apps/l2/.env.staging
index 90102e3..fe053f8 100644
--- a/apps/l2/.env.staging
+++ b/apps/l2/.env.staging
@@ -11,4 +11,4 @@ ENV = 'staging'
 # 若依管理系统/测试环境
 VUE_APP_BASE_API = '/stage-api'
 
-VUE_APP_SERVICE_BASE_API = 'http://140.143.206.120:8081'
+VUE_APP_SERVICE_BASE_API = 'http://140.143.206.120:18081'
diff --git a/apps/l2/src/api/l2/track.js b/apps/l2/src/api/l2/track.js
index 7a1212f..01126b0 100644
--- a/apps/l2/src/api/l2/track.js
+++ b/apps/l2/src/api/l2/track.js
@@ -58,3 +58,15 @@ export function getTrackMatPosition() {
   })
 }
 
+/**
+ * 获取生产计划队列
+ * 使用现有的计划列表接口
+ */
+export function getPlanQueue(data = {}) {
+  return l2Request({
+    method: 'post',
+    url: '/api/pdi/list',
+    data
+  })
+}
+
diff --git a/apps/l2/src/utils/websocketManager.js b/apps/l2/src/utils/websocketManager.js
new file mode 100644
index 0000000..fae18fc
--- /dev/null
+++ b/apps/l2/src/utils/websocketManager.js
@@ -0,0 +1,137 @@
+/**
+ * WebSocket 管理器
+ * 用于管理多个 WebSocket 连接
+ */
+
+class WebSocketManager {
+  constructor() {
+    this.connections = new Map()
+    this.baseUrl = 'ws://140.143.206.120:18081/websocket'
+  }
+
+  /**
+   * 创建 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 new WebSocketManager()
+
diff --git a/apps/l2/src/views/l2/plan/index.vue b/apps/l2/src/views/l2/plan/index.vue
index b89be19..a964c5b 100644
--- a/apps/l2/src/views/l2/plan/index.vue
+++ b/apps/l2/src/views/l2/plan/index.vue
@@ -469,7 +469,7 @@ export default {
         seqid: null,
         coilid: "",
         unitCode: "",
-        status: 0,
+        status: "NEW",  // 新增计划默认状态为 NEW
         planid: "",
         planType: "",
         originCoilid: "",
diff --git a/apps/l2/src/views/l2/track/rect.vue b/apps/l2/src/views/l2/track/rect.vue
index 6c030e2..ebfb2ed 100644
--- a/apps/l2/src/views/l2/track/rect.vue
+++ b/apps/l2/src/views/l2/track/rect.vue
@@ -3,10 +3,91 @@
     <el-row :gutter="20">
       <!-- 左侧：设备列表 -->
       <el-col :span="16">
-        <div class="device-layout">
+        <!-- 加载状态 -->
+        <div v-if="isLoading" class="loading-container">
+          <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
+          <span>加载中...</span>
+        </div>
+
+        <!-- 生产计划队列 -->
+        <div v-if="!isLoading" class="plan-queue-panel">
+          <div class="panel-title">
+            <i class="el-icon-document"></i> 生产计划队列
+            <el-tag size="small" type="success">{{ planQueue.length }} 个计划</el-tag>
+          </div>
+          <div class="plan-queue-list">
+            <el-empty v-if="planQueue.length === 0" description="暂无生产计划"></el-empty>
+            <div v-else class="plan-items">
+              <div 
+                v-for="(plan, index) in planQueue" 
+                :key="plan.id || plan.planid || index"
+                class="plan-item"
+                :class="getPlanItemClass(plan)"
+                @click="selectPlan(plan)"
+              >
+                <div class="plan-order" :class="getPlanOrderClass(plan.status)">
+                  {{ index + 1 }}
+                </div>
+                <div class="plan-info">
+                  <div class="plan-row">
+                    <span class="plan-label">计划ID:</span>
+                    <span class="plan-value">{{ plan.planid || '-' }}</span>
+                  </div>
+                  <div class="plan-row">
+                    <span class="plan-label">钢卷号:</span>
+                    <span class="plan-value">{{ plan.coilid || '-' }}</span>
+                  </div>
+                  <div class="plan-row">
+                    <span class="plan-label">钢种:</span>
+                    <span class="plan-value">{{ plan.steelGrade || '-' }}</span>
+                  </div>
+                </div>
+                <div class="plan-status">
+                  <el-tag :type="getPlanStatusTagType(plan.status)" size="mini" effect="dark">
+                    {{ getPlanStatusText(plan.status) }}
+                  </el-tag>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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 v-if="!isLoading" class="device-layout">
           <!-- 入口段区域 -->
           <div class="section-area">
-            <div class="section-header">入口段</div>
+            <div class="section-header">
+              入口段
+              <span class="section-info" v-if="positionData.entrySpeed">速度: {{ positionData.entrySpeed.toFixed(1) }} m/min</span>
+            </div>
             <div class="device-grid">
               <div v-for="device in entryDevicesList" :key="device.positionNameEn" class="device-card" :class="{
                 active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
@@ -15,7 +96,9 @@
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
-                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
+                  </span>
                 </div>
                 <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
                   <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
@@ -29,7 +112,10 @@
 
           <!-- 熔炉段区域 -->
           <div class="section-area">
-            <div class="section-header">熔炉段</div>
+            <div class="section-header">
+              熔炉段
+              <span class="section-info" v-if="positionData.technologySpeed">速度: {{ positionData.technologySpeed.toFixed(1) }} m/min</span>
+            </div>
             <div class="device-grid">
               <div v-for="device in furnaceDevicesList" :key="device.positionNameEn" class="device-card" :class="{
                 active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
@@ -38,7 +124,9 @@
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
-                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
+                  </span>
                 </div>
                 <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
                   <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
@@ -61,7 +149,9 @@
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
-                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
+                  </span>
                 </div>
                 <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
                   <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
@@ -75,7 +165,10 @@
 
           <!-- 出口段区域 -->
           <div class="section-area">
-            <div class="section-header">出口段</div>
+            <div class="section-header">
+              出口段
+              <span class="section-info" v-if="positionData.exitSpeed">速度: {{ positionData.exitSpeed.toFixed(1) }} m/min</span>
+            </div>
             <div class="device-grid">
               <div v-for="device in exitDevicesList" :key="device.positionNameEn" class="device-card" :class="{
                 active: selectedCard && selectedCard.positionNameEn === device.positionNameEn,
@@ -84,7 +177,9 @@
                 <div class="device-name">{{ device.positionNameCn }}</div>
                 <div class="device-code">{{ device.positionNameEn }}</div>
                 <div class="device-status">
-                  <span class="coil-id">{{ getDeviceCoilId(device.positionNameEn) }}</span>
+                  <span class="coil-id" :class="{ 'status-working': isDeviceWorking(device.positionNameEn), 'status-idle': !isDeviceWorking(device.positionNameEn) }">
+                    {{ getDeviceStatus(device.positionNameEn) }}
+                  </span>
                 </div>
                 <div class="realtime-indicator" v-if="hasRealtimeData(device.positionNameEn)">
                   <div class="mini-data" v-for="(item, idx) in getMiniRealtimeData(device.positionNameEn)" :key="idx">
@@ -101,6 +196,94 @@
       <!-- 右侧：信息面板 -->
       <el-col :span="8">
         <div class="info-panels">
+          <!-- 生产计划详情 -->
+          <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">
+              <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> {{ 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" v-if="selectedCard">
             <div class="panel-title">基本信息</div>
@@ -180,6 +363,38 @@
       </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">
@@ -237,22 +452,62 @@
 </template>
 
 <script>
-import { adjustPosition, getTrackMatPosition, operateMat, getBackData } from '@/api/l2/track'
+import { adjustPosition, getTrackMatPosition, operateMat, getBackData, getPlanQueue } from '@/api/l2/track'
+import wsManager from '@/utils/websocketManager'
 
 export default {
   data() {
     return {
-      socket: null,
-      isConnected: false,
+      // WebSocket 连接状态
+      socketStatus: {
+        measure: false,
+        position: false,
+        signal: false,
+        matmap: false,
+        calcSetup: false
+      },
       matMapList: [],
       selectedCard: null,
-      // 实时数据 - 初始化所有属性确保响应式
+      
+      // 实时测量数据（track_measure）
       realtimeData: {
         entry: null,
         furnace: null,
         coat: null,
         exit: null
       },
+      
+      // 位置追踪数据（track_position）
+      positionData: {
+        coilStripLocationList: [],
+        entryLoopLen: 0,
+        exitLoopLen: 0,
+        entryLoopPer: 0,
+        exitLoopLPer: 0,
+        porId: null,
+        trId: null,
+        entrySpeed: 0,
+        technologySpeed: 0,
+        exitSpeed: 0,
+        matMapList: []
+      },
+      
+      // 操作信号数据（track_signal）
+      signalData: null,
+      
+      // 计算设定结果（calc_setup_result）
+      calcSetupResult: null,
+      showCalcResultDialog: false,
+      
+      // 加载状态
+      isLoading: true,
+      
+      // 生产计划队列
+      planQueue: [],
+      
+      // 选中的生产计划
+      selectedPlan: null,
+      
       adjustForm: {
         current: null,
         target: null
@@ -518,13 +773,370 @@ export default {
   },
 
   methods: {
-    fetchData() {
-      getTrackMatPosition().then(res => {
+    // ============ WebSocket 连接管理 ============
+    
+    initWebSockets() {
+      // 1. track_measure - 实时测量数据
+      wsManager.connect('track_measure', {
+        onMessage: this.processMeasureData,
+        onOpen: () => {
+          this.socketStatus.measure = true
+          console.log('✅ 测量数据连接成功')
+        },
+        onError: () => { this.socketStatus.measure = false },
+        onClose: () => { this.socketStatus.measure = false }
+      })
+
+      // 2. track_position - 钢卷位置追踪
+      wsManager.connect('track_position', {
+        onMessage: this.processPositionData,
+        onOpen: () => {
+          this.socketStatus.position = true
+          console.log('✅ 位置追踪连接成功')
+        },
+        onError: () => { this.socketStatus.position = false },
+        onClose: () => { this.socketStatus.position = false }
+      })
+
+      // 3. track_signal - 操作信号
+      wsManager.connect('track_signal', {
+        onMessage: this.processSignalData,
+        onOpen: () => {
+          this.socketStatus.signal = true
+          console.log('✅ 操作信号连接成功')
+        },
+        onError: () => { this.socketStatus.signal = false },
+        onClose: () => { this.socketStatus.signal = false }
+      })
+
+      // 4. track_matmap - 物料位置映射
+      wsManager.connect('track_matmap', {
+        onMessage: this.processMatmapData,
+        onOpen: () => {
+          this.socketStatus.matmap = true
+          console.log('✅ 物料映射连接成功')
+        },
+        onError: () => { this.socketStatus.matmap = false },
+        onClose: () => { this.socketStatus.matmap = false }
+      })
+
+      // 5. calc_setup_result - 计算设定结果
+      wsManager.connect('calc_setup_result', {
+        onMessage: this.processCalcSetupResult,
+        onOpen: () => {
+          this.socketStatus.calcSetup = true
+          console.log('✅ 计算结果连接成功')
+        },
+        onError: () => { this.socketStatus.calcSetup = false },
+        onClose: () => { this.socketStatus.calcSetup = false }
+      })
+    },
+
+    disconnectWebSockets() {
+      wsManager.disconnectAll()
+      this.socketStatus = {
+        measure: false,
+        position: false,
+        signal: false,
+        matmap: false,
+        calcSetup: false
+      }
+    },
+
+    // ============ 数据处理方法 ============
+    
+    processMeasureData(data) {
+      if (data.appMeasureEntryMessage) {
+        this.$set(this.realtimeData, 'entry', data.appMeasureEntryMessage)
+      }
+      if (data.appMeasureFurnaceMessage) {
+        this.$set(this.realtimeData, 'furnace', data.appMeasureFurnaceMessage)
+      }
+      if (data.appMeasureCoatMessage) {
+        this.$set(this.realtimeData, 'coat', data.appMeasureCoatMessage)
+      }
+      if (data.appMeasureExitMessage) {
+        this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
+      }
+      this.$forceUpdate()
+    },
+
+    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) {
+      this.signalData = data
+      const operationText = this.getOperationText(data.operation)
+      const autoFlagText = data.autoFlag === 1 ? '[手动]' : '[自动]'
+      const config = this.getOperationConfig(data.operation)
+      
+      // 右上角通知（所有操作都显示）
+      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()
+      }
+    },
+
+    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 fetchData() {
+      try {
+        this.isLoading = true
+        const res = await getTrackMatPosition()
+        
+        // 只在 WebSocket 未连接时使用 API 数据
+        if (!this.socketStatus.matmap) {
         this.matMapList = res.data.matMapList || []
-      }).catch(err => {
+        }
+        
+        // 获取生产计划队列
+        try {
+          const planRes = await getPlanQueue({})
+          if (planRes.code === 200 && planRes.data) {
+            // 筛选出 NEW、READY 和 PRODUCING 状态的计划
+            const validStatuses = ['NEW', 'READY', 'PRODUCING']
+            let filteredPlans = (planRes.data || [])
+              .filter(plan => validStatuses.includes(plan.status))
+              .sort((a, b) => (a.seqid || 0) - (b.seqid || 0))
+            
+            // 如果有多个 PRODUCING，只保留第一个
+            const producingPlans = filteredPlans.filter(p => p.status === 'PRODUCING')
+            const otherPlans = filteredPlans.filter(p => p.status !== 'PRODUCING')
+            
+            if (producingPlans.length > 0) {
+              this.planQueue = [producingPlans[0], ...otherPlans].slice(0, 5)
+            } else {
+              this.planQueue = otherPlans.slice(0, 5)
+            }
+          } else {
+            this.planQueue = this.generateMockPlanQueue()
+          }
+        } catch (err) {
+          console.error('获取生产计划队列失败：', err)
+          this.planQueue = this.generateMockPlanQueue()
+        }
+        
+      } 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: '就绪',
+        PRODUCING: '生产中',
+        PRODUCT: '已完成',
+        COMPLETED: '已完成'
+      }
+      return statusMap[status] || status || '待处理'
+    },
+
+    // 获取计划状态标签类型
+    getPlanStatusTagType(status) {
+      const typeMap = {
+        NEW: '',
+        READY: 'warning',
+        PRODUCING: 'success',
+        PRODUCT: 'info',
+        COMPLETED: 'info'
+      }
+      return typeMap[status] || 'info'
+    },
+
+    // 获取计划卡片样式类
+    getPlanItemClass(plan) {
+      const classes = []
+      
+      if (plan.status === 'PRODUCING') {
+        classes.push('plan-active')
+      }
+      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') return 'order-producing'
+      if (status === 'READY') return 'order-ready'
+      if (status === 'NEW') return 'order-new'
+      return ''
     },
 
 
@@ -543,9 +1155,79 @@ export default {
         } 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
+      }
+    },
+
+    // 格式化日期时间
+    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 ''
+    },
+
     // 判断设备是否有实时数据
     hasRealtimeData(deviceId) {
       if (!this.realtimeData) return false
@@ -574,22 +1256,104 @@ export default {
       return false
     },
 
-    // 获取设备钢卷号
-    getDeviceCoilId(deviceId) {
-      const deviceInfo = this.getDeviceInfo(deviceId)
+    // 判断设备是否工作中
+    isDeviceWorking(deviceId) {
+      if (!this.realtimeData) return false
 
-      // 开卷机特殊处理
+      // 开卷机判断
       if (deviceId === 'POR1' || deviceId === 'POR2') {
         if (this.realtimeData.entry) {
           const reelNumber = this.realtimeData.entry.payOffReelNumber
           if ((deviceId === 'POR1' && reelNumber === 1) || (deviceId === 'POR2' && reelNumber === 2)) {
-            return this.realtimeData.entry.entryCoilId || deviceInfo?.matId || '空闲'
+            return this.realtimeData.entry.stripSpeed > 0 || 
+                   this.realtimeData.entry.tensionPorBr1 > 0 ||
+                   !!this.realtimeData.entry.entryCoilId
           }
-          return '空闲'
         }
       }
+      
+      // 焊机判断
+      if (deviceId === 'WELDER' && this.realtimeData.entry) {
+        return this.realtimeData.entry.tensionBr1Br2 > 0 || this.realtimeData.entry.tensionBr2Br3 > 0
+      }
+      
+      // 入口活套判断
+      if ((deviceId === 'ENL1' || deviceId === 'ENL2') && this.realtimeData.entry) {
+        const reelNumber = this.realtimeData.entry.payOffReelNumber
+        if ((deviceId === 'ENL1' && reelNumber === 1) || (deviceId === 'ENL2' && reelNumber === 2)) {
+          return this.realtimeData.entry.celLength > 0 || this.realtimeData.entry.celCapacity > 0
+        }
+      }
+      
+      // 清洗段判断
+      if (deviceId === 'CLEAN' && this.realtimeData.entry) {
+        return this.realtimeData.entry.cleaningVoltage > 0 || 
+               this.realtimeData.entry.cleaningCurrent > 0 ||
+               this.realtimeData.entry.alkaliTemperature > 0
+      }
+      
+      // 退火炉判断
+      if (['FUR1', 'FUR2', 'FUR3', 'FUR4'].includes(deviceId) && this.realtimeData.furnace) {
+        if (deviceId === 'FUR1') return this.realtimeData.furnace.phFurnaceTemperatureActual > 0
+        if (deviceId === 'FUR2' || deviceId === 'FUR3') return this.realtimeData.furnace.nof1FurnaceTemperatureActual > 0
+        if (deviceId === 'FUR4') return this.realtimeData.furnace.nof1FurnaceTemperatureControlOutput > 0
+      }
+      
+      // 涂层段判断
+      if (deviceId === 'COAT' && this.realtimeData.coat) {
+        return this.realtimeData.coat.stripLocation > 0 ||
+               this.realtimeData.coat.avrCoatingWeightTop > 0 ||
+               this.realtimeData.coat.avrCoatingWeightBottom > 0
+      }
+      
+      // 光整机判断
+      if (deviceId === 'TM' && this.realtimeData.coat) {
+        return this.realtimeData.coat.stripSpeedTmExit > 0 || this.realtimeData.coat.tmElongation > 0
+      }
+      
+      // 拉矫机判断
+      if (deviceId === 'TL' && this.realtimeData.coat) {
+        return this.realtimeData.coat.tensionTlBr7 > 0 || this.realtimeData.coat.tlElongation > 0
+      }
+      
+      // 出口活套判断
+      if (['CXL1', 'CXL2'].includes(deviceId) && this.realtimeData.exit && this.realtimeData.entry) {
+        const reelNumber = this.realtimeData.entry.payOffReelNumber
+        if ((deviceId === 'CXL1' && reelNumber === 1) || (deviceId === 'CXL2' && reelNumber === 2)) {
+          return this.realtimeData.exit.cxlLength > 0 || this.realtimeData.exit.cxlCapacity > 0
+        }
+      }
+      
+      // 卷取机判断
+      if (deviceId === 'TR' && this.realtimeData.exit) {
+        return this.realtimeData.exit.speedExitSection > 0 || 
+               this.realtimeData.exit.tensionBr9Tr > 0 ||
+               this.realtimeData.exit.coilLength > 0
+      }
+      
+      // 称重位判断
+      if (deviceId === 'WEIT' && this.realtimeData.exit) {
+        return this.realtimeData.exit.coilLength > 0 || this.realtimeData.exit.speedExitSection > 0
+      }
 
-      return deviceInfo?.matId || '空闲'
+      return false
+    },
+
+    // 获取设备状态文本
+    getDeviceStatus(deviceId) {
+      const deviceInfo = this.getDeviceInfo(deviceId)
+      
+      // 如果有物料映射的钢卷号，显示钢卷号
+      if (deviceInfo?.matId) {
+        return deviceInfo.matId
+      }
+      
+      // 根据实时数据判断工作状态
+      if (this.isDeviceWorking(deviceId)) {
+        return '工作中'
+      }
+      
+      return '空闲'
     },
 
     // 获取设备卡片上显示的迷你实时数据
@@ -731,72 +1495,6 @@ export default {
       return typeof value === 'number' ? value.toFixed(2) : value
     },
 
-    // WebSocket连接
-    connectWebSocket() {
-      if (this.socket) return
-
-      const url = 'ws://140.143.206.120:18081/websocket?type=track_measure'
-
-      try {
-        this.socket = new WebSocket(url)
-
-        this.socket.onopen = () => {
-          console.log('WebSocket已连接')
-          this.isConnected = true
-        }
-
-        this.socket.onmessage = (event) => {
-          try {
-            const data = JSON.parse(event.data)
-            console.log('收到WebSocket数据:', data)
-            this.processRealtimeData(data)
-          } catch (error) {
-            console.error('数据解析错误:', error)
-          }
-        }
-
-        this.socket.onerror = (error) => {
-          console.error('WebSocket错误:', error)
-          this.isConnected = false
-        }
-
-        this.socket.onclose = () => {
-          console.log('WebSocket已关闭')
-          this.isConnected = false
-          this.socket = null
-          // 3秒后重连
-          setTimeout(() => this.connectWebSocket(), 3000)
-        }
-      } catch (error) {
-        console.error('连接失败:', error)
-      }
-    },
-
-    // 处理实时数据 - 使用$set确保响应式更新
-    processRealtimeData(data) {
-      if (data.appMeasureEntryMessage) {
-        this.$set(this.realtimeData, 'entry', data.appMeasureEntryMessage)
-      }
-      if (data.appMeasureFurnaceMessage) {
-        this.$set(this.realtimeData, 'furnace', data.appMeasureFurnaceMessage)
-      }
-      if (data.appMeasureCoatMessage) {
-        this.$set(this.realtimeData, 'coat', data.appMeasureCoatMessage)
-      }
-      if (data.appMeasureExitMessage) {
-        this.$set(this.realtimeData, 'exit', data.appMeasureExitMessage)
-      }
-
-      // 强制更新视图
-      this.$forceUpdate()
-    },
-
-    disconnectWebSocket() {
-      if (this.socket) {
-        this.socket.close()
-        this.socket = null
-      }
-    },
 
     // 确认调整位置
     handleConfirmAdjust() {
@@ -867,13 +1565,13 @@ export default {
     }
   },
 
-  mounted() {
-    this.fetchData()
-    this.connectWebSocket()
+  async mounted() {
+    await this.fetchData()
+    this.initWebSockets()
   },
 
   beforeDestroy() {
-    this.disconnectWebSocket()
+    this.disconnectWebSockets()
   }
 }
 </script>
@@ -970,10 +1668,17 @@ export default {
 
 .coil-id {
   font-size: 12px;
-  color: #67c23a;
   font-weight: 500;
 }
 
+.status-working {
+  color: #67c23a;
+}
+
+.status-idle {
+  color: #909399;
+}
+
 .realtime-indicator {
   margin-top: 8px;
   padding-top: 8px;
@@ -1097,4 +1802,274 @@ export default {
   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: 4px;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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-queue-panel .panel-title i {
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.plan-queue-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.plan-items {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  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-active {
+  background: #f0f9ff;
+  border-color: #67c23a;
+}
+
+.plan-item.plan-ready {
+  background: #fdf6ec;
+  border-color: #e6a23c;
+}
+
+.plan-item.plan-selected {
+  background: #f0f9ff;
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.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;
+}
+
+.plan-order.order-ready {
+  background: #e6a23c;
+}
+
+.plan-order.order-new {
+  background: #909399;
+}
+
+.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 {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.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>