From b804d88d626d1df675a3278c859b37758c55432b Mon Sep 17 00:00:00 2001
From: ZengTao <2773468879@qq.com>
Date: 星期四, 18 十二月 2025 13:42:06 +0800
Subject: [PATCH] 1、增加流程卡进度查询,可根据工程号,流程卡号,玻璃id查看进度情况 2、钢化界面增加颜色对应注释,版图增加落架顺序 3、两个大理片界面笼子上色块显示修改为根据玻璃宽度显示 4、中空大理片右侧缺片情况显示优化 5、是否除膜从领取工程取消,在中空领取任务时选择除膜膜系(不除膜时不选择膜系),当配方中是需要除膜时并且选择的膜系与小片膜系一样时发送除膜信息 6、中空领取任务界面流程卡数量不等于已配对数量时高亮显示 7、磨边队列当后面玻璃磨边完成扫码但前面玻璃还未扫到码时高亮显示

---
 UI-Project/src/views/PurchaseReturn/purchaseReturn.vue | 1369 ++++++++++++++++++++++++++++++++---------------------------
 1 files changed, 740 insertions(+), 629 deletions(-)

diff --git a/UI-Project/src/views/PurchaseReturn/purchaseReturn.vue b/UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
index b7975d0..f621ec7 100644
--- a/UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
+++ b/UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import request from "@/utils/request"
-import {host, WebSocketHost} from '@/utils/constants'
-import {ElMessage} from 'element-plus'
-import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
-import {useI18n} from 'vue-i18n'
-import {useRouter} from 'vue-router'
-const {t} = useI18n()
+import { host, WebSocketHost } from '@/utils/constants'
+import { ElMessage } from 'element-plus'
+import { closeWebSocket, initializeWebSocket } from '@/utils/WebSocketService';
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const { t } = useI18n()
 let language = ref(localStorage.getItem('lang') || 'zh')
 const dialogFormVisible = ref(false)
 const dialogFormVisiblea = ref(true)
@@ -37,74 +37,74 @@
 const router = useRouter()
 const currentGlassId = ref(null);
 const currenttemperingFeedSequence = ref(null);
-onMounted(async () => {  
-  try {  
+onMounted(async () => {
+  try {
     const response = await request.post('/loadGlass/damage/selectDamagePrint', {
-    type: 9,
-    workingProcedure: '閽㈠寲',
+      type: 9,
+      workingProcedure: '閽㈠寲',
     })
-    if (response.code === 200) {  
-          tableData.value = response.data
-    } else {  
+    if (response.code === 200) {
+      tableData.value = response.data
+    } else {
       ElMessage.warning(response.message)
-    }  
-  } catch (error) {  
-  }  
-}); 
+    }
+  } catch (error) {
+  }
+});
 // 鏂规硶瀹氫箟
 function handlePageChange(page: number) {
   currentPage.value = page;
 }
 const socketUrl = `ws://${window.ipConfig.serverUrl}/api/temperingGlass/api/talk/temperingGlass`;
-const handleMessage = (data) => {  
+const handleMessage = (data) => {
   // 杩涚倝涓彸
-  if (data.intoGlass2 && data.intoGlass2.length > 0) {  
-    const newGlassIds = new Set(data.intoGlass2[0].map(rect => rect.glassId));  
-    const existingRects = adjustedRects2.value.filter(rect => newGlassIds.has(rect.glassId));  
-    const newRects = data.intoGlass2[0].map(rect => {  
-      const scaleFactor =  1621.78/6000; 
-      const scaleFactorY =  700/2800; 
-      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; 
-  let newX = rect.yCoordinate; 
+  if (data.intoGlass2 && data.intoGlass2.length > 0) {
+    const newGlassIds = new Set(data.intoGlass2[0].map(rect => rect.glassId));
+    const existingRects = adjustedRects2.value.filter(rect => newGlassIds.has(rect.glassId));
+    const newRects = data.intoGlass2[0].map(rect => {
+      const scaleFactor = 1621.78 / 6000;
+      const scaleFactorY = 700 / 2800;
+      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta, widtha, heighta;;
+      let newX = rect.yCoordinate;
       if (rect.width < rect.height) {
         widtha = rect.height;
         heighta = rect.width;
-      }else {
+      } else {
         widtha = rect.width;
         heighta = rect.height;
       }
-  if (rect.angle === 0) {  
-    adjustedWidth = widtha * scaleFactor;  
-    adjustedHeight = heighta * scaleFactorY;
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + widtha); 
-    } else {  
-    adjustedWidth = heighta * scaleFactor;  
-    adjustedHeight = widtha * scaleFactorY;  
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + heighta);  
-  }  
-  return {  
-    ...rect, 
-    x: newX * scaleFactor,  
-    y: rect.xCoordinate * scaleFactorY,  
-    width: adjustedWidth,  
-    height: adjustedHeight,  
-    widtha: rect.width, 
-    heighta: rect.height,
-  }
-    }); 
+      if (rect.angle === 0) {
+        adjustedWidth = widtha * scaleFactor;
+        adjustedHeight = heighta * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + widtha);
+      } else {
+        adjustedWidth = heighta * scaleFactor;
+        adjustedHeight = widtha * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + heighta);
+      }
+      return {
+        ...rect,
+        x: newX * scaleFactor,
+        y: rect.xCoordinate * scaleFactorY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+        widtha: rect.width,
+        heighta: rect.height,
+      }
+    });
     // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
-    adjustedRects2.value = existingRects.map(oldRect => {  
-      const newRect = newRects.find(r => r.glassId === oldRect.glassId);  
-      if (newRect) {  
-        return { ...oldRect, ...newRect, isActive: oldRect.isActive };  
-      }  
+    adjustedRects2.value = existingRects.map(oldRect => {
+      const newRect = newRects.find(r => r.glassId === oldRect.glassId);
+      if (newRect) {
+        return { ...oldRect, ...newRect, isActive: oldRect.isActive };
+      }
       return oldRect; // 濡傛灉鏃х煩褰㈠湪鏂版暟鎹腑涓嶅瓨鍦紝浣嗕繚鐣欏湪newGlassIds涓紝鍒欎繚鐣欏師鏍�  
-    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));  
-  }  
+    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));
+  }
   // if (data.intoGlass2 && data.intoGlass2.length > 0) {  
   //   // 鎻愬彇鏂扮殑鐭╁舰ID  
   //   const newGlassIds = new Set(data.intoGlass2[0].map(rect => rect.glassId));  
@@ -159,56 +159,56 @@
     adjustedRects2.value = []
   }
   // 杩涚倝涓乏
