ERP_override.git

			@@ -1,150 +1,103 @@
			<template>
			<div>

			<el-button id="button" type="primary" @click="handlePrint">打印版图</el-button>
			<RectRenderer
			ref="rectRenderer"
			:layoutData="layoutData"
			:gw="1400"
			:gh="1100"
			style="width: 100%; height: 800px; position: relative;"
			/>
			<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 } from 'vue';
			import { ref, onMounted, watch } from 'vue';
			import RectRenderer from './page/RectRenderer.vue';
			import mockLayoutData from '../../../components/pp/MockData';
			import request from "@/utils/request";
			import { useI18n } from "vue-i18n";
			//const layoutData = ref(mockLayoutData);
			const rectRenderer = ref(null);

			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;
			} catch (error) {


			}
			} else {

			}
			})
			.catch((error) => {
			console.error("请求失败:", error);
			ElMessage.error(t('basicData.msg.requestFailed'));
			});
			}
			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 = () => {
			// 创建一个隐藏的iframe
			const iframe = document.createElement('iframe');
			iframe.style.position = 'fixed';
			iframe.style.top = '-100vh';
			iframe.style.left = '-100vw';
			iframe.style.width = '200%';
			iframe.style.height = '200%';
			document.body.appendChild(iframe);

			// 将RectRenderer的内容加载到iframe中
			const iframeDoc = iframe.contentDocument \|\| iframe.contentWindow.document;
			iframeDoc.open();
			iframeDoc.write(`
			<html>
			<head>
			<title>Print Layout</title>
			<style>
			@page {
			size: A4 landscape;
			margin: 20mm;
			}
			body {
			margin: 0;
			padding: 0;
			}
			.layout-wrapper {
			display: flex;
			flex-direction: column;
			}
			.layout-container {
			page-break-inside: avoid;
			break-inside: avoid;
			page-break-after: auto;
			margin-bottom: 20mm;
			}
			.layout-item {
			page-break-inside: avoid;
			break-inside: avoid;
			}
			</style>
			</head>
			<body>
			<div class="layout-wrapper">
			${rectRenderer.value.$el.outerHTML}
			</div>
			</body>
			</html>
			`);
			iframeDoc.close();

			// 设置打印样式
			const printStyle = iframeDoc.createElement('style');
			printStyle.type = 'text/css';
			printStyle.innerHTML = `
			@page {
			size: A4 landscape;
			margin: 20mm;
			}
			body {
			-webkit-print-color-adjust: exact;
			}
			.layout-wrapper {
			display: flex;
			flex-direction: column;
			}
			.layout-container {
			page-break-inside: avoid;
			break-inside: avoid;
			page-break-after: auto;
			margin-bottom: 20mm;
			}
			.layout-item {
			page-break-inside: avoid;
			break-inside: avoid;
			}
			`;
			iframeDoc.head.appendChild(printStyle);

			// 调整iframe大小以适应内容
			const contentWidth = rectRenderer.value.$el.offsetWidth;
			const contentHeight = rectRenderer.value.$el.offsetHeight;
			iframe.width = contentWidth + 'px';
			iframe.height = contentHeight + 'px';

			// 执行打印
			iframe.contentWindow.print();

			// 清理
			setTimeout(() => {
			document.body.removeChild(iframe);
			}, 100);
			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>