<template>
|
<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: 400px;margin-top: 50px;margin-right: 10px;width: 1100px;" 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">
|
<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.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 {
|
// ElMessage.warning(res.msg)
|
}
|
} catch (error) {
|
// console.error('Error fetching rects :', 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;
|
console.log(response.data);
|
|
processData(rawData.value);
|
}
|
} catch (error) {
|
console.error('Failed to fetch data:', error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
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;
|
});
|
}
|
});
|
}
|
// 方法用于获取当前行的adjustedRects
|
function getAdjustedRectsForRow(rowIndex) {
|
return adjustedRectsPerRow.value[rowIndex] || [];
|
}
|
</script>
|
|
|
<style scoped>
|
.row {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
.div-container {
|
width: 1000px;
|
float: left;
|
background-color: #f4f4f5;
|
height: 550px;
|
box-sizing: border-box;
|
}
|
</style>
|