-  if (data.intoGlass && data.intoGlass.length > 0) {  
-    const newGlassIds = new Set(data.intoGlass[0].map(rect => rect.glassId));  
-    const existingRects = adjustedRects1.value.filter(rect => newGlassIds.has(rect.glassId));  
-    const newRects = data.intoGlass[0].map(rect => {  
-      const scaleFactor =  1621.78/6000; 
-      const scaleFactorY =  700/2800; 
-      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; 
-  let newX = rect.yCoordinate; 
+  if (data.intoGlass && data.intoGlass.length > 0) {
+    const newGlassIds = new Set(data.intoGlass[0].map(rect => rect.glassId));
+    const existingRects = adjustedRects1.value.filter(rect => newGlassIds.has(rect.glassId));
+    const newRects = data.intoGlass[0].map(rect => {
+      const scaleFactor = 1621.78 / 6000;
+      const scaleFactorY = 700 / 2800;
+      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta, widtha, heighta;;
+      let newX = rect.yCoordinate;
       if (rect.width < rect.height) {
         widtha = rect.height;
         heighta = rect.width;
-      }else {
+      } else {
         widtha = rect.width;
         heighta = rect.height;
       }
-  if (rect.angle === 0) {  
-    adjustedWidth = widtha * scaleFactor;  
-    adjustedHeight = heighta * scaleFactorY;
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + widtha); 
-    } else {  
-    adjustedWidth = heighta * scaleFactor;  
-    adjustedHeight = widtha * scaleFactorY;  
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + heighta);  
-  }  
-  return {  
-    ...rect, 
-    x: newX * scaleFactor,  
-    y: rect.xCoordinate * scaleFactorY,  
-    width: adjustedWidth,  
-    height: adjustedHeight,  
-    widtha: rect.width, 
-    heighta: rect.height,
-  }
-    }); 
+      if (rect.angle === 0) {
+        adjustedWidth = widtha * scaleFactor;
+        adjustedHeight = heighta * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + widtha);
+      } else {
+        adjustedWidth = heighta * scaleFactor;
+        adjustedHeight = widtha * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + heighta);
+      }
+      return {
+        ...rect,
+        x: newX * scaleFactor,
+        y: rect.xCoordinate * scaleFactorY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+        widtha: rect.width,
+        heighta: rect.height,
+      }
+    });
     // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
-    adjustedRects1.value = existingRects.map(oldRect => {  
-      const newRect = newRects.find(r => r.glassId === oldRect.glassId);  
-      if (newRect) {  
-        return { ...oldRect, ...newRect, isActive: oldRect.isActive };  
-      }  
+    adjustedRects1.value = existingRects.map(oldRect => {
+      const newRect = newRects.find(r => r.glassId === oldRect.glassId);
+      if (newRect) {
+        return { ...oldRect, ...newRect, isActive: oldRect.isActive };
+      }
       return oldRect; // 濡傛灉鏃х煩褰㈠湪鏂版暟鎹腑涓嶅瓨鍦紝浣嗕繚鐣欏湪newGlassIds涓紝鍒欎繚鐣欏師鏍�  
-    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));  
-  }  
+    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));
+  }
   // if (data.intoGlass && data.intoGlass.length > 0) {
   //   console.log(data.intoGlass);
-    
+
   //   const newGlassIds = new Set(data.intoGlass[0].map(rect => rect.glassId));
   //   const existingRects = adjustedRects1.value.filter(rect => newGlassIds.has(rect.glassId));
   //   const newRects = data.intoGlass[0].map(rect => {
@@ -259,103 +259,103 @@
     adjustedRects1.value = []
   }
   // 杩涚倝鍓�
-  if (data.waitingGlass && data.waitingGlass.length > 0) {  
-    const newGlassIds = new Set(data.waitingGlass[0].map(rect => rect.glassId));  
-    const existingRects = adjustedRectsa.value.filter(rect => newGlassIds.has(rect.glassId));  
-    const newRects = data.waitingGlass[0].map(rect => {  
-      const scaleFactor =  1621.78/6000; 
-      const scaleFactorY =  700/2800; 
-      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; 
-  let newX = rect.yCoordinate; 
+  if (data.waitingGlass && data.waitingGlass.length > 0) {
+    const newGlassIds = new Set(data.waitingGlass[0].map(rect => rect.glassId));
+    const existingRects = adjustedRectsa.value.filter(rect => newGlassIds.has(rect.glassId));
+    const newRects = data.waitingGlass[0].map(rect => {
+      const scaleFactor = 1621.78 / 6000;
+      const scaleFactorY = 700 / 2800;
+      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta, widtha, heighta;;
+      let newX = rect.yCoordinate;
       if (rect.width < rect.height) {
         widtha = rect.height;
         heighta = rect.width;
-      }else {
+      } else {
         widtha = rect.width;
         heighta = rect.height;
       }
-  if (rect.angle === 0) {  
-    adjustedWidth = widtha * scaleFactor;  
-    adjustedHeight = heighta * scaleFactorY;
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + widtha); 
-    } else {  
-    adjustedWidth = heighta * scaleFactor;  
-    adjustedHeight = widtha * scaleFactorY;  
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + heighta);  
-  }  
-  return {  
-    ...rect, 
-    x: newX * scaleFactor,  
-    y: rect.xCoordinate * scaleFactorY,  
-    width: adjustedWidth,  
-    height: adjustedHeight,  
-    widtha: rect.width, 
-    heighta: rect.height,
-  }
-    }); 
+      if (rect.angle === 0) {
+        adjustedWidth = widtha * scaleFactor;
+        adjustedHeight = heighta * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + widtha);
+      } else {
+        adjustedWidth = heighta * scaleFactor;
+        adjustedHeight = widtha * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + heighta);
+      }
+      return {
+        ...rect,
+        x: newX * scaleFactor,
+        y: rect.xCoordinate * scaleFactorY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+        widtha: rect.width,
+        heighta: rect.height,
+      }
+    });
     // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
-    adjustedRectsa.value = existingRects.map(oldRect => {  
-      const newRect = newRects.find(r => r.glassId === oldRect.glassId);  
-      if (newRect) {  
-        return { ...oldRect, ...newRect, isActive: oldRect.isActive };  
-      }  
+    adjustedRectsa.value = existingRects.map(oldRect => {
+      const newRect = newRects.find(r => r.glassId === oldRect.glassId);
+      if (newRect) {
+        return { ...oldRect, ...newRect, isActive: oldRect.isActive };
+      }
       return oldRect; // 濡傛灉鏃х煩褰㈠湪鏂版暟鎹腑涓嶅瓨鍦紝浣嗕繚鐣欏湪newGlassIds涓紝鍒欎繚鐣欏師鏍�  
-    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));  
-  }  
+    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));
+  }
   else if (data.waitingGlass == null) {
     adjustedRectsa.value = []
   }
   // 宸插嚭鐐�
