From 56fab901b298857ff4985b7429ef843c9a9d1471 Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期三, 28 八月 2024 16:20:02 +0800
Subject: [PATCH] 钢化模块打印功能,新增表格字段

---
 UI-Project/src/views/PurchaseReturn/purchaseStorage.vue |  237 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 186 insertions(+), 51 deletions(-)

diff --git a/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue b/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue
index 11f2545..bba4ca2 100644
--- a/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue
+++ b/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue
@@ -2,12 +2,21 @@
 import {Search} from "@element-plus/icons-vue";
 import {reactive} from "vue";
 import {useRouter} from "vue-router"
-
-import { ref } from 'vue'
-
+import { ElMessage, ElMessageBox } from 'element-plus'
+import request from "@/utils/request"
+ 
+import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue';  
+import { WebSocketHost ,host} from '@/utils/constants'
+import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
+const adjustedRects = ref([]);
+const currentGlassId = ref(null);
+const currenttemperingFeedSequence = ref(null);
+const currentRect = ref(null);
+const canSelectProject = ref(true);
 const dialogFormVisible = ref(true)
 const dialogFormVisiblea = ref(false)
-
+const blind = ref(false)
+ 
 const getTableRow = (row,type) =>{
   switch (type) {
     case 'edit' :{
@@ -21,62 +30,176 @@
     }
   }
 }
-
-const gridOptions = reactive({
-  border:  "full",//琛ㄦ牸鍔犺竟妗�
-  keepSource: true,//淇濇寔婧愭暟鎹�
-  align: 'center',//鏂囧瓧灞呬腑
-  stripe:true,//鏂戦┈绾�
-  rowConfig: {isCurrent: true, isHover: true,height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒
-  id: 'OrderList',
-  showFooter: true,//鏄剧ず鑴�
-  printConfig: {},
-  importConfig: {},
-  exportConfig: {},
-  scrollY:{ enabled: true },//寮�鍚櫄鎷熸粴鍔�
-  showOverflow:true,
-  columnConfig: {
-    resizable: true,
-    useKey: true
-  },
-  filterConfig: {   //绛涢�夐厤缃」
-    remote: true
-  },
-  customConfig: {
-    storage: true
-  },
-  editConfig: {
-    trigger: 'click',
-    mode: 'row',
-    showStatus: true
-  },
-  data:  [
-    {
+let socket = null;
+const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; 
+const handleMessage = (data) => {  
+  if (data.overGlass && data.overGlass.length > 0) {  
+    // 鎻愬彇鏂扮殑鐭╁舰ID  
+    const newGlassIds = new Set(data.overGlass[0].map(rect => rect.glassId));  
+  
+    // 杩囨护鍑哄凡瀛樺湪鐨勭煩褰�  
+    const existingRects = adjustedRects.value.filter(rect => newGlassIds.has(rect.glassId));  
+  
+    // 璁$畻鏂扮殑鐭╁舰  
+    const newRects = data.overGlass[0].map(rect => {  
+      const scaleFactor =  1390/5190; 
+      const scaleFactorY =  750/2800; 
+      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;
+      let newX = rect.yCoordinate; 
+      
+      if (rect.width < rect.height) {
+        widtha = rect.height;
+        heighta = rect.width;
+      }else {
+        widtha = rect.width;
+        heighta = rect.height;
+      }
+    if (rect.angle === 0) {  
+    adjustedWidth = widtha * scaleFactor;  
+    adjustedHeight = heighta * scaleFactorY;  
+  } else {  
+    adjustedWidth = heighta * scaleFactor;  
+    adjustedHeight = widtha * scaleFactorY;  
+  }  
+  return {  
+    ...rect, 
+    xcoordinate: newX * scaleFactor, 
+    ycoordinate: rect.xCoordinate * scaleFactorY,
+    width: adjustedWidth,  
+    height: adjustedHeight,  
+    widtha: rect.width, 
+    heighta: rect.height,
+  }
+    });    
+  
+    // 鍚堝苟鏂版棫鐭╁舰锛屽苟淇濈暀 isActive 鐘舵��  
+    adjustedRects.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)));  
+  }  
+  else if (data.overGlass == null) {
+    adjustedRects.value = []
+  }
+};
+function updateRectColors() {  
+  adjustedRects.value.forEach(rect => {  
+    if (rect.glassId === glassId) {  
+      rect.state = 8;
     }
-  ],
-})
+  });  
+} 
+function getRectColora(state) {  
+  switch (state) { 
+    case 3:  
+      return '#eebe77';  
+    case 4:  
+      return '#CD6090';
+    case 8:  
+      return '#911005';  
+  }  
+}
+function showDialog(rect) {
+  const index = adjustedRects.value.findIndex(r => r.glassId === rect.glassId);  
+  if (index !== -1) {  
+    adjustedRects.value[index].isActive = true;  
+  }  
+  currentGlassId.value = rect.glassId;  
+  currenttemperingFeedSequence.value = rect.temperingFeedSequence;  
+  blind.value = true;
+  currentRect.value = rect;
+  if (currentRect.value.state == 8) {
+    canSelectProject.value = false;
+  } else if (currentRect.value.state !== 8) {
+    canSelectProject.value = true;
+  }
+}  
+  
+const handleDialogClose = () => {  
+  adjustedRects.value.forEach(rect => {  
+    rect.isActive = false;  
+  });  
+  blind.value = false; 
+};  
+// 鐮存崯
+const handleDamage = async () => {
+  try  {
+  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
+    glassId: currentGlassId.value,
+    // temperingFeedSequence: currenttemperingFeedSequence.value,
+    line: 4001,
+    status: 8,
+    workingProcedure: '閽㈠寲',
+    })
+    if (response.code == 200) {
+      ElMessage.success(response.message);
+      blind.value = false;
+      updateRectColors();
+    } else {
+      // 璇锋眰澶辫触锛屾樉绀洪敊璇秷鎭�
+      ElMessage.error(response.message);
+    }
+}
+catch (error) {
+    // 澶勭悊閿欒
+    console.error(error);
+  }
+}
+onMounted(() => {
+  socket = initializeWebSocket(socketUrl, handleMessage);
+});
+  onUnmounted(() => {
+    if (socket) {
+    closeWebSocket(socket);
+    }
+    });
+onBeforeUnmount(() => {
+  console.log("鍏抽棴浜�")
+  closeWebSocket();
+});
 </script>
-
+ 
 <template>
   <div style="margin-top: 10px;">
 <div>
-    <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
-      <div style="display: flex;margin-top: 20px;">
-      <div style="margin-left: 400px;font-size: 20px;">宸ョ▼鍙凤細P20240305001 </div>
-      <div style="margin-left: 150px;font-size: 20px;">鐗堝浘缂栧彿锛�1</div>
-    </div>
-    <div>
-            <div id="boxa" style="width: 700px;height: 220px;margin-left: 260px;">
-              <div style="margin-top: 85px;"> NG202405060798A01-1</div> 
-            <div> 500脳1500</div>
-          </div>
-    </div>
+    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
+      <!-- <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> -->
+      <div v-if="adjustedRects.length > 0">
+      <div style="text-align: center;">鐐夊彿锛歿{ adjustedRects[0].engineerId }}-{{ adjustedRects[0].temperingLayoutId }}</div>  
+    <el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;">
+    <div  style="position: relative;">  
+      <div  
+      v-for="(rect, index) in adjustedRects"
+      :key="index"  
+      @click="showDialog(rect)"  
+      class="rect"  
+      :style="{ position: 'absolute',  top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}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>
+    <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose">
+        <el-button :disabled="!canSelectProject" type="warning" plain :icon="Delete" @click="handleDamage"  style="width: 140px;margin-left: 10px;">
+          {{ $t('order.dilapidation') }}
+        </el-button>
+  </el-dialog> 
   </div>
-
+ 
 </template>
-
+ 
 <style scoped>
 #boxa{
   border: 1px solid rgb(119, 116, 116);
@@ -87,4 +210,16 @@
   margin-top: 70px;
   margin-bottom: 50px;
 }
+.rect {  
+  border: 1px solid black; /* 璁剧疆鐭╁舰鐨勮竟妗� */  
+  background-color: lightblue; /* 璁剧疆鐭╁舰鐨勮儗鏅壊 */  
+} 
+.centered-text {
+  /* 璁剧疆鏂囧瓧灞呬腑鏍峰紡 */  
+  /* display: flex; */
+  justify-content: center;  
+  align-items: center; 
+  height: 100%; /* 纭繚div鍗犳嵁鏁翠釜鐭╁舰鐨勯珮搴� */  
+  font-size: small;
+} 
 </style>
\ No newline at end of file

--
Gitblit v1.8.0