From 6083e700ccda641e02de7b2a5368e5bdd12351c7 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Fri, 7 Nov 2025 17:26:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E5=89=8D=E7=AB=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/l2/src/views/l2/plan/index.vue | 1076 ++++++++++++++++++++++++---
 apps/l2/src/views/l2/track/rect.vue |  490 ++++++++++--
 2 files changed, 1402 insertions(+), 164 deletions(-)

diff --git a/apps/l2/src/views/l2/plan/index.vue b/apps/l2/src/views/l2/plan/index.vue
index a964c5b..7416cf9 100644
--- a/apps/l2/src/views/l2/plan/index.vue
+++ b/apps/l2/src/views/l2/plan/index.vue
@@ -1,73 +1,228 @@
 <template>
-  <div class="plan-management">
-    <el-card>
-      <el-button type="success" @click="handleAdd" icon="el-icon-plus" size="mini">新增</el-button>
-      <!-- 数据表格 -->
-      <el-table v-loading="loading" :data="planList" border style="width: 100%; margin-top: 20px"
-        @row-click="handleRowClick" highlight-current-row size="mini" height="400">
-        <el-table-column prop="planid" label="计划号" align="center"></el-table-column>
-        <el-table-column prop="coilid" label="钢卷号" align="center"></el-table-column>
-        <el-table-column prop="steelGrade" label="钢种" align="center"></el-table-column>
-        <el-table-column prop="yieldPoint" label="屈服点" align="center"></el-table-column>
-        <el-table-column prop="entryWeight" label="重量(t)" align="center"></el-table-column>
-        <el-table-column prop="entryThick" label="厚度(mm)" align="center"></el-table-column>
-        <el-table-column prop="entryWidth" label="宽度(mm)" align="center"></el-table-column>
-        <el-table-column prop="entryLength" label="长度(mm)" align="center"></el-table-column>
-        <el-table-column prop="entryOuterDiameter" label="外径(mm)" align="center"></el-table-column>
-        <el-table-column prop="spmElongation" label="延伸率(%)" align="center"></el-table-column>
-        <el-table-column prop="spmRollforce" label="SPM轧制力" align="center"></el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right">
-          <template slot-scope="scope">
-            <el-button size="mini" type="primary" @click.stop="handleUpdate(scope.row)" icon="el-icon-edit">
+  <div class="plan-management-industrial">
+    <!-- 顶部工具栏 -->
+    <div class="toolbar">
+      <el-button type="primary" @click="handleAdd" icon="el-icon-plus" size="small">
+        新增计划
+      </el-button>
+      <el-button @click="getList" icon="el-icon-refresh" size="small">
+        刷新
+      </el-button>
+    </div>
+
+    <!-- 正在生产区 -->
+    <div class="producing-section" v-if="productingPlans.length > 0">
+      <div class="producing-cards">
+        <el-card 
+          v-for="plan in productingPlans" 
+          :key="plan.id" 
+          class="producing-card"
+          :class="{ 'active': currentRow && currentRow.id === plan.id }"
+          @click.native="handleRowClick(plan)"
+        >
+          <div class="card-status">
+            <span class="status-dot status-producing"></span>
+            <span class="status-text">生产中</span>
+            <!-- 当前位置 -->
+            <div class="card-position" v-if="getPlanPosition(plan)">
+              <i class="el-icon-location"></i>
+              {{ getPlanPosition(plan).positionNameCn }}
+            </div>
+          </div>
+          <div class="card-content">
+            <div class="card-main">
+              <div class="plan-id">{{ plan.planid }}</div>
+              <div class="coil-id">钢卷号: {{ plan.coilid }}</div>
+            </div>
+            <div class="card-details">
+              <div class="detail-item">
+                <span class="label">钢种:</span>
+                <span class="value">{{ plan.steelGrade }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">厚度:</span>
+                <span class="value">{{ plan.entryThick }} mm</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">宽度:</span>
+                <span class="value">{{ plan.entryWidth }} mm</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">重量:</span>
+                <span class="value">{{ plan.entryWeight }} t</span>
+              </div>
+            </div>
+          </div>
+          <div class="card-actions">
+            <el-button size="mini" type="text" @click.stop="handleUpdate(plan)" icon="el-icon-edit">
               编辑
             </el-button>
-            <el-button size="mini" type="danger" @click.stop="handleDelete(scope.row)" icon="el-icon-delete"
-              :loading="scope.row.deleteLoading">
+            <el-button size="mini" type="text" @click.stop="handleDelete(plan)" icon="el-icon-delete">
               删除
             </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+          </div>
+        </el-card>
+      </div>
+    </div>
 
-    <el-row style="margin-top: 20px;" v-if="currentRow">
-      <el-col :span="12">
-        <el-descriptions :column="3">
-          <el-descriptions-item label="钢卷号">
-            {{ currentRow.coilid }}
-          </el-descriptions-item>
-          <el-descriptions-item label="钢种">
-            {{ currentRow.steelGrade }}
-          </el-descriptions-item>
-          <el-descriptions-item label="屈服点">
-            {{ currentRow.yieldPoint }}
-          </el-descriptions-item>
-          <el-descriptions-item label="重量(t)">
-            {{ currentRow.entryWeight }}
-          </el-descriptions-item>
-          <el-descriptions-item label="厚度(mm)">
-            {{ currentRow.entryThick }}
-          </el-descriptions-item>
-          <el-descriptions-item label="宽度(mm)">
-            {{ currentRow.entryWidth }}
-          </el-descriptions-item>
-          <el-descriptions-item label="长度(mm)">
-            {{ currentRow.entryLength }}
-          </el-descriptions-item>
-          <el-descriptions-item label="外径(mm)">
-            {{ currentRow.entryOuterDiameter }}
-          </el-descriptions-item>
-          <el-descriptions-item label="SPM延伸率(%)">
-            {{ currentRow.spmElongation }}
-          </el-descriptions-item>
-          <el-descriptions-item label="SPM轧制力">
-            {{ currentRow.spmRollforce }}
-          </el-descriptions-item>
-        </el-descriptions>
+    <!-- 主内容区 -->
+    <el-row :gutter="20" class="main-content">
+      <!-- 左侧：计划队列（标签页） -->
+      <el-col :span="10" class="left-panel">
+        <div class="queue-tabs-section">
+          <el-tabs v-model="queueTab">
+            <!-- 生产队列标签页 -->
+            <el-tab-pane name="pending">
+              <span slot="label">
+                <i class="el-icon-s-order"></i>
+                生产队列
+                <el-badge :value="pendingPlans.length" class="tab-badge" />
+              </span>
+              <div v-loading="loading" class="plan-list">
+                <div 
+                  v-for="plan in pendingPlans" 
+                  :key="plan.id"
+                  class="plan-item"
+                  :class="{ 
+                    'active': currentRow && currentRow.id === plan.id,
+                    'plan-item-producing': plan.status === 'PRODUCING',
+                    'plan-item-online': plan.status === 'ONLINE'
+                  }"
+                  @click="handleRowClick(plan)"
+                >
+                  <div class="plan-status">
+                    <span class="status-dot" :class="{
+                      'status-producing': plan.status === 'PRODUCING',
+                      'status-online': plan.status === 'ONLINE',
+                      'status-pending': plan.status === 'READY' || plan.status === 'NEW'
+                    }"></span>
+                    <el-tag 
+                      :type="plan.status === 'PRODUCING' ? 'success' : 
+                             plan.status === 'ONLINE' ? 'warning' : 
+                             plan.status === 'READY' ? 'primary' : 'info'" 
+                      size="mini"
+                    >
+                      {{ plan.status === 'PRODUCING' ? '生产中' : 
+                         plan.status === 'ONLINE' ? '在机' : 
+                         plan.status === 'READY' ? '就绪' : '新建' }}
+                    </el-tag>
+                  </div>
+                  <div class="plan-content">
+                    <div class="plan-main">
+                      <span class="plan-no">{{ plan.planid }}</span>
+                      <span class="coil-no">{{ plan.coilid }}</span>
+                    </div>
+                    <div class="plan-info">
+                      <span>{{ plan.steelGrade }}</span>
+                      <span>{{ plan.entryThick }}×{{ plan.entryWidth }} mm</span>
+                      <span>{{ plan.entryWeight }} t</span>
+                    </div>
+                    <!-- 位置信息（仅生产中状态显示） -->
+                    <div class="plan-position" v-if="plan.status === 'PRODUCING' && getPlanPosition(plan)">
+                      <i class="el-icon-location"></i>
+                      <span>{{ getPlanPosition(plan).positionNameCn }}</span>
+                    </div>
+                  </div>
+                  <div class="plan-actions">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(plan)" />
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(plan)" />
+                  </div>
+                </div>
+                <div v-if="pendingPlans.length === 0" class="empty-text">
+                  暂无生产计划
+                </div>
+              </div>
+            </el-tab-pane>
+
+            <!-- 历史记录标签页 -->
+            <el-tab-pane name="history">
+              <span slot="label">
+                <i class="el-icon-document-checked"></i>
+                历史记录
+                <el-badge :value="historyPlans.length" class="tab-badge" />
+              </span>
+              <div class="plan-list">
+                <div 
+                  v-for="plan in historyPlans" 
+                  :key="plan.id"
+                  class="plan-item plan-item-history"
+                  :class="{ 'active': currentRow && currentRow.id === plan.id }"
+                  @click="handleRowClick(plan)"
+                >
+                  <div class="plan-status">
+                    <span class="status-dot status-history"></span>
+                    <el-tag type="info" size="mini">已完成</el-tag>
+                  </div>
+                  <div class="plan-content">
+                    <div class="plan-main">
+                      <span class="plan-no">{{ plan.planid }}</span>
+                      <span class="coil-no">{{ plan.coilid }}</span>
+                    </div>
+                    <div class="plan-info">
+                      <span>{{ plan.steelGrade }}</span>
+                      <span>{{ plan.entryThick }}×{{ plan.entryWidth }} mm</span>
+                      <span>{{ plan.entryWeight }} t</span>
+                    </div>
+                    <div class="plan-time" v-if="plan.endDate">
+                      <i class="el-icon-time"></i>
+                      {{ parseTime(plan.endDate) }}
+                    </div>
+                  </div>
+                  <div class="plan-actions">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(plan)" />
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(plan)" />
+                  </div>
+                </div>
+                <div v-if="historyPlans.length === 0" class="empty-text">
+                  暂无历史记录
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
       </el-col>