-  if (data.outGlass && data.outGlass.length > 0) {  
-    const newGlassIds = new Set(data.outGlass[0].map(rect => rect.glassId));  
-    const existingRects = adjustedRectsb.value.filter(rect => newGlassIds.has(rect.glassId));  
-    const newRects = data.outGlass[0].map(rect => {  
-      const scaleFactor =  1621.78/6000; 
-      const scaleFactorY =  700/2800; 
-      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; 
-  let newX = rect.yCoordinate; 
+  if (data.outGlass && data.outGlass.length > 0) {
+    const newGlassIds = new Set(data.outGlass[0].map(rect => rect.glassId));
+    const existingRects = adjustedRectsb.value.filter(rect => newGlassIds.has(rect.glassId));
+    const newRects = data.outGlass[0].map(rect => {
+      const scaleFactor = 1621.78 / 6000;
+      const scaleFactorY = 700 / 2800;
+      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta, widtha, heighta;;
+      let newX = rect.yCoordinate;
       if (rect.width < rect.height) {
         widtha = rect.height;
         heighta = rect.width;
-      }else {
+      } else {
         widtha = rect.width;
         heighta = rect.height;
       }
-  if (rect.angle === 0) {  
-    adjustedWidth = widtha * scaleFactor;  
-    adjustedHeight = heighta * scaleFactorY;
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + widtha); 
-    } else {  
-    adjustedWidth = heighta * scaleFactor;  
-    adjustedHeight = widtha * scaleFactorY;  
-    // adjustedWidtha = widtha;  
-    // adjustedHeighta = heighta;  
-    newX = 6000 - (rect.yCoordinate + heighta);  
-  }  
-  return {  
-    ...rect, 
-    x: newX * scaleFactor,  
-    y: rect.xCoordinate * scaleFactorY,  
-    width: adjustedWidth,  
-    height: adjustedHeight,  
-    widtha: rect.width, 
-    heighta: rect.height,
-  }
-    }); 
+      if (rect.angle === 0) {
+        adjustedWidth = widtha * scaleFactor;
+        adjustedHeight = heighta * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + widtha);
+      } else {
+        adjustedWidth = heighta * scaleFactor;
+        adjustedHeight = widtha * scaleFactorY;
+        // adjustedWidtha = widtha;  
+        // adjustedHeighta = heighta;  
+        newX = 6000 - (rect.yCoordinate + heighta);
+      }
+      return {
+        ...rect,
+        x: newX * scaleFactor,
+        y: rect.xCoordinate * scaleFactorY,
+        width: adjustedWidth,
+        height: adjustedHeight,
+        widtha: rect.width,
+        heighta: rect.height,
+      }
+    });
     // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
-    adjustedRectsb.value = existingRects.map(oldRect => {  
-      const newRect = newRects.find(r => r.glassId === oldRect.glassId);  
-      if (newRect) {  
-        return { ...oldRect, ...newRect, isActive: oldRect.isActive };  
-      }  
+    adjustedRectsb.value = existingRects.map(oldRect => {
+      const newRect = newRects.find(r => r.glassId === oldRect.glassId);
+      if (newRect) {
+        return { ...oldRect, ...newRect, isActive: oldRect.isActive };
+      }
       return oldRect;
-    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));  
+    }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId)));
   }
   // if (data.outGlass && data.outGlass.length > 0) {  
   //   // 鎻愬彇鏂扮殑鐭╁舰ID  
@@ -400,7 +400,7 @@
   //       heighta: rect.height,
   // }
   //   });   
-  
+
   //   // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
   //   adjustedRectsb.value = existingRects.map(oldRect => {  
   //     const newRect = newRects.find(r => r.glassId === oldRect.glassId);  
@@ -413,94 +413,82 @@
   else if (data.outGlass == null) {
     adjustedRectsb.value = []
   }
