<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: 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);
|
}
|
});
|
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;
|
}
|
};
|
function processData(data) {
|
const groupedData = [];
|
for (let i = 0; i < data.length; i += 2) {
|
groupedData.push(data.slice(i, i + 2));
|
}
|
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] || [];
|
}
|
</script>
|
|
|
<style scoped>
|
.row {
|
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>
|
