<template>
|
<div>
|
<el-button id="button" type="primary" @click="handlePrint">打印版图</el-button>
|
<el-select
|
v-model="printLayout"
|
placeholder="选择打印布局"
|
@change="handleLayoutChange"
|
style="width: 150px; margin-bottom: 10px;">
|
<el-option label="四行两列" value="4rows-2cols"></el-option>
|
<el-option label="三行两列" value="3rows-2cols"></el-option>
|
<el-option label="三行一列" value="3rows-1col"></el-option>
|
<el-option label="两行两列" value="2rows-2cols"></el-option>
|
</el-select>
|
|
<div ref="printContainer" style="position: relative;">
|
<RectRenderer
|
ref="rectRenderer"
|
:layoutData="layoutData"
|
:gw="currentGw"
|
:gh="currentGh"
|
:printLayout="printLayout"
|
:printWidth="currentPrintWidth"
|
:printHeight="currentPrintHeight"
|
style="position: absolute;"
|
v-if="dataLoaded"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, watch } from 'vue';
|
import RectRenderer from './page/RectRenderer.vue';
|
import request from "@/utils/request";
|
|
const printLayout = ref('2rows-2cols');
|
const rectRenderer = ref(null);
|
const savedProjectNo = localStorage.getItem('projectNo');
|
const processId = savedProjectNo;
|
const layoutData = ref(null);
|
const dataLoaded = ref(false);
|
// 定义不同布局对应的尺寸
|
const layoutDimensions = {
|
'4rows-2cols': { width: 1000, height: 1000 },
|
'3rows-2cols': { width: 1000, height: 1000 },
|
'3rows-1col': { width: 1000, height: 1000 },
|
'2rows-2cols': { width: 1200, height: 1200 }
|
};
|
|
// 当前布局的尺寸
|
const currentGw = ref(layoutDimensions[printLayout.value].width);
|
const currentGh = ref(layoutDimensions[printLayout.value].height);
|
const currentPrintWidth = ref(layoutDimensions[printLayout.value].width);
|
const currentPrintHeight = ref(layoutDimensions[printLayout.value].height);
|
|
const selectLayout = () => {
|
request.post(`/glassOptimize/selectOptimizeResult/${processId}`)
|
.then((res) => {
|
if (res.code == 200) {
|
try {
|
const parsedData = JSON.parse(res.data.data[0].Layouts);
|
layoutData.value = parsedData;
|
dataLoaded.value = true;
|
} catch (error) {
|
console.error("解析布局数据失败:", error);
|
}
|
} else {
|
console.error("请求失败，状态码:", res.code);
|
}
|
})
|
.catch((error) => {
|
console.error("请求失败:", error);
|
});
|
};
|
|
onMounted(() => {
|
selectLayout();
|
});
|
|
const handlePrint = () => {
|
if (rectRenderer.value) {
|
rectRenderer.value.print();
|
}
|
};
|
|
const handleLayoutChange = () => {
|
// 更新布局尺寸
|
const dimensions = layoutDimensions[printLayout.value];
|
currentGw.value = dimensions.width;
|
currentGh.value = dimensions.height;
|
currentPrintWidth.value = dimensions.width;
|
currentPrintHeight.value = dimensions.height;
|
|
if (rectRenderer.value) {
|
rectRenderer.value.updateLayout();
|
}
|
};
|
|
// 监听布局变化
|
watch(printLayout, (newVal) => {
|
handleLayoutChange();
|
});
|
</script>
|