-}; 
+};
 onMounted(() => {
   initializeWebSocket(socketUrl, handleMessage);
 });
 function updateRectColorsa() {
-  adjustedRectsa.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 8;
-    }
-  });  
-}  
-function updateoutColorsa() {
-  adjustedRectsa.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 9;
-    }
-  });  
-} 
-function updateoutColorsc() {
-  adjustedRects1.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 9;
-    }
-  });  
-}
-function updateoutColorsd() {
-  adjustedRects2.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 9;
-    }
-  });  
-} 
-function updateonColorsa() {
-  adjustedRectsa.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 1;
-    }
-  });  
-}  
-function updateRectColorsb() {
-  adjustedRectsb.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 8;
-    }
-  });  
-}  
-function updateoutColorsb() {
-  adjustedRectsb.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 9;
-    }
-  });  
-} 
-function updateonColorsb() {
-  adjustedRectsb.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
-      rect.state = 3;
-    }
-  });  
-} 
-function updateRectColors1() {  
-  adjustedRects1.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
+  adjustedRectsa.value.forEach(rect => {
+    if (rect.glassId === glassId) {
       rect.state = 8;
     }
   });
-}  
-function updateRectColors2() {  
-  adjustedRects2.value.forEach(rect => {  
-    if (rect.glassId === glassId) {  
+}
+function updateoutColorsa() {
+  adjustedRectsa.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 9;
+    }
+  });
+}
+function updateoutColorsc() {
+  adjustedRects1.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 9;
+    }
+  });
+}
+function updateoutColorsd() {
+  adjustedRects2.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 9;
+    }
+  });
+}
+function updateonColorsa() {
+  adjustedRectsa.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 1;
+    }
+  });
+}
+function updateRectColorsb() {
+  adjustedRectsb.value.forEach(rect => {
+    if (rect.glassId === glassId) {
       rect.state = 8;
     }
-  });  
+  });
+}
+function updateoutColorsb() {
+  adjustedRectsb.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 9;
+    }
+  });
+}
+function updateonColorsb() {
+  adjustedRectsb.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 3;
+    }
+  });
+}
+function updateRectColors1() {
+  adjustedRects1.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 8;
+    }
+  });
+}
+function updateRectColors2() {
+  adjustedRects2.value.forEach(rect => {
+    if (rect.glassId === glassId) {
+      rect.state = 8;
+    }
+  });
 }
 function getRectColor1(state) {
-  switch (state) {  
-    case 2:  
-      return 'lightblue';
-    case 8:
-      return '#911005';
-    case 9:
-      return '#4682B4';
-    default:
-      return '#CDAF95'; 
-  }
-} 
-function getRectColor2(state) {
-  switch (state) {  
+  switch (state) {
     case 2:
       return 'lightblue';
     case 8:
@@ -508,12 +496,24 @@
     case 9:
       return '#4682B4';
     default:
-      return '#CDAF95'; 
+      return '#CDAF95';
+  }
+}
+function getRectColor2(state) {
+  switch (state) {
+    case 2:
+      return 'lightblue';
+    case 8:
+      return '#911005';
+    case 9:
+      return '#4682B4';
+    default:
+      return '#CDAF95';
   }
 }
 function getRectColora(state) {
-  switch (state) {  
-    case 0:  
+  switch (state) {
+    case 0:
       return '#7AC5CD';
     case 1:
       return '#95d475';
@@ -524,31 +524,31 @@
     case 9:
       return '#4682B4';
     default:
-      return '#CDAF95'; 
+      return '#CDAF95';
   }
 }
-function getRectColorb(state) {  
-  switch (state) {  
-    case 3:  
-      return '#eebe77';  
-    case 4:  
+function getRectColorb(state) {
+  switch (state) {
+    case 3:
+      return '#eebe77';
+    case 4:
       return '#CD6090';
-    case 8:  
-      return '#911005'; 
+    case 8:
+      return '#911005';
     case 9:
-      return '#4682B4'; 
+      return '#4682B4';
     default:
-      return '#CDAF95'; 
-  }  
+      return '#CDAF95';
+  }
 }
 function showDialog1(rect) {
-  const index = adjustedRects1.value.findIndex(r => r.glassId === rect.glassId);  
-  if (index !== -1) {  
-    adjustedRects1.value[index].isActive = true;  
-  }  
-  currentGlassId.value = rect.glassId;  
-  currenttemperingFeedSequence.value = rect.temperingFeedSequence;  
-  blind1.value = true;  
+  const index = adjustedRects1.value.findIndex(r => r.glassId === rect.glassId);
+  if (index !== -1) {
+    adjustedRects1.value[index].isActive = true;
+  }
+  currentGlassId.value = rect.glassId;
+  currenttemperingFeedSequence.value = rect.temperingFeedSequence;
+  blind1.value = true;
   currentRect.value = rect;
   if (currentRect.value.state == 8) {
     canSelectProject1.value = false;
@@ -559,16 +559,16 @@
     cantakea.value = false;
   } else if (currentRect.value.state !== 9) {
     cantakea.value = true;
-  } 
-} 
+  }
+}
 function showDialog2(rect) {
-  const index = adjustedRects2.value.findIndex(r => r.glassId === rect.glassId);  
-  if (index !== -1) {  
-    adjustedRects2.value[index].isActive = true;  
-  }  
-  currentGlassId.value = rect.glassId;  
-  currenttemperingFeedSequence.value = rect.temperingFeedSequence;  
-  blind2.value = true;  
+  const index = adjustedRects2.value.findIndex(r => r.glassId === rect.glassId);
+  if (index !== -1) {
+    adjustedRects2.value[index].isActive = true;
+  }
+  currentGlassId.value = rect.glassId;
+  currenttemperingFeedSequence.value = rect.temperingFeedSequence;
+  blind2.value = true;
   currentRect.value = rect;
   if (currentRect.value.state == 8) {
     canSelectProject2.value = false;
@@ -580,40 +580,40 @@
   } else if (currentRect.value.state !== 9) {
     cantakea.value = true;
   }
-} 
+}
 function showDialoga(rect) {
-  const index = adjustedRectsa.value.findIndex(r => r.glassId === rect.glassId);  
-  if (index !== -1) {  
-    adjustedRectsa.value[index].isActive = true;  
-  }  
-  currentGlassId.value = rect.glassId;  
-  currenttemperingFeedSequence.value = rect.temperingFeedSequence;  
-  blinda.value = true; 
+  const index = adjustedRectsa.value.findIndex(r => r.glassId === rect.glassId);
+  if (index !== -1) {
+    adjustedRectsa.value[index].isActive = true;
+  }
+  currentGlassId.value = rect.glassId;
+  currenttemperingFeedSequence.value = rect.temperingFeedSequence;
+  blinda.value = true;
   currentRect.value = rect;
   if (currentRect.value.state == 8) {
     canSelectProjecta.value = false;
   } else if (currentRect.value.state !== 8) {
     canSelectProjecta.value = true;
-  } 
+  }
   if (currentRect.value.state == 9) {
     cantakea.value = false;
   } else if (currentRect.value.state !== 9) {
     cantakea.value = true;
-  } 
+  }
   if (currentRect.value.state == 1) {
     canona.value = false;
   } else if (currentRect.value.state == 0) {
     canona.value = true;
-  } 
-} 
+  }
+}
 function showDialogb(rect) {
-  const index = adjustedRectsb.value.findIndex(r => r.glassId === rect.glassId);  
-  if (index !== -1) {  
-    adjustedRectsb.value[index].isActive = true;  
-  }  
-  currentGlassId.value = rect.glassId;  
-  currenttemperingFeedSequence.value = rect.temperingFeedSequence;  
-  blindb.value = true;  
+  const index = adjustedRectsb.value.findIndex(r => r.glassId === rect.glassId);
+  if (index !== -1) {
+    adjustedRectsb.value[index].isActive = true;
+  }
+  currentGlassId.value = rect.glassId;
+  currenttemperingFeedSequence.value = rect.temperingFeedSequence;
+  blindb.value = true;
   currentRect.value = rect;
   if (currentRect.value.state == 8) {
     canSelectProjectb.value = false;
@@ -624,46 +624,46 @@
     cantakeb.value = false;
   } else if (currentRect.value.state !== 9) {
     cantakeb.value = true;
-  } 
+  }
   if (currentRect.value.state == 3) {
     canonb.value = false;
   } else if (currentRect.value.state !== 3) {
     canonb.value = true;
-  } 
-} 
-  const handleDialogClose1 = () => {  
-  adjustedRects1.value.forEach(rect => {  
-    rect.isActive = false;  
-  });  
-  blind1.value = false; 
-};  
-  const handleDialogClose2 = () => {  
-  adjustedRects2.value.forEach(rect => {  
-    rect.isActive = false;  
-  });  
-  blind2.value = false; 
-};  
-  const handleDialogClosea = () => {  
-  adjustedRectsa.value.forEach(rect => {  
-    rect.isActive = false;  
-  });  
-  blinda.value = false; 
-};  
-  const handleDialogCloseb = () => {  
-  adjustedRectsb.value.forEach(rect => {  
-    rect.isActive = false;  
-  });  
-  blindb.value = false; 
-};  
+  }
+}
+const handleDialogClose1 = () => {
+  adjustedRects1.value.forEach(rect => {
+    rect.isActive = false;
+  });
+  blind1.value = false;
+};
+const handleDialogClose2 = () => {
+  adjustedRects2.value.forEach(rect => {
+    rect.isActive = false;
+  });
+  blind2.value = false;
+};
+const handleDialogClosea = () => {
+  adjustedRectsa.value.forEach(rect => {
+    rect.isActive = false;
+  });
+  blinda.value = false;
+};
+const handleDialogCloseb = () => {
+  adjustedRectsb.value.forEach(rect => {
+    rect.isActive = false;
+  });
+  blindb.value = false;
+};
 // 鐮存崯
 const handleDamage1 = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    // temperingFeedSequence: currenttemperingFeedSequence.value,