-      <el-col :span="12">
-        <setup-pane v-if="!setupLoading" :setup-form="setupForm" />
-        <div v-else v-loading="setupLoading" style="height: 200px;">
+
+      <!-- 右侧：计划详情和张力数据 -->
+      <el-col :span="14" class="right-panel">
+        <div v-if="currentRow" class="detail-section">
+          <div class="section-header">
+            <i class="el-icon-data-line"></i>
+            <span>计划详情与工艺参数</span>
+          </div>
+          
+          <!-- 整合的详情卡片 -->
+          <el-card class="detail-card-unified" shadow="never">
+            <el-tabs v-model="activeTab" type="border-card">
+              <!-- 基础信息标签页 -->
+              <el-tab-pane label="基础信息" name="basic">
+                <el-descriptions :column="3" border size="small">
+                  <el-descriptions-item label="计划号">{{ currentRow.planid }}</el-descriptions-item>
+                  <el-descriptions-item label="钢卷号">{{ currentRow.coilid }}</el-descriptions-item>
+                  <el-descriptions-item label="钢种">{{ currentRow.steelGrade }}</el-descriptions-item>
+                  <el-descriptions-item label="屈服点">{{ currentRow.yieldPoint }}</el-descriptions-item>
+                  <el-descriptions-item label="重量(t)">{{ currentRow.entryWeight }}</el-descriptions-item>
+                  <el-descriptions-item label="厚度(mm)">{{ currentRow.entryThick }}</el-descriptions-item>
+                  <el-descriptions-item label="宽度(mm)">{{ currentRow.entryWidth }}</el-descriptions-item>
+                  <el-descriptions-item label="长度(mm)">{{ currentRow.entryLength }}</el-descriptions-item>
+                  <el-descriptions-item label="外径(mm)">{{ currentRow.entryOuterDiameter }}</el-descriptions-item>
+                  <el-descriptions-item label="延伸率(%)">{{ currentRow.spmElongation }}</el-descriptions-item>
+                  <el-descriptions-item label="SPM轧制力">{{ currentRow.spmRollforce }}</el-descriptions-item>
+                </el-descriptions>
+              </el-tab-pane>
+              
+              <!-- 工艺参数标签页 -->
+              <el-tab-pane label="工艺参数" name="process" v-loading="setupLoading">
+                <setup-pane v-if="!setupLoading && setupForm" :setup-form="setupForm" />
+                <div v-if="!setupLoading && !setupForm" class="empty-text">
+                  暂无工艺参数数据
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </div>
+        <div v-else class="empty-section">
+          <i class="el-icon-info"></i>
+          <p>请从左侧选择一个计划查看详情</p>
         </div>
       </el-col>
     </el-row>
