| | |
| | | <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: 150px;margin-top: 50px;margin-right: 10px;width: 1558px;" height="900" v-loading="loading"> |
| | | <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 }}</div> |
| | | <el-scrollbar height="430px" width="1516px" style="background-color: #e9e9eb;"> |
| | | <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)" |
| | |
| | | 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> |
| | |
| | | if (response.code === 200) { |
| | | rawData.value = response.data; |
| | | processData(rawData.value); |
| | | } else { |
| | | // ElMessage.warning(res.msg) |
| | | } else { |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rects :', error); |
| | | } catch (error) { |
| | | } |
| | | }); |
| | | watch( |
| | |
| | | rawData.value = response.data; |
| | | processData(rawData.value); |
| | | } |
| | | } catch (error) { |
| | | console.error('Failed to fetch data:', error); |
| | | } catch (error) { |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | |
| | | const rowIndex = divsData.value; |
| | | adjustedRectsPerRow.value = divsData.value.map(() => []); |
| | | divsData.value.forEach((row, rowIndex) => { |
| | | const rawRowData = rawData.value[rowIndex]; |
| | | const rawRowData = rawData.value[rowIndex].listGlass; |
| | | 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 * (1516/rect.olHeight); |
| | | adjustedHeight = rect.width * (430/rect.olWidth); |
| | | } else { |
| | | newX = rect.olHeight -(rect.y_axis + rect.width); |
| | | adjustedWidth = rect.width * (1516/rect.olHeight); |
| | | adjustedHeight = rect.height * (430/rect.olWidth); |
| | | } |
| | | 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 * (430/rect.olWidth), |
| | | x_axis: newX * (1516/rect.olHeight), |
| | | // y_axis: rect.x_axis * (430/rect.olWidth), |
| | | y_axis: rect.x_axis * (550/rect.olWidth), |
| | | x_axis: newX * (1000/rect.olHeight), |
| | | width: adjustedWidth, |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | |
| | | function getAdjustedRectsForRow(rowIndex) { |
| | | return adjustedRectsPerRow.value[rowIndex] || []; |
| | | } |
| | | </script> |
| | | |
| | | |
| | | </script> |
| | | <style scoped> |
| | | .row { |
| | | display: flex; |
| | |
| | | margin-bottom: 20px; |
| | | } |
| | | .div-container { |
| | | width: 1516px; |
| | | width: 1000px; |
| | | float: left; |
| | | background-color: #f4f4f5; |
| | | height: 430px; |
| | | height: 550px; |
| | | box-sizing: border-box; |
| | | } |
| | | </style> |