-    line: 4001,
-    state: 8,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      // temperingFeedSequence: currenttemperingFeedSequence.value,
+      line: 4001,
+      state: 8,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -672,18 +672,18 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 const handleDamage2 = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 8,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 8,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -692,19 +692,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 杩涚倝鍓嶇牬鎹�
 const handleDamagea = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 8,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 8,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -713,19 +713,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 杩涚倝鍓嶄汉宸ユ嬁璧�
 const takeouta = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 9,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 9,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -734,19 +734,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 杩涚倝鍓嶆斁鍥�
 const takeona = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 1,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 1,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -755,19 +755,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 杩涚倝涓汉宸ユ嬁璧�
 const takeoutc = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 9,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 9,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -776,19 +776,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 杩涚倝涓汉宸ユ嬁璧�
 const takeoutd = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 9,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 9,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -797,19 +797,19 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
     console.error(error);
   }
 }
 // 宸插嚭鐐夌牬鎹�
 const handleDamageb = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 8,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 8,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -818,18 +818,18 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
   }
 }
 // 宸插嚭鐐変汉宸ユ嬁璧�
 const takeoutb = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 9,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 9,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -838,18 +838,18 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
+  }
+  catch (error) {
   }
 }
 // 宸插嚭鐐夋斁鍥�
 const takeonb = async () => {
-  try  {
-  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
-    glassId: currentGlassId.value,
-    line: 4001,
-    state: 3,
-    workingProcedure: '閽㈠寲',
+  try {
+    const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+      glassId: currentGlassId.value,
+      line: 4001,
+      state: 3,
+      workingProcedure: '閽㈠寲',
     })
     if (response.code == 200) {
       ElMessage.success('鎴愬姛锛�');
@@ -858,9 +858,9 @@
     } else {
       ElMessage.error(response.message);
     }
-}
-catch (error) {
-}
+  }
+  catch (error) {
+  }
 }
 onBeforeUnmount(() => {
   closeWebSocket();
@@ -869,250 +869,289 @@
 <template>
   <div style="height: 500px;">
     <div style="margin-top: 10px;">
-      <el-button style="margin-left: 15px;" id="searchButton" type="primary"
-                 @click="dialogFormVisiblea = true;dialogFormVisible = false;dialogFormVisibleb = false;">
-        {{ $t('processCard.beforefurnace') }}
-      </el-button>
-      <el-button style="margin-left: 15px;" id="searchButton" type="primary"
-                 @click="dialogFormVisible = true;dialogFormVisiblea = false;dialogFormVisibleb = false;">
-        {{ $t('processCard.intofurnace') }}
-      </el-button>
-      <el-button id="searchButton" type="success"
-                 @click="dialogFormVisibleb = true;dialogFormVisible = false;dialogFormVisiblea = false;">
-        {{ $t('processCard.outfurnace') }}
-      </el-button>
+      <div class="dot-tips">
+        <el-button style="margin-left: 15px;" id="searchButton" type="primary"
+          @click="dialogFormVisiblea = true; dialogFormVisible = false; dialogFormVisibleb = false;">
+          {{ $t('processCard.beforefurnace') }}
+        </el-button>
+        <el-button style="margin-left: 15px;" id="searchButton" type="primary"
+          @click="dialogFormVisible = true; dialogFormVisiblea = false; dialogFormVisibleb = false;">
+          {{ $t('processCard.intofurnace') }}
+        </el-button>
+        <el-button id="searchButton" type="success"
+          @click="dialogFormVisibleb = true; dialogFormVisible = false; dialogFormVisiblea = false;">
+          {{ $t('processCard.outfurnace') }}
+        </el-button>
+        <div class="dot-item">
+          <span class="dot color1"></span>
+          <span class="text">{{ $t('processCard.tempState1') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color2"></span>
+          <span class="text">{{ $t('processCard.tempState2') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color3"></span>
+          <span class="text">{{ $t('processCard.tempState3') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color4"></span>
+          <span class="text">{{ $t('processCard.tempState4') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color5"></span>
+          <span class="text">{{ $t('processCard.tempState5') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color6"></span>
+          <span class="text">{{ $t('processCard.tempState6') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color7"></span>
+          <span class="text">{{ $t('processCard.tempState7') }}</span>
+        </div>
+        <div class="dot-item">
+          <span class="dot color8"></span>
+          <span class="text">{{ $t('processCard.tempState8') }}</span>
+        </div>
+      </div>
       <div v-if="dialogFormVisible">
         <!-- 杩涚倝涓彸 -->
         <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;">
           <!-- <div style="width:900px;background-color: #f4f4f5;height: 420px;"> -->
-            <!-- <div v-if="adjustedRects1.length > 0"> -->
-              <div v-if="currentPage === 1 && adjustedRects1.length > 0">
-              <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplay }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
-              <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{
-                  adjustedRects1[0].engineerId
-                }}-{{ adjustedRects1[0].temperingLayoutId }}
+          <!-- <div v-if="adjustedRects1.length > 0"> -->
+          <div v-if="currentPage === 1 && adjustedRects1.length > 0">
+            <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplay }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
+            <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{
+              adjustedRects1[0].engineerId
+            }}-{{ adjustedRects1[0].temperingLayoutId }}
+            </div>
+            <el-scrollbar height="750px" style="background-color: #e9e9eb;">
+              <div style="position: relative;max-width: 1400px;">
+                <div v-for="(rect, index) in adjustedRects1" :key="index" @click="showDialog1(rect)" class="rect"
+                  :style="{
+                    position: 'absolute',
+                    top: `${rect.y}px`,
+                    left: `${rect.x}px`,
+                    width: `${rect.width}px`,
+                    height: `${rect.height}px`,
+                    backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor1(rect.state)
+                  }">
+                  <div class="centered-text">
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}/{{ rect.layer }}/{{ rect.sequence }}</div>
+                    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>
+                  </div>
+                </div>
               </div>
-    <el-scrollbar height="750px" style="background-color: #e9e9eb;">
-    <div  style="position: relative;max-width: 1400px;">  
-      <div  
-      v-for="(rect, index) in adjustedRects1"
-      :key="index"  
-      @click="showDialog1(rect)"  
-      class="rect"
-      :style="{ position: 'absolute', 
-       top: `${rect.y}px`, 
-       left: `${rect.x}px`,
-        width: `${rect.width}px`, 
-        height: `${rect.height}px`,
-        backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor1(rect.state) }">
-     <div  class="centered-text">
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>  
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}</div>  
-    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
-  </div>
-  </div>
-   </div>
-   </el-scrollbar>
-   </div>
-  <!-- </div> -->
-  <!-- 杩涚倝涓乏 -->
-<!-- <div style="width: 750px;float: left;background-color: #f4f4f5;height: 350px;"> -->
-    <!-- <div v-if="adjustedRects2.length > 0"> -->
-      <div v-else-if="currentPage === 2 && adjustedRects2.length > 0">
-    <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRects2[0].engineerId }}-{{ adjustedRects2[0].temperingLayoutId }} </div>
-    <el-scrollbar height="750px" style="background-color: #e9e9eb;">
-    <div  style="position: relative;max-width: 1400px;">  
-      <div  
-      v-for="(rect, index) in adjustedRects2"
-      :key="index"
-      @click="showDialog2(rect)"  
-      class="rect"
-      :style="{ position: 'absolute', 
-       top: `${rect.y}px`, 
-       left: `${rect.x}px`, 
-       width: `${rect.width}px`, 
-       height: `${rect.height}px`,
-        backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor2(rect.state) }">
-     <div  class="centered-text">
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>  
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}</div>  
-    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
-  </div>
-  </div>
-   </div>
-   </el-scrollbar>
-   </div>
-<!-- </div> -->
-   </el-card>
-   <div style="display: flex;margin-left: 40%;margin-bottom: 10px;">
-    <el-pagination
-        size="small"
-        background
-        layout="prev, pager, next"
-        :total="20"
-        @current-change="handlePageChange"
-      />
-  </div>
-    </div>
-<div v-if="dialogFormVisiblea">
-  <!-- 杩涚倝鍓� -->
-  <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;">
-    <div v-if="adjustedRectsa.length > 0">
-    <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRectsa[0].engineerId }}-{{ adjustedRectsa[0].temperingLayoutId }} </div>
-    <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplaya }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
-      <el-scrollbar height="750px" style="background-color: #e9e9eb;">
-    <div  style="position: relative;max-width: 1400px;">  
-      <div
-      v-for="(rect, index) in adjustedRectsa"  
-      :key="index"  
-      @click="showDialoga(rect)"  
-      class="rect"  
-      :style="{ position: 'absolute',  top: `${rect.y}px`, left: `${rect.x}px`,
-       width: `${rect.width}px`, height: `${rect.height}px`,
-      backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state) }">
-    <div  class="centered-text">
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>  
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}</div>  
-    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
-  </div>
-  </div> 
-   </div>
-   </el-scrollbar>
-   </div>
-   </el-card>
-</div>
-<div v-if="dialogFormVisibleb">
-  <!-- 宸插嚭鐐� -->
-  <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;">
-      <div v-if="adjustedRectsb.length > 0">
-    <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRectsb[0].engineerId }}-{{ adjustedRectsb[0].temperingLayoutId }} </div>
-    <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplayb }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
-      <el-scrollbar height="750px" style="background-color: #e9e9eb;">
-    <div  style="position: relative;max-width: 1400px;">
-      <div  
-      v-for="(rect, index) in adjustedRectsb"  
-      :key="index"  
-      @click="showDialogb(rect)"  
-      class="rect"  
-      :style="{ position: 'absolute',  top: `${rect.y}px`, left: `${rect.x}px`,
-       width: `${rect.width}px`, height: `${rect.height}px`,
-      backgroundColor: rect.isActive ? '#ADFF2F' : getRectColorb(rect.state) }">
-       <!-- backgroundColor: rect.state === 4 ? '#911005' : '#f8e3c5' }"> -->
-     <div  class="centered-text">
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>  
-    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}</div>  
-    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
-  </div>
-  </div> 
-   </div>
-   </el-scrollbar>
-   </div>
-   </el-card>
-</div>
-<!-- 杩涚倝涓� -->
-<el-dialog v-model="blind1" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose1">
-        <el-button :disabled="!canSelectProject1" type="warning" plain @click="handleDamage1"  style="width: 150px;margin-left: 10px;">
+            </el-scrollbar>
+          </div>
+          <!-- </div> -->
+          <!-- 杩涚倝涓乏 -->
+          <!-- <div style="width: 750px;float: left;background-color: #f4f4f5;height: 350px;"> -->
+          <!-- <div v-if="adjustedRects2.length > 0"> -->
+          <div v-else-if="currentPage === 2 && adjustedRects2.length > 0">
+            <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRects2[0].engineerId
+              }}-{{ adjustedRects2[0].temperingLayoutId }} </div>
+            <el-scrollbar height="750px" style="background-color: #e9e9eb;">
+              <div style="position: relative;max-width: 1400px;">
+                <div v-for="(rect, index) in adjustedRects2" :key="index" @click="showDialog2(rect)" class="rect"
+                  :style="{
+                    position: 'absolute',
+                    top: `${rect.y}px`,
+                    left: `${rect.x}px`,
+                    width: `${rect.width}px`,
+                    height: `${rect.height}px`,
+                    backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor2(rect.state)
+                  }">
+                  <div class="centered-text">
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}/{{ rect.layer }}/{{ rect.sequence }}</div>
+                    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+          <!-- </div> -->
+        </el-card>
+        <div style="display: flex;margin-left: 40%;margin-bottom: 10px;">
+          <el-pagination size="small" background layout="prev, pager, next" :total="20"
+            @current-change="handlePageChange" />
+        </div>
+      </div>
+      <div v-if="dialogFormVisiblea">
+        <!-- 杩涚倝鍓� -->
+        <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;">
+          <div v-if="adjustedRectsa.length > 0">
+            <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRectsa[0].engineerId
+              }}-{{ adjustedRectsa[0].temperingLayoutId }} </div>
+            <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplaya }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
+            <el-scrollbar height="750px" style="background-color: #e9e9eb;">
+              <div style="position: relative;max-width: 1400px;">
+                <div v-for="(rect, index) in adjustedRectsa" :key="index" @click="showDialoga(rect)" class="rect"
+                  :style="{
+                    position: 'absolute', top: `${rect.y}px`, left: `${rect.x}px`,
+                    width: `${rect.width}px`, height: `${rect.height}px`,
+                    backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state)
+                  }">
+                  <div class="centered-text">
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}/{{ rect.layer }}/{{ rect.sequence }}</div>
+                    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-card>
+      </div>
+      <div v-if="dialogFormVisibleb">
+        <!-- 宸插嚭鐐� -->
+        <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;">
+          <div v-if="adjustedRectsb.length > 0">
+            <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}锛歿{ adjustedRectsb[0].engineerId
+              }}-{{ adjustedRectsb[0].temperingLayoutId }} </div>
+            <!-- <div style="text-align: center;">鐐夊彿锛歿{ engineerIdDisplayb }}-{{ adjustedRects[0].temperingLayoutId }}</div>   -->
+            <el-scrollbar height="750px" style="background-color: #e9e9eb;">
+              <div style="position: relative;max-width: 1400px;">
+                <div v-for="(rect, index) in adjustedRectsb" :key="index" @click="showDialogb(rect)" class="rect"
+                  :style="{
+                    position: 'absolute', top: `${rect.y}px`, left: `${rect.x}px`,
+                    width: `${rect.width}px`, height: `${rect.height}px`,
+                    backgroundColor: rect.isActive ? '#ADFF2F' : getRectColorb(rect.state)
+                  }">
+                  <!-- backgroundColor: rect.state === 4 ? '#911005' : '#f8e3c5' }"> -->
+                  <div class="centered-text">
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div>
+                    <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}/{{ rect.layer }}/{{ rect.sequence }}</div>
+                    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-card>
+      </div>
+      <!-- 杩涚倝涓� -->
+      <el-dialog v-model="blind1" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose1">
+        <el-button :disabled="!canSelectProject1" type="warning" plain @click="handleDamage1"
+          style="width: 150px;margin-left: 10px;">
           {{ $t('order.dilapidation') }}
         </el-button>
