Merge remote-tracking branch 'origin/master'

zhoushihao

3 天以前 4e3b8155722b66e25df3c6fd42cc586b68dea391

 UI-Project/src/views/NewPage.vue

@@ -1,151 +1,148 @@
<template>  
    <div>  
  <div style="display: flex;">
    <div style="margin-left: 50px;margin-top: 15px;font-size:large">工程号:</div>
  <div>  
<div style="display: flex;">
  <div style="margin-left: 50px;margin-top: 15px;font-size:large">工程号:</div>
<el-input v-model="current" style="margin-left: 20px;margin-top: 15px;width: 240px" placeholder="请输入工程号" @input="updateUrl"/>
      <el-button style="margin-top: 15px;margin-left: 15px;"  type="primary" @click="fetchData">查询</el-button>  
    </div>  
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;margin-right: 10px;width: 1850px;" height="900" v-loading="loading">
    <div v-for="(row, rowIndex) in divsData" :key="rowIndex" class="row">  
        <div v-for="(rect, colIndex) in row" :key="colIndex" class="div-container">  
    <el-scrollbar height="430px" width="900px" style="background-color: #e9e9eb;">
    <div  style="position: relative;width: 100%;height: 100%;">  
      <div  
        v-for="(rect, index) in getAdjustedRectsForRow(rowIndex)"
      :key="index"  
      class="rect"
      :style="{ position: 'absolute', 
       top: `${rect.y_axis}px`, 
       left: `${rect.x_axis}px`,
       width: `${rect.width}px`,  
         height: `${rect.height}px`,  
        backgroundColor:  '#911005'}">
     <div  class="centered-text">
    <div style="font-size: 15px;font-weight: bold;">{{ rect.process_id }}</div>  
    <div style="font-size: 15px;font-weight: bold;">{{ rect.project_no }}</div>  
    <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
  </div>
  </div>
   </div>
   </el-scrollbar>
   </div>
   </div>
   </el-card>
  </div>
  </template>  
     
     <script setup>  
     import { ref, onMounted, watch, watchEffect } from 'vue';  
     import { useRoute, useRouter } from 'vue-router';  
     import request from "@/utils/request"
     const route = useRoute();  
     const router = useRouter();  
     const current = ref(route.query.current || '');  
     const adjustedRects = ref([]);
     const loading = ref(false);
     const adjustedRectsPerRow = ref([]);
     const divsData = ref([]);
     const rawData = ref([]);
     onMounted(() => {  
       if (route.query.current) {  
         current.value = route.query.current;
         console.log(current.value);
         window.localStorage.setItem('current', current.value)
       }  
     });  
     onMounted(async () => { 
         try {  
           let current = window.localStorage.getItem('current')
             const response = await request.post(`/cacheGlass/taskCache/temperingTerritory?current=${current}`);
           if (response.code === 200) {  
             rawData.value = response.data;
                   console.log(rawData.value);
                   processData(rawData.value);
           } else {  
            //  ElMessage.warning(res.msg)
           }  
         } catch (error) {  
           // console.error('Error fetching rects :', error);  
    <el-button style="margin-top: 15px;margin-left: 15px;"  type="primary" @click="fetchData">查询</el-button>  
  </div>  
  <el-card style="flex: 1;margin-left: 400px;margin-top: 50px;margin-right: 10px;width: 1100px;" height="900" >
  <div v-for="(row, rowIndex) in divsData" :key="rowIndex" class="row">  
      <div v-for="(rect, colIndex) in row" :key="colIndex" class="div-container">  
    <div style="text-align: center;">炉号：{{ getAdjustedRectsForRow(rowIndex)[0].layout_id }}  ----   装载率：{{ getAdjustedRectsForRow(rowIndex)[0].olLayoutRate }}</div>  
  <el-scrollbar height="550px" width="1000px" style="background-color: #e9e9eb;">
  <div  style="position: relative;width: 100%;height: 100%;">
    <div
      v-for="(rect, index) in getAdjustedRectsForRow(rowIndex)"
    :key="index"  
    class="rect"
    :style="{ position: 'absolute',
     top: `${rect.y_axis}px`, 
     left: `${rect.x_axis}px`,
     width: `${rect.width}px`,  
       height: `${rect.height}px`,  
      backgroundColor:  'lightblue'}">
   <div  class="centered-text">
  <div style="font-size: 15px;font-weight: bold;">{{ rect.sort }}</div>  
  <div style="font-size: 15px;font-weight: bold;">{{ rect.process_id }}</div>  
  <div style="font-size: 15px;font-weight: bold;">{{ rect.project_no }}</div>  
  <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div>  
</div>
</div>
 </div>
 </el-scrollbar>
 </div>
 </div>
 </el-card>
</div>
</template>  
   <script setup>  
   import { ref, onMounted, watch, watchEffect } from 'vue';  
   import { useRoute, useRouter } from 'vue-router';  
   import request from "@/utils/request"
   const route = useRoute();  
   const router = useRouter();  
   const current = ref(route.query.current || '');  
   const adjustedRects = ref([]);
   const loading = ref(false);
   const adjustedRectsPerRow = ref([]);
   const divsData = ref([]);
   const rawData = ref([]);
   onMounted(() => {  
     if (route.query.current) {  
       current.value = route.query.current;
       window.localStorage.setItem('current', current.value)
     }  
   });  
   onMounted(async () => { 
       try {  
         let current = window.localStorage.getItem('current')
           const response = await request.post(`/cacheGlass/taskCache/temperingTerritory?current=${current}`);
         if (response.code === 200) {  
           rawData.value = response.data;
                 processData(rawData.value);
         } else {
         }  
       }); 
     watch(  
       current,  
       (newVal) => {  
         router.replace({ query: { current: newVal } });  
       },  
       { immediate: true } // 使用 immediate: true 来确保在组件挂载时立即执行一次 watch 回调  
     );
     const fetchData = async () => {
       try {
         const response = await request.post(`/cacheGlass/taskCache/temperingTerritory?current=${current.value}`);
         if (response.code === 200) {
            rawData.value = response.data;
            console.log(rawData.value);
            processData(rawData.value);
    }  
  } catch (error) {  
    console.error('Failed to fetch data:', error);  
  } finally {  
    loading.value = false;  
       } catch (error) {
       }  
     }); 
   watch(  
     current,  
     (newVal) => {  
       router.replace({ query: { current: newVal } });  
     },  
     { immediate: true } // 使用 immediate: true 来确保在组件挂载时立即执行一次 watch 回调  
   );
   const fetchData = async () => {
     try {
       const response = await request.post(`/cacheGlass/taskCache/temperingTerritory?current=${current.value}`);
       if (response.code === 200) {
          rawData.value = response.data;
          processData(rawData.value);
  }  
} catch (error) { 
} finally {  
  loading.value = false;  
}  
};
     function processData(data) {  
  const groupedData = [];  
  for (let i = 0; i < data.length; i += 2) {  
    groupedData.push(data.slice(i, i + 2));  
   function processData(data) {  
const groupedData = [];  
for (let i = 0; i < data.length; i += 1) {
  groupedData.push(data.slice(i, i + 1));
}  
divsData.value = groupedData;
const rowIndex = divsData.value;
  adjustedRectsPerRow.value = divsData.value.map(() => []);
divsData.value.forEach((row, rowIndex) => {
  const rawRowData = rawData.value[rowIndex].listGlass;
  if (rawRowData) {
adjustedRectsPerRow.value[rowIndex] = rawRowData.map(rect => {
      let adjustedWidth, adjustedHeight,newX,widtha,heighta;
      if (rect.width < rect.height) {
        widtha = rect.height;
        heighta = rect.width;
      }else {
        widtha = rect.width;
        heighta = rect.height;
      }
      if (rect.rotate_angle  === 90) {
       newX = rect.olHeight -(rect.y_axis + heighta); 
       adjustedWidth = heighta * (1000/rect.olHeight);
       adjustedHeight = widtha * (550/rect.olWidth);
      } else {
        newX = rect.olHeight -(rect.y_axis + widtha); 
       adjustedWidth = widtha * (1000/rect.olHeight);
       adjustedHeight = heighta * (550/rect.olWidth);
  } 
      let adjustedRect = {  
        ...rect,
        y_axis: rect.x_axis * (550/rect.olWidth),
        x_axis: newX * (1000/rect.olHeight),
        width: adjustedWidth,  
        height: adjustedHeight,  
        widtha: rect.width,  
        heighta: rect.height,  
      }; 
      return adjustedRect;  
    });  
  }  
  divsData.value = groupedData;
adjustedRectsPerRow.value = divsData.value.map(() => []);
  divsData.value.forEach((row, rowIndex) => {  
    const rawRowData = rawData.value[rowIndex];
    if (rawRowData) {  
adjustedRectsPerRow.value[rowIndex] = rawRowData.map(rect => {  
        let adjustedWidth, adjustedHeight,newX;
        if (rect.rotate_angle  === 0) {
         newX = rect.olHeight -(rect.y_axis + rect.height); 
         adjustedWidth = rect.height * (900/rect.olHeight);
         adjustedHeight = rect.width * (430/rect.olWidth);
        } else {  
          newX = rect.olHeight -(rect.y_axis + rect.width); 
         adjustedWidth = rect.width * (900/rect.olHeight);
         adjustedHeight = rect.height * (430/rect.olWidth);
        } 
        // 该页面为顺时针旋转90度
        let adjustedRect = {  
          ...rect,
          // x_axis: rect.y_axis * (959.35/rect.olHeight),
          y_axis: rect.x_axis * (430/rect.olWidth),
          x_axis: newX * (900/rect.olHeight),
          // y_axis: rect.x_axis * (430/rect.olWidth),
          width: adjustedWidth,  
          height: adjustedHeight,  
          widtha: rect.width,  
          heighta: rect.height,  
        }; 
        return adjustedRect;  
      });  
    }  
  });  
});  
}
// 方法用于获取当前行的adjustedRects  
function getAdjustedRectsForRow(rowIndex) {  
  return adjustedRectsPerRow.value[rowIndex] || [];  
function getAdjustedRectsForRow(rowIndex) {
return adjustedRectsPerRow.value[rowIndex] || [];  
}  
     </script>  
       
    
  <style scoped>  
</script>
<style scoped>  
.row {  
  display: flex;  
  justify-content: space-between;  
  margin-bottom: 20px;
}  
  
display: flex;  
justify-content: space-between;  
margin-bottom: 20px;
}
.div-container {  
  width: 900px;
  float: left;
  background-color: #f4f4f5;
  height: 430px;
  box-sizing: border-box;
}  
  </style>
width: 1000px;
float: left;
background-color: #f4f4f5;
height: 550px;
box-sizing: border-box;
}
</style>