<template>
|
<div>
|
<el-button id="button" type="primary" @click="handlePrint" style="position: fixed; top: 90px; right: 20px; padding: 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">
|
打印
|
</el-button>
|
|
<div ref="printContainer" style="position: relative;">
|
<RectRenderer
|
ref="rectRenderer"
|
:layoutData="layoutData"
|
:gw="currentGw"
|
:gh="currentGh"
|
:printLayout="printLayout"
|
:printWidth="currentPrintWidth"
|
:printHeight="currentPrintHeight"
|
:materialDetails="materialDetails"
|
:state="state"
|
:projectNo="processId"
|
style=""
|
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 props = defineProps({
|
project : null,
|
state : null
|
});
|
const printLayout = ref('2rows-2cols');
|
const rectRenderer = ref(null);
|
const savedProjectNo = localStorage.getItem('projectNo');
|
let processId = null;
|
const layoutData = ref();
|
const dataLoaded = ref(false);
|
const materialDetails = ref();
|
const state = ref();
|
// 定义不同布局对应的尺寸
|
const layoutDimensions = {
|
'4rows-2cols': { width: 1000, height: 1000 },
|
'3rows-2cols': { width: 1000, height: 1000 },
|
'3rows-1col': { width: 1000, height: 1000 },
|
'2rows-2cols': { width: 1400, height: 800 }
|
};
|
|
// 当前布局的尺寸
|
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 {
|
layoutData.value = JSON.parse(res.data.data[0].Layouts);
|
materialDetails.value=res.data.optimizeUse;
|
dataLoaded.value=true;
|
} catch (error) {
|
console.error("解析布局数据失败:", error);
|
}
|
} else {
|
console.error("请求失败，状态码:", res.code);
|
}
|
})
|
.catch((error) => {
|
console.error("请求失败:", error);
|
});
|
};
|
|
onMounted(() => {
|
if (props.project) {
|
processId=props.project.projectNumber;
|
state.value=props.state;
|
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>
|