-        <el-button :disabled="!cantakea" type="danger" plain @click="takeoutc"  style="width: 150px;margin-left: 10px;margin-top: 10px;">
-          <el-icon class="el-icon--right"><Upload /></el-icon>
+        <el-button :disabled="!cantakea" type="danger" plain @click="takeoutc"
+          style="width: 150px;margin-left: 10px;margin-top: 10px;">
+          <el-icon class="el-icon--right">
+            <Upload />
+          </el-icon>
           {{ $t('order.takeaway') }}
         </el-button>
-  </el-dialog>  
-<el-dialog v-model="blind2" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose2">
-        <el-button :disabled="!canSelectProject2" type="warning" plain @click="handleDamage2"  style="width: 150px;margin-left: 10px;">
+      </el-dialog>
+      <el-dialog v-model="blind2" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose2">
+        <el-button :disabled="!canSelectProject2" type="warning" plain @click="handleDamage2"
+          style="width: 150px;margin-left: 10px;">
           {{ $t('order.dilapidation') }}
         </el-button>
-        <el-button :disabled="!cantakea" type="danger" plain @click="takeoutd"  style="width: 150px;margin-left: 10px;margin-top: 10px;">
-          <el-icon class="el-icon--right"><Upload /></el-icon>
+        <el-button :disabled="!cantakea" type="danger" plain @click="takeoutd"
+          style="width: 150px;margin-left: 10px;margin-top: 10px;">
+          <el-icon class="el-icon--right">
+            <Upload />
+          </el-icon>
           {{ $t('order.takeaway') }}
         </el-button>
-  </el-dialog>  
-  <!-- 杩涚倝鍓� -->
-<el-dialog v-model="blinda" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClosea">
-  <el-button type="warning" plain @click="handleDamagea" :disabled="!canSelectProjecta" style="width: 150px;margin-left: 10px;">
+      </el-dialog>
+      <!-- 杩涚倝鍓� -->
+      <el-dialog v-model="blinda" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClosea">
+        <el-button type="warning" plain @click="handleDamagea" :disabled="!canSelectProjecta"
+          style="width: 150px;margin-left: 10px;">
           {{ $t('order.dilapidation') }}
         </el-button>
-        <el-button :disabled="!cantakea" type="danger" plain @click="takeouta"  style="width: 150px;margin-left: 10px;margin-top: 10px;">
-          <el-icon class="el-icon--right"><Upload /></el-icon>
+        <el-button :disabled="!cantakea" type="danger" plain @click="takeouta"
+          style="width: 150px;margin-left: 10px;margin-top: 10px;">
+          <el-icon class="el-icon--right">
+            <Upload />
+          </el-icon>
           {{ $t('order.takeaway') }}
         </el-button>
-        <el-button type="success" plain @click="takeona" :disabled="!canona" style="width: 150px;margin-left: 10px;margin-top: 10px;">
+        <el-button type="success" plain @click="takeona" :disabled="!canona"
+          style="width: 150px;margin-left: 10px;margin-top: 10px;">
           {{ $t('order.takeon') }}
         </el-button>
-  </el-dialog>  
-  <!-- 宸插嚭鐐� -->
-<el-dialog v-model="blindb" top="30vh" width="15%" style="text-align: center;" @close="handleDialogCloseb">
-        <el-button :disabled="!canSelectProjectb" type="warning" plain  @click="handleDamageb"  style="width: 150px;margin-left: 10px;">
+      </el-dialog>
+      <!-- 宸插嚭鐐� -->
+      <el-dialog v-model="blindb" top="30vh" width="15%" style="text-align: center;" @close="handleDialogCloseb">
+        <el-button :disabled="!canSelectProjectb" type="warning" plain @click="handleDamageb"
+          style="width: 150px;margin-left: 10px;">
           {{ $t('order.dilapidation') }}
         </el-button>
-        <el-button :disabled="!cantakeb" type="danger" plain @click="takeoutb"  style="width: 150px;margin-left: 10px;margin-top: 10px;">
-          <el-icon class="el-icon--right"><Upload /></el-icon>
+        <el-button :disabled="!cantakeb" type="danger" plain @click="takeoutb"
+          style="width: 150px;margin-left: 10px;margin-top: 10px;">
+          <el-icon class="el-icon--right">
+            <Upload />
+          </el-icon>
           {{ $t('order.takeaway') }}
         </el-button>
         <!-- <el-button type="success" plain  @click="takeonb" :disabled="!canonb" style="width: 150px;margin-left: 10px;margin-top: 10px;">
           {{ $t('order.takeon') }}
         </el-button> -->
-  </el-dialog> 
-  <el-dialog  
-      v-model="dialogVisible"
-      width="100%" 
-      top="0vh"
-      :show-close="false"
-      >  
-      <div class="custom-title" style="text-align: center; margin-bottom: 20px;">  
-      {{ $t('processCard.glasstakeout') }}  
-    </div>  
-      <el-table  
-        :data="tableData"  
-        style="width: 100%;height: 760px"  
-      >
-        <el-table-column prop="flowCardId" :label="$t('processCard.flowcard')" width="140" align="center"/>
-        <el-table-column prop="layer" :label="$t('processCard.layer')" align="center" width="52"/>
-        <el-table-column prop="engineerId" :label="$t('processCard.project')" align="center" width="110"/>
-        <el-table-column prop="temperingLayoutId" :label="$t('processCard.temperinglayout')" align="center" width="52"/>
-        <el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center" width="52"/>
-        <el-table-column prop="width" :label="$t('processCard.width')" align="center" width="80"/>
-        <el-table-column prop="height" :label="$t('processCard.height')" align="center" width="80"/>
-        <el-table-column prop="thickness" :label="$t('processCard.thickness')" align="center" width="52"/>
-      </el-table>
-  </el-dialog>
+      </el-dialog>
+      <el-dialog v-model="dialogVisible" width="100%" top="0vh" :show-close="false">
+        <div class="custom-title" style="text-align: center; margin-bottom: 20px;">
+          {{ $t('processCard.glasstakeout') }}
+        </div>
+        <el-table :data="tableData" style="width: 100%;height: 760px">
+          <el-table-column prop="flowCardId" :label="$t('processCard.flowcard')" width="140" align="center" />
+          <el-table-column prop="layer" :label="$t('processCard.layer')" align="center" width="52" />
+          <el-table-column prop="engineerId" :label="$t('processCard.project')" align="center" width="110" />
+          <el-table-column prop="temperingLayoutId" :label="$t('processCard.temperinglayout')" align="center"
+            width="52" />
+          <el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center"
+            width="52" />
+          <el-table-column prop="width" :label="$t('processCard.width')" align="center" width="80" />
+          <el-table-column prop="height" :label="$t('processCard.height')" align="center" width="80" />
+          <el-table-column prop="thickness" :label="$t('processCard.thickness')" align="center" width="52" />
+        </el-table>
+      </el-dialog>
     </div>
   </div>
 </template>
 <style scoped>
-#boxa{
+#boxa {
   border: 1px solid rgb(119, 116, 116);
-  background-color:  #529b2e;
+  background-color: #529b2e;
   text-align: center;
   display: inline-block;
-    /* align-items:center; */
-    /* justify-content:center; */
+  /* align-items:center; */
+  /* justify-content:center; */
   margin-left: 20px;
 }
-#boxb{
+
+#boxb {
   border: 1px solid rgb(119, 116, 116);
-  background-color:  #a0cfff;
+  background-color: #a0cfff;
   /* display:flex; */
   text-align: center;
   display: inline-block;
-  align-items:center;
-  justify-content:center;
+  align-items: center;
+  justify-content: center;
   margin-left: 20px;
 }
-#box{
+
+#box {
   border: 1px solid black;
-  background-color:  #337ecc;
-  display:flex;
-  align-items:center; 
-  justify-content:center;
+  background-color: #337ecc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 #home-card {
   width: 100%;
   overflow: hidden;
   padding: 10px 0px;
   display: flex;
   flex-wrap: wrap;
+
   #home-item {
     border-style: solid;
     border-width: 1px;
@@ -1125,6 +1164,7 @@
     justify-content: center;
     /* align-items: center; */
     background: #fff;
+
     #home-img {
       display: inline-block;
       width: 160px;
@@ -1132,36 +1172,107 @@
       margin: 0;
       padding: 0;
     }
-      #home-right {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        margin-left: 10px;
-        #home-num {
-          font-size: 40px;
-          margin: 5px 0;
-        }
+
+    #home-right {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 10px;
+
+      #home-num {
+        font-size: 40px;
+        margin: 5px 0;
       }
     }
   }
-  .rect {  
-  border: 1px solid black; /* 璁剧疆鐭╁舰鐨勮竟妗� */  
+}
+
+.rect {
+  border: 1px solid black;
+  /* 璁剧疆鐭╁舰鐨勮竟妗� */
   /* background-color: lightblue; 璁剧疆鐭╁舰鐨勮儗鏅壊   */
-} 
-#rect {  
-  position: relative; /* 纭繚绠ご鍙互鐩稿浜庣煩褰㈠畾浣� */  
-}  
+}
+
+#rect {
+  position: relative;
+  /* 纭繚绠ご鍙互鐩稿浜庣煩褰㈠畾浣� */
+}
+
 .centered-text {
-  /* 璁剧疆鏂囧瓧灞呬腑鏍峰紡 */  
+  /* 璁剧疆鏂囧瓧灞呬腑鏍峰紡 */
   /* display: flex; */
-  justify-content: center;  
-  align-items: center; 
-  height: 100%; /* 纭繚div鍗犳嵁鏁翠釜鐭╁舰鐨勯珮搴� */  
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  /* 纭繚div鍗犳嵁鏁翠釜鐭╁舰鐨勯珮搴� */
   /* font-size: small; */
-} 
-.custom-title {  
+}
+
+.custom-title {
   font-size: 20px;
   font-weight: bold;
-} 
+}
+
+.dot-tips {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  /* 姣忎釜鍦嗙偣椤逛箣闂寸殑闂磋窛 */
+  padding: 10px;
+}
+
+/* 鍗曚釜鍦嗙偣+鏂囧瓧椤� */
+.dot-item {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+/* 鍦嗙偣鏍峰紡锛氭牳蹇冩槸鍦嗗舰 */
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  /* 鍦嗗舰 */
+  margin-right: 6px;
+  /* 鍦嗙偣鍜屾枃瀛楃殑闂磋窛 */
+}
+
+/* 涓嶅悓棰滆壊鐨勫渾鐐癸紙鍙嚜瀹氫箟锛� */
+.color1 {
+  background-color: #99BBFF;
+}
+
+.color2 {
+  background-color: #7AC5CD;
+}
+
+.color3 {
+  background-color: #95d475;
+}
+
+.color4 {
+  background-color: lightblue;
+}
+
+.color5 {
+  background-color: #eebe77;
+}
+
+.color6 {
+  background-color: #CD6090;
+}
+
+.color7 {
+  background-color: #911005;
+}
+
+.color8 {
+  background-color: #4682B4;
+}
+/* 鏂囧瓧鏍峰紡 */
+.text {
+  color: #666;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0