@@ -159,6 +314,7 @@
 import { listPlan, delPlan, addPlan, updatePlan } from "@/api/l2/plan";
 import { getSteelGradeList } from '@/api/l2/steelGrade'
 import { addSetup, listSetup } from '@/api/business/setup'
+import { getTrackMatPosition } from '@/api/l2/track'
 
 import SetupForm from './components/setupForm.vue'
 import SetupPane from './components/setupPane.vue'
@@ -208,7 +364,11 @@ export default {
   },
   data() {
     return {
+      queueTab: 'pending',
+      activeTab: 'basic',
+      setupForm: undefined,
       setupLoading: false,
+      matMapList: [], // 物料位置映射列表
       // 查询表单参数（与后端列表接口参数对齐）
       // setupForm: {
       //   // 全线张力
@@ -376,10 +536,52 @@ export default {
       steelGradeList: [],
     };
   },
+  computed: {
+    // 正在生产的计划 - 顶部独立显示用
+    productingPlans() {
+      return this.planList.filter(plan => plan.status === 'PRODUCING');
+    },
+    // 生产队列 - 只包含生产中和待生产，按优先级排序
+    pendingPlans() {
+      const statusPriority = {
+        'PRODUCING': 1,
+        'READY': 2,
+        'NEW': 3
+      };
+      
+      return this.planList
+        .filter(plan => ['PRODUCING', 'READY', 'NEW'].includes(plan.status))
+        .sort((a, b) => {
+          const priorityA = statusPriority[a.status] || 999;
+          const priorityB = statusPriority[b.status] || 999;
+          return priorityA - priorityB;
+        });
+    },
+    // 在开卷机上 (ONLINE)
+    onlinePlans() {
+      return this.planList.filter(plan => plan.status === 'ONLINE');
+    },
+    // 历史记录 - 只显示已完成的计划，按完成时间倒序
+    historyPlans() {
+      return this.planList
+        .filter(plan => plan.status === 'PRODUCT')
+        .sort((a, b) => {
+          // 按结束时间倒序排列（最新完成的在前）
+          if (a.endDate && b.endDate) {
+            return new Date(b.endDate) - new Date(a.endDate);
+          }
+          if (a.createTime && b.createTime) {
+            return new Date(b.createTime) - new Date(a.createTime);
+          }
+          return 0;
+        });
+    }
+  },
   created() {
     // 组件创建时自动加载计划列表
     this.getList();
     this.fetchSteelGradeList();
+    this.fetchMatMapList();
   },
   methods: {
     parseTime, // 挂载日期格式化方法到实例
@@ -388,35 +590,106 @@ export default {
         this.steelGradeList = res.data
       })
     },
