<template>
|
<div>
|
<el-button id="button" type="primary" @click="handlePrint" style="position: fixed; top: 90px; right: 20px; padding: 20px; background: #409eff; color: white; border: none; border-radius: 5px; cursor: pointer;">
|
打印
|
</el-button>
|
|
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
<span>工程编号：</span>
|
<el-input readonly placeholder="" style="width: 150px" v-model="processId"></el-input>
|
<el-checkbox v-model="config.plain">
|
切材率
|
</el-checkbox>
|
<div style="margin-right: 30px;"></div>
|
<span>布局选择：</span>
|
<el-select v-model="config.type" style="width: 120px;">
|
<el-option v-for="type in linkTypes" :key="type" :value="type" />
|
</el-select>
|
<el-button id="button" type="primary" @click="handlePrint" style="background: #409eff; color: white; border: none; cursor: pointer;">
|
预览
|
</el-button>
|
</div>
|
|
<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, reactive, inject } 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');
|
const processId = ref('');
|
const layoutData = ref();
|
const dataLoaded = ref(false);
|
const materialDetails = ref();
|
const injectedProjectNo = inject('projectNo', null);
|
const state = ref();
|
const linkTypes = ['一列', '两列', '三列']
|
|
// 定义不同布局对应的尺寸
|
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.value}`)
|
.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);
|
});
|
};
|
|
const config = reactive({
|
type: '两列',
|
plain: true,
|
})
|
|
onMounted(() => {
|
// 优先使用注入的 projectNo，其次使用 props，最后使用 localStorage
|
if (injectedProjectNo) {
|
processId.value = injectedProjectNo.value || injectedProjectNo;
|
} else if (props.project) {
|
processId.value = props.project.projectNumber || '';
|
state.value = props.state;
|
} else if (savedProjectNo) {
|
processId.value = savedProjectNo;
|
}
|
|
if (processId.value) {
|
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>
|
