ZengTao
2024-08-20 74173fd310569a79104bfe1beb97e73890c4cda9
UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
@@ -13,10 +13,10 @@
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(true)
const dialogFormVisibleb = ref(false)
const dialogFormVisibletemperingTakeGlass = ref(true)
const temperingTakeGlassInfos=ref([])
const blind = ref(false)
const blind1 = ref(false)
const blind2 = ref(false)
const blinda = ref(false)
const blindb = ref(false)
const width = ref();
const height = ref();
const adjustedRects1 = ref([]);
@@ -26,14 +26,9 @@
const currentGlassId = ref(null);
const currenttemperingFeedSequence = ref(null);
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`;
const handleMessage = (data) => {
  if (data.temperingTakeGlassInfos != null) {
    temperingTakeGlassInfos.value = data.temperingTakeGlassInfos[0];
    console.log(temperingTakeGlassInfos.value)
  }
// 进炉中
  if(data.intoGlass!=null){
    adjustedRects1.value =  data.intoGlass[0].map(rect => {
const handleMessage = (data) => {
  if (data.intoGlass2 && data.intoGlass2.length > 0) {
    const newRects = data.intoGlass2[0].map(rect => {
      const scaleFactor =  794.67/5087; 
        let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;;
        let newX = rect.yCoordinate; 
@@ -65,13 +60,19 @@
        height: adjustedHeight,  
        widtha: rect.width, 
        heighta: rect.height,
      };
      });
      }else{
        adjustedRects1.value = ''
      }
  if(data.intoGlass2!=null){
    adjustedRects2.value =  data.intoGlass2[0].map(rect => {
    });
    // 合并新旧矩形,保留 isActive 状态
    adjustedRects2.value = adjustedRects2.value.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 => !adjustedRects2.value.some(o => o.glassId === r.glassId)));
  }
  if (data.intoGlass && data.intoGlass.length > 0) {
    const newRects = data.intoGlass[0].map(rect => {
      const scaleFactor =  794.67/5087; 
      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;;
      let newX = rect.yCoordinate; 
@@ -103,14 +104,19 @@
        height: adjustedHeight,  
        widtha: rect.width, 
        heighta: rect.height,
      };
      });
      }else{
        adjustedRects2.value = ''
      }
  // 进炉前
  if(data.waitingGlass!=null){
    adjustedRectsa.value = data.waitingGlass[0].map(rect => {
    });
    // 合并新旧矩形,保留 isActive 状态
    adjustedRects1.value = adjustedRects1.value.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 => !adjustedRects1.value.some(o => o.glassId === r.glassId)));
  }
  if (data.waitingGlass && data.waitingGlass.length > 0) {
    const newRects = data.waitingGlass[0].map(rect => {
      const scaleFactor =  1621.78/5190; 
  let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; 
  let newX = rect.yCoordinate; 
@@ -142,16 +148,22 @@
    height: adjustedHeight,  
    widtha: rect.width, 
    heighta: rect.height,
  };
});
  }else{
        adjustedRectsa.value = ''
      }
    // 已出炉
  if(data.outGlass!=null){
    adjustedRectsb.value = data.outGlass[0].map(rect => {
  }
    });
    // 合并新旧矩形,保留 isActive 状态
    adjustedRectsa.value = adjustedRectsa.value.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 => !adjustedRectsa.value.some(o => o.glassId === r.glassId)));
  }
  if (data.outGlass && data.outGlass.length > 0) {
    const newRects = data.outGlass[0].map(rect => {
      const scaleFactor =  1621.78/5190; 
      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;;
      const scaleFactory =  550/2800;
      let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta,newY;
  let newX = rect.yCoordinate; 
      if (rect.width < rect.height) {
        widtha = rect.height;
@@ -162,31 +174,39 @@
      }
  if (rect.angle === 0) {  
    adjustedWidth = widtha * scaleFactor;  
    adjustedHeight = heighta * 0.16;
    adjustedHeight = heighta * scaleFactory;
    // adjustedWidtha = widtha;  
    // adjustedHeighta = heighta;  
    // newX = 5190 - (rect.yCoordinate + widtha); 
    newY = 2800 - (rect.xCoordinate + heighta);
  } else {  
    adjustedWidth = heighta * scaleFactor;  
    adjustedHeight = widtha * 0.16;
    adjustedHeight = widtha * scaleFactory;
    // adjustedWidtha = heighta;  
    // adjustedHeighta = widtha;  
    // newX = 5190 - (rect.yCoordinate + heighta);  
    newY = 2800 - (rect.xCoordinate + widtha);
  }  
  return {  
        ...rect, // 复制原始对象的其他属性  
        x: newX * scaleFactor,
        y: rect.xCoordinate * 0.16,
        y: newY * scaleFactory,
        width: adjustedWidth,  
        height: adjustedHeight,  
        widtha: rect.width, 
        heighta: rect.height,
  };
});
  }else{
        adjustedRectsb.value = ''
      }
};
  }
    });
    // 合并新旧矩形,保留 isActive 状态
    adjustedRectsb.value = adjustedRectsb.value.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 => !adjustedRectsb.value.some(o => o.glassId === r.glassId)));
  }
};
onMounted(() => {
  initializeWebSocket(socketUrl, handleMessage);
});
@@ -219,25 +239,68 @@
      return '#911005';  
  }  
}
// if (adjustedRectsb[0].engineerId != null) {
//     engineerIdDisplayb = adjustedRectsb[0].engineerId
//   }
//   if (adjustedRectsa[0].engineerId != null) {
//     engineerIdDisplaya = adjustedRectsa[0].engineerId
//   }
//   if (adjustedRects2[0].engineerId != null) {
//     engineerIdDisplay2 = adjustedRects2[0].engineerId
//   }
//   if (adjustedRects[0].engineerId != null) {
//     engineerIdDisplay = adjustedRects[0].engineerId
//   }
function showDialog(rect) {
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;  
  blind.value = true;
}
  blind1.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;
}
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;
}
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 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 handleDamage = async () => {
const handleDamage1 = async () => {
  try  {
  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
    glassId: currentGlassId.value,
@@ -248,7 +311,76 @@
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      blind.value = false;
      blind1.value = false;
      updateRectColors();
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.message);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
const handleDamage2 = async () => {
  try  {
  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
    glassId: currentGlassId.value,
    // temperingFeedSequence: currenttemperingFeedSequence.value,
    line: 4001,
    status: 2,
    workingProcedure: '钢化',
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      blind2.value = false;
      updateRectColors();
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.message);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
const handleDamagea = async () => {
  try  {
  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
    glassId: currentGlassId.value,
    // temperingFeedSequence: currenttemperingFeedSequence.value,
    line: 4001,
    status: 2,
    workingProcedure: '钢化',
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      blinda.value = false;
      updateRectColors();
    } else {
      // 请求失败,显示错误消息
      ElMessage.error(response.message);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
const handleDamageb = async () => {
  try  {
  const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
    glassId: currentGlassId.value,
    // temperingFeedSequence: currenttemperingFeedSequence.value,
    line: 4001,
    status: 2,
    workingProcedure: '钢化',
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      blindb.value = false;
      updateRectColors();
    } else {
      // 请求失败,显示错误消息
@@ -267,11 +399,9 @@
</script>
<template>
  <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>
    <el-button  id="searchButton" type="success" @click="dialogFormVisibletemperingTakeGlass = true;">拿走详情</el-button>
<div v-if="dialogFormVisible" >
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 600px;" v-loading="loading">
<div style="width: 49%;float: left;background-color: #f4f4f5;height: 550px;">
@@ -283,14 +413,14 @@
      <div  
      v-for="(rect, index) in adjustedRects1"
      :key="index"  
      @click="showDialog(rect)"
      @click="showDialog1(rect)"
      class="rect"
      :style="{ position: 'absolute', 
       top: `${rect.ycoordinate}px`, 
       left: `${rect.xcoordinate}px`,
        width: `${rect.width}px`, 
        height: `${rect.height}px`,
        backgroundColor: rect.state === 5 ? '#911005' : 'lightblue' }"
        backgroundColor: rect.isActive ? '#ADFF2F' : rect.state === 5 ? '#911005' : 'lightblue' }"
    >
     <div  class="centered-text">
    <div >{{ rect.glassId }}</div>  
@@ -311,14 +441,14 @@
      <div  
      v-for="(rect, index) in adjustedRects2"
      :key="index"
      @click="showDialog(rect)"
      @click="showDialog2(rect)"
      class="rect"
      :style="{ position: 'absolute', 
       top: `${rect.ycoordinate}px`, 
       left: `${rect.xcoordinate}px`, 
       width: `${rect.width}px`, 
       height: `${rect.height}px`,
       backgroundColor: rect.state === 5 ? '#911005' : 'lightblue' }"
       backgroundColor: rect.isActive ? '#ADFF2F' : rect.state === 5 ? '#911005' : 'lightblue' }"
       >
     <div  class="centered-text">
    <div >{{ rect.glassId }}</div>  
@@ -343,11 +473,11 @@
      <div  
      v-for="(rect, index) in adjustedRectsa"  
      :key="index"  
      @click="showDialog(rect)"
      @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: getRectColora(rect.state) }">
      backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state) }">
    <div  class="centered-text">
    <div>{{ rect.glassId }}</div>  
    <div >{{ rect.flowCardId }}</div>  
@@ -370,11 +500,11 @@
      <div  
      v-for="(rect, index) in adjustedRectsb"  
      :key="index"  
      @click="showDialog(rect)"
      @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: getRectColorb(rect.state) }">
      backgroundColor: rect.isActive ? '#ADFF2F' : getRectColorb(rect.state) }">
       <!-- backgroundColor: rect.state === 4 ? '#911005' : '#f8e3c5' }"> -->
     <div  class="centered-text">
    <div >{{ rect.glassId }}</div>  
@@ -388,24 +518,27 @@
   </el-card>
</div>
 
<el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;">
        <el-button type="warning" plain :icon="Delete" @click="handleDamage"  style="width: 140px;margin-left: 10px;">
<el-dialog v-model="blind1" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose1">
        <el-button type="warning" plain :icon="Delete" @click="handleDamage1"  style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
  </el-dialog>
<el-dialog v-model="blind2" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose2">
        <el-button type="warning" plain :icon="Delete" @click="handleDamage2"  style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
  </el-dialog>
<el-dialog v-model="blinda" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClosea">
        <el-button type="warning" plain :icon="Delete" @click="handleDamagea"  style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
  </el-dialog>
<el-dialog v-model="blindb" top="30vh" width="15%" style="text-align: center;" @close="handleDialogCloseb">
        <el-button type="warning" plain :icon="Delete" @click="handleDamageb"  style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
  </el-dialog> 
  </div>
  <el-dialog v-model="dialogFormVisibletemperingTakeGlass" top="2vh" width="97%"
                   :title="$t('人工拿走信息')">
          <el-table height="200px" ref="table" @selection-change="handleSelectionChange" :data="temperingTakeGlassInfos"
                    :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
            <el-table-column prop="engineerId" align="center" :label="$t('工程号')" min-width="80"/>
            <el-table-column prop="processId" align="center" :label="$t('流程卡号')" min-width="80"/>
            <el-table-column prop="technologyNumber" align="center" :label="$t('层')" min-width="120"/>
            <el-table-column prop="orderNumber" align="center" :label="$t('订单序号')" min-width="80"/>
            <el-table-column prop="temperingLayoutId" align="center" :label="$t('钢化版图')" min-width="150"/>
          </el-table>
        </el-dialog>
</template>
<style scoped>
#boxa{