+    // 获取物料位置映射
+    fetchMatMapList() {
+      getTrackMatPosition().then(res => {
+        if (res.data && res.data.matMapList) {
+          this.matMapList = res.data.matMapList
+          console.log('获取物料位置映射：', this.matMapList.length, '个设备')
+        }
+      }).catch(err => {
+        console.error('获取物料位置失败：', err)
+      })
+    },
     handleSetupInput(data) {
       this.setupForm = data
     },
+    // 获取计划的当前位置
+    getPlanPosition(plan) {
+      if (!this.matMapList || this.matMapList.length === 0) {
+        return null
+      }
+      
+      // 从matMapList中查找匹配的位置
+      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)
+      )
+      
+      return position
+    },
     // 获取计划列表数据（支持传入清理后的查询参数）
-    getList(cleanParams) {
+    async getList(cleanParams) {
       this.loading = true; // 开启表格加载
       const params = cleanParams || this.queryParams; // 优先使用传入参数（如重置/查询）
 
-      listPlan(params)
-        .then((response) => {
-          // 关闭加载状态
-          this.loading = false;
-          this.btnLoading = false;
-
-          // 处理列表数据（格式转换、避免ID精度丢失）
+      try {
+        // 如果没有指定状态，并行查询需要的状态然后合并
+        if (!params.status) {
+          // 只查询：生产中、就绪、新建、已完成
+          const statuses = ['PRODUCING', 'READY', 'NEW', 'PRODUCT']
+          const allPlans = []
+          
+          // 并行查询所有状态
+          const requests = statuses.map(status => 
+            listPlan({ ...params, status }).catch(err => {
+              console.warn(`查询${status}状态失败:`, err)
+              return { data: [] }
+            })
+          )
+          
+          const results = await Promise.all(requests)
+          
+          // 合并所有查询结果
+          results.forEach(res => {
+            if (res.data) {
+              allPlans.push(...res.data)
+            }
+          })
+          
+          // 去重（根据id）
+          const uniquePlans = Array.from(
+            new Map(allPlans.map(plan => [plan.id, plan])).values()
+          )
+          
+          // 处理列表数据
+          this.planList = uniquePlans.map((item) => {
+            return {
+              ...item,
+              deleteLoading: false,
+            };
+          });
+          
+          console.log('查询到的总计划数：', uniquePlans.length, '条')
+          console.log('各状态分布：', {
+            PRODUCING: uniquePlans.filter(p => p.status === 'PRODUCING').length,
+            READY: uniquePlans.filter(p => p.status === 'READY').length,
+            NEW: uniquePlans.filter(p => p.status === 'NEW').length,
+            PRODUCT: uniquePlans.filter(p => p.status === 'PRODUCT').length
+          })
+        } else {
+          // 如果指定了状态，直接查询
+          const response = await listPlan(params)
           this.planList = response.data.map((item) => {
             return {
               ...item,
-              deleteLoading: false, // 行删除按钮加载状态
+              deleteLoading: false,
             };
           });
-        })
-        .catch((error) => {
+        }
+        
+        // 关闭加载状态
+        this.loading = false;
+        this.btnLoading = false;
+      } catch (error) {
           // 异常处理：关闭加载+提示错误
           this.loading = false;
           this.btnLoading = false;
           console.error("获取计划列表失败:", error);
           this.$message.error("获取数据失败，请重试");
-        });
+      }
     },
 
     // 处理查询操作（校验参数+调用列表接口）
@@ -731,38 +1004,671 @@ export default {
 </script>
 
 <style scoped>
-.plan-management {
+/* 工业风浅色主题配色 */
+.plan-management-industrial {
   min-height: calc(100vh - 120px);
+  background: #f5f7fa;
+  padding: 20px;
+  color: #2c3e50;
 }
 
-/* 查询表单样式 */
-::v-deep .el-form--inline .el-form-item {
-  margin-right: 16px;
-  margin-bottom: 16px;
+/* 工具栏 */
+.toolbar {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #ffffff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  gap: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-/* 表格样式 */
-::v-deep .el-table {
-  margin-top: 16px;
+/* 区域标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 15px;
+  background: #ffffff;
+  border-left: 4px solid #409eff;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 15px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #303133;
+}
+
+.section-header i {
+  font-size: 18px;
+}
+
+.section-header .badge {
+  margin-left: auto;
+}
+
+/* 正在生产区 */
+.producing-section {
+  margin-bottom: 20px;
+}
+
+.producing-section .section-header {
+  border-left-color: #67c23a;
+  background: #f0f9ff;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.9; }
+}
+
+.producing-cards {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.producing-card {
+  flex: 1;
+  min-width: 300px;
+  background: #ffffff !important;
+  border: 2px solid #67c23a !important;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
+}
+
+.producing-card:hover,
+.producing-card.active {
+  border-color: #67c23a !important;
+  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
+  transform: translateY(-2px);
+}
+
+.producing-card ::v-deep .el-card__body {
+  padding: 15px;
+  background: #ffffff;
+  color: #303133;
+}
+
+.card-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.status-text {
+  font-weight: 600;
+  color: #67c23a;
+}
+
+.card-position {
+  margin-left: auto;
+  padding: 4px 8px;
+  background: #67c23a;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  animation: position-pulse 2s infinite;
+}
+
+.card-position i {
+  font-size: 12px;
+}
+
+.card-content {
+  margin-bottom: 12px;
+}
+
+.card-main {
+  margin-bottom: 10px;
+}
+
+.plan-id {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409eff;
+  margin-bottom: 5px;
+}
+
+.coil-id {
+  font-size: 14px;
+  color: #606266;
+}
+
+.card-details {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+.detail-item {
+  display: flex;
+  gap: 5px;
+  font-size: 12px;
+}
+
+.detail-item .label {
+  color: #909399;
+}
+
+.detail-item .value {
+  color: #303133;
+  font-weight: 500;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+  padding-top: 10px;
+  border-top: 1px solid #e4e7ed;
+}
+
+/* 主内容区 */
+.main-content {
+  margin-bottom: 20px;
+}
+
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 700px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 700px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+/* 队列标签页区域 */
+.queue-tabs-section {
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+}
+
+.queue-tabs-section ::v-deep .el-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__header {
+  margin: 0;
+  background: #f5f7fa;
+  padding: 0 15px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__nav-wrap {
+  padding: 10px 0;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__item {
+  height: 36px;
+  line-height: 36px;
+  font-size: 13px;
+  color: #606266;
+  border: none;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__item.is-active {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__active-bar {
+  height: 2px;
+  background-color: #409eff;
+}
+
+.queue-tabs-section ::v-deep .el-tabs__content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.queue-tabs-section ::v-deep .el-tab-pane {
+  height: 100%;
+}
+
+.tab-badge {
+  margin-left: 5px;
+}
+
+/* 计划列表 */
+.plan-list {
+  height: 100%;
+  overflow-y: auto;
+  padding: 10px;
+  background: #fafafa;
+}
+
+/* 统一的计划项样式 */
+.plan-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #ffffff;
+  border-left: 3px solid #409eff;
+  border: 1px solid #e4e7ed;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.plan-item:hover,
+.plan-item.active {
+  background: #ecf5ff;
+  border-left-color: #409eff;
+  border-left-width: 3px;
+  transform: translateX(5px);
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+/* 生产中项 */
+.plan-item-producing {
+  border-left-color: #67c23a;
+}
+
+.plan-item-producing:hover,
+.plan-item-producing.active {
+  background: #f0f9ff;
+  border-left-color: #67c23a;
+  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+}
+
+/* 在开卷机项 */
+.plan-item-online {
+  border-left-color: #e6a23c;
+}
+
+.plan-item-online:hover,
+.plan-item-online.active {
+  background: #fdf6ec;
+  border-left-color: #e6a23c;
+  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.25);
+}
+
+/* 历史记录项 */
+.plan-item-history {
+  border-left-color: #909399;
+}
+
+.plan-item-history:hover,
+.plan-item-history.active {
+  background: #f5f7fa;
+  border-left-color: #909399;
+  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.2);
+}
+
+.plan-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.plan-content {
+  flex: 1;
+}
+
+.plan-main {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 5px;
+}
+
+.plan-no {
+  font-weight: 600;
+  color: #409eff;
+}
+
+.coil-no {
+  color: #303133;
+}
+
+.plan-info {
+  display: flex;
+  gap: 15px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.plan-position {
+  margin-top: 8px;
+  padding: 4px 8px;
+  background: #67c23a;
+  color: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  animation: position-pulse 2s infinite;
+}
+
+.plan-position i {
+  font-size: 12px;
+}
+
+@keyframes position-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.2);
+  }
+}
+
+.plan-time {
+  margin-top: 5px;
+  font-size: 12px;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.plan-actions {
+  display: flex;
+  gap: 5px;
+}
+
+/* 状态点 */
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.status-producing {
+  background: #67c23a;
+  box-shadow: 0 0 10px rgba(103, 194, 58, 0.8);
+  animation: blink-green 1.2s infinite;
+}
+
+.status-pending {
+  background: #409eff;
+  box-shadow: 0 0 6px rgba(64, 158, 255, 0.5);
+  animation: blink 1.5s infinite;
+}
+
+.status-online {
+  background: #e6a23c;
+  box-shadow: 0 0 6px rgba(230, 162, 60, 0.5);
+  animation: blink 1.5s infinite;
+}
+
+.status-history {
+  background: #909399;
+  box-shadow: 0 0 6px rgba(144, 147, 153, 0.5);
+  animation: none;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+@keyframes blink-green {
+  0%, 100% { 
+    opacity: 1;
+    box-shadow: 0 0 10px rgba(103, 194, 58, 0.8);
+  }
+  50% { 
+    opacity: 0.6;
+    box-shadow: 0 0 15px rgba(103, 194, 58, 1);
+  }
+}
+
+/* 右侧详情面板 */
+.detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.detail-card {
+  background: #ffffff !important;
+  border: 1px solid #dcdfe6 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+.detail-card ::v-deep .el-card__header {
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+  padding: 12px 15px;
+}
+
+.detail-card ::v-deep .el-card__body {
+  background: #ffffff;
+  padding: 15px;
+}
+
+.card-header {
+  color: #303133;
+  font-weight: 600;
+}
+
+/* 统一的详情卡片 */
+.detail-card-unified {
+  background: #ffffff !important;
+  border: 1px solid #dcdfe6 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+.detail-card-unified ::v-deep .el-card__body {
+  padding: 0;
+}
+
+.detail-card-unified ::v-deep .el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+
+.detail-card-unified ::v-deep .el-tabs__content {
+  padding: 15px;
+}
+
+/* Element UI 组件浅色主题覆盖 */
+::v-deep .el-descriptions {
+  color: #303133;
+}
+
+::v-deep .el-descriptions-item__label {
+  background: #f5f7fa !important;
+  color: #909399 !important;
+}
+
+::v-deep .el-descriptions-item__content {
+  background: #ffffff !important;
+  color: #303133 !important;
+}
+
+::v-deep .el-tabs__header {
+  background: #f5f7fa;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+::v-deep .el-tabs__nav {
+  border: none;
+}
+
+::v-deep .el-tabs__item {
+  color: #606266;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #409eff;
+}
+
+::v-deep .el-tabs__active-bar {
+  background-color: #409eff;
+}
+
+::v-deep .el-tabs__content {
+  color: #303133;
+}
+
+/* 空状态 */
+.empty-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  background: #ffffff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: #909399;
+}
+
+.empty-section i {
+  font-size: 48px;
+  margin-bottom: 15px;
+  color: #c0c4cc;
+}
+
+.empty-text {
+  text-align: center;
+  color: #909399;
+  padding: 20px;
+}
+
+/* 弹窗样式 */
+::v-deep .el-dialog {
+  background: #ffffff;
+  border: 1px solid #dcdfe6;
+}
+
+::v-deep .el-dialog__header {
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+::v-deep .el-dialog__title {
+  color: #303133;
 }
 
-/* 弹窗表单样式 */
 ::v-deep .el-dialog__body {
   max-height: 60vh;
   overflow-y: auto;
   padding: 16px;
+  background: #ffffff;
+}
+
+::v-deep .el-form-item__label {
+  color: #606266;
+}
+
+::v-deep .el-input__inner {
+  background: #ffffff;
+  border-color: #dcdfe6;
+  color: #606266;
+}
+
+::v-deep .el-input__inner:focus {
+  border-color: #409eff;
+}
+
+::v-deep .el-select .el-input__inner {
+  background: #ffffff;
+  color: #606266;
 }
 
 ::v-deep .el-divider--horizontal {
   margin: 16px 0;
+  background: #e4e7ed;
+}
+
+::v-deep .el-divider__text {
+  background: #ffffff;
+  color: #409eff;
+  font-weight: 600;
 }
 
 ::v-deep .el-form-item {
   margin-bottom: 16px;
 }
 
-/* 操作列样式 */
+::v-deep .el-checkbox__label {
+  color: #606266;
+}
+
 .dialog-footer {
   text-align: right;
 }
+
+/* 滚动条样式 */
+.left-panel::-webkit-scrollbar,
+.right-panel::-webkit-scrollbar,
+.plan-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.left-panel::-webkit-scrollbar-track,
+.right-panel::-webkit-scrollbar-track,
+.plan-list::-webkit-scrollbar-track {
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.left-panel::-webkit-scrollbar-thumb,
+.right-panel::-webkit-scrollbar-thumb,
+.plan-list::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 4px;
+}
+
+.left-panel::-webkit-scrollbar-thumb:hover,
+.right-panel::-webkit-scrollbar-thumb:hover,
+.plan-list::-webkit-scrollbar-thumb:hover {
+  background: #909399;
+}
+
+/* 响应式适配 */
+@media (max-width: 1400px) {
+  .main-content .left-panel {
+    flex: 0 0 40%;
+  }
+  .main-content .right-panel {
+    flex: 0 0 60%;
+  }
+}
+
+@media (max-width: 992px) {
+  .producing-card {
+    min-width: 100%;
+  }
+  
+  .card-details {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/apps/l2/src/views/l2/track/rect.vue b/apps/l2/src/views/l2/track/rect.vue
index ebfb2ed..9e6eeb8 100644
--- a/apps/l2/src/views/l2/track/rect.vue
+++ b/apps/l2/src/views/l2/track/rect.vue
@@ -11,45 +11,109 @@
 
         <!-- 生产计划队列 -->
         <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 class="queue-header">
+            <div class="queue-title">
+              <i class="el-icon-s-order"></i> 生产计划
+            </div>
+            <div class="queue-tabs">
               <div 
-                v-for="(plan, index) in planQueue" 
-                :key="plan.id || plan.planid || index"
-                class="plan-item"
-                :class="getPlanItemClass(plan)"
-                @click="selectPlan(plan)"
+                class="queue-tab" 
+                :class="{ active: activeQueueTab === 'current' }"
+                @click="activeQueueTab = 'current'"
               >
-                <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>
+                <i class="el-icon-s-flag"></i>
+                <span>当前计划</span>
+                <el-badge :value="currentPlans.length" class="tab-badge" v-if="currentPlans.length > 0" />
+              </div>
+              <div 
+                class="queue-tab" 
+                :class="{ active: activeQueueTab === 'all' }"
+                @click="activeQueueTab = 'all'"
+              >
+                <i class="el-icon-document"></i>
+                <span>全部计划</span>
+                <el-badge :value="planQueue.length" class="tab-badge" v-if="planQueue.length > 0" />
               </div>
             </div>
           </div>
+          
+          <!-- 当前计划内容 -->
+          <div v-if="activeQueueTab === 'current'">
+              <div class="plan-queue-list">
+                <el-empty v-if="currentPlans.length === 0" description="暂无当前计划" :image-size="80"></el-empty>
+                <div v-else class="plan-items">
+                  <div 
+                    v-for="(plan, index) in currentPlans" 
+                    :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>
+          
+          <!-- 全部计划内容 -->
+          <div v-if="activeQueueTab === 'all'">
+              <div class="plan-queue-list">
+                <el-empty v-if="planQueue.length === 0" description="暂无生产计划" :image-size="80"></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>
         </div>
 
         <!-- WebSocket 连接状态指示 -->
@@ -203,6 +267,18 @@
               <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>
@@ -502,6 +578,9 @@ export default {
       // 加载状态
       isLoading: true,
       
+      // 计划队列tab
+      activeQueueTab: 'all',
+      
       // 生产计划队列
       planQueue: [],
       
@@ -561,6 +640,40 @@ export default {
     }
   },
   computed: {
+    // 当前计划（ONLINE 或 PRODUCING状态）
+    currentPlans() {
+      return this.planQueue.filter(plan => 
+        ['ONLINE', 'PRODUCING', 'PRODUCTING'].includes(plan.status)
+      )
+    },
+    
+    // 显示的计划列表（根据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': '钢卷上线',
@@ -884,6 +997,12 @@ export default {
       const autoFlagText = data.autoFlag === 1 ? '[手动]' : '[自动]'
       const config = this.getOperationConfig(data.operation)
       
+      // 检测到上线、生产中、生产完成等关键操作时，刷新生产计划队列
+      if (['ONLINE', 'PRODUCING', 'PRODUCT'].includes(data.operation)) {
+        console.log(`检测到${operationText}操作，刷新生产计划队列...`)
+        this.refreshPlanQueue()
+      }
+      
       // 右上角通知（所有操作都显示）
       this.$notify({
         title: `${config.icon} ${config.title}`,
@@ -1026,6 +1145,66 @@ export default {
 
     // ============ API 方法 ============
     
+    // 刷新生产计划队列（独立方法，可被信号触发）
+    async refreshPlanQueue() {
+      try {
+        // 由于后端默认只查NEW和READY，需要分别查询多个状态然后合并
+        const statuses = ['ONLINE', 'PRODUCING', 'READY', 'NEW']
+        const allPlans = []
+        
+        // 并行查询所有状态
+        const requests = statuses.map(status => 
+          getPlanQueue({ status }).catch(err => {
+            console.warn(`查询${status}状态失败:`, err)
+            return { code: 500, data: [] }
+          })
+        )
+        
+        const results = await Promise.all(requests)
+        
+        // 合并所有查询结果
+        results.forEach((res, index) => {
+          if (res.code === 200 && res.data) {
+            allPlans.push(...res.data)
+          }
+        })
+        
+        // 去重（根据id）
+        const uniquePlans = Array.from(
+          new Map(allPlans.map(plan => [plan.id, plan])).values()
+        )
+        
+        // 定义状态优先级
+        const statusPriority = {
+          'PRODUCING': 1,
+          'PRODUCTING': 1,
+          'ONLINE': 2,
+          'READY': 3,
+          'NEW': 4
+        }
+        
+        // 排序
+        const sortedPlans = uniquePlans.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('显示的计划：', this.planQueue.length, '条', this.planQueue)
+        
+      } catch (err) {
+        console.error('获取生产计划队列失败：', err)
+        this.planQueue = this.generateMockPlanQueue()
+      }
+    },
+    
     async fetchData() {
       try {
         this.isLoading = true
@@ -1033,35 +1212,11 @@ export default {
         
         // 只在 WebSocket 未连接时使用 API 数据
         if (!this.socketStatus.matmap) {
-        this.matMapList = res.data.matMapList || []
+          this.matMapList = res.data.matMapList || []
         }
         
         // 获取生产计划队列
-        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()
-        }
+        await this.refreshPlanQueue()
         
       } catch (err) {
         console.error('获取钢卷数据失败：', err)
@@ -1095,21 +1250,30 @@ export default {
       const statusMap = {
         NEW: '新建',
         READY: '就绪',
+        ONLINE: '上线',
         PRODUCING: '生产中',
-        PRODUCT: '已完成',
-        COMPLETED: '已完成'
+        PRODUCT: '生产完成',
+        PAY_OVER: '甩尾',
+        UNLOAD: '卸卷',
+        COMPLETED: '已完成',
+        CANCELLED: '已取消'
       }
-      return statusMap[status] || status || '待处理'
+      return statusMap[status] || status || '未知'
     },
 
     // 获取计划状态标签类型
     getPlanStatusTagType(status) {
       const typeMap = {
-        NEW: '',
-        READY: 'warning',
+        NEW: 'info',
+        READY: 'primary',
+        ONLINE: 'warning',
         PRODUCING: 'success',
+        PRODUCTING: 'success',  // 兼容带T的写法
         PRODUCT: 'info',
-        COMPLETED: 'info'
+        PAY_OVER: '',
+        UNLOAD: 'danger',
+        COMPLETED: 'info',
+        CANCELLED: 'danger'
       }
       return typeMap[status] || 'info'
     },
@@ -1118,8 +1282,11 @@ export default {
     getPlanItemClass(plan) {
       const classes = []
       
-      if (plan.status === 'PRODUCING') {
-        classes.push('plan-active')
+      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')
@@ -1133,7 +1300,8 @@ export default {
 
     // 获取计划序号样式类
     getPlanOrderClass(status) {
-      if (status === 'PRODUCING') return 'order-producing'
+      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 ''
@@ -1168,6 +1336,23 @@ export default {
         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)
+        }
       }
     },
 
@@ -1828,10 +2013,72 @@ export default {
 /* 生产计划队列面板 */
 .plan-queue-panel {
   background: #fff;
-  border-radius: 4px;
-  padding: 15px;
+  border-radius: 8px;
   margin-bottom: 15px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+/* 队列头部 */
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 15px;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.queue-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.queue-title i {
+  font-size: 16px;
+  color: #409eff;
+}
+
+/* Tab切换按钮组 */
+.queue-tabs {
+  display: flex;
+  gap: 0;
+}
+
+.queue-tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 13px;
+  color: #606266;
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  user-select: none;
+}
+
+.queue-tab:hover {
+  color: #409eff;
+}
+
+.queue-tab.active {
+  color: #409eff;
+  font-weight: 600;
+  border-bottom-color: #409eff;
+}
+
+.queue-tab i {
+  font-size: 13px;
+}
+
+.queue-tab .tab-badge {
+  margin-left: 4px;
 }
 
 .plan-queue-panel .panel-title {
@@ -1850,14 +2097,15 @@ export default {
 }
 
 .plan-queue-list {
-  max-height: 240px;
-  overflow-y: auto;
+  max-height: none;
+  overflow-y: visible;
+  padding: 15px 20px;
 }
 
 .plan-items {
   display: flex;
   gap: 10px;
-  overflow-x: auto;
+  flex-wrap: wrap;
   padding-bottom: 5px;
 }
 
@@ -1880,14 +2128,20 @@ export default {
   transform: translateY(-2px);
 }
 
-.plan-item.plan-active {
+.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: #fdf6ec;
-  border-color: #e6a23c;
+  background: #ecf5ff;
+  border-color: #409eff;
 }
 
 .plan-item.plan-selected {
@@ -1896,6 +2150,18 @@ export default {
   box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
 }
 
+/* 绿色闪烁动画 */
+@keyframes pulse-green {
+  0%, 100% {
+    border-color: #67c23a;
+    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
+  }
+  50% {
+    border-color: #85ce61;
+    box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.6), 0 0 15px rgba(103, 194, 58, 0.4);
+  }
+}
+
 .plan-order {
   width: 28px;
   height: 28px;
@@ -1912,16 +2178,33 @@ export default {
 
 .plan-order.order-producing {
   background: #67c23a;
+  animation: blink-green-dot 1.2s infinite;
+}
+
+.plan-order.order-online {
+  background: #e6a23c;
 }
 
 .plan-order.order-ready {
-  background: #e6a23c;
+  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;
@@ -2050,6 +2333,55 @@ export default {
   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;