From 33dbc6a161554f3a897f9e9273feb4f2c1b47381 Mon Sep 17 00:00:00 2001
From: chenlu <1320612696@qq.com>
Date: 星期一, 15 十二月 2025 17:04:27 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10105/r/ERP_override
---
north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/OptimizationRect.vue | 1513 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,513 insertions(+), 0 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/OptimizationRect.vue b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/OptimizationRect.vue
new file mode 100644
index 0000000..5a9490e
--- /dev/null
+++ b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/OptimizationRect.vue
@@ -0,0 +1,1513 @@
+<template>
+ <div style="display: flex; height: 90vh;">
+ <!-- Sidebar -->
+ <div class="sidebar" style="width: 200px; background: #f4f4f4; padding: 10px; height: 93%; overflow-y: auto; max-height: 90vh; border-radius: 8px;">
+ <div class="folder">
+ <div
+ class="folder-header" style="padding: 8px; background: #e0e0e0; margin-bottom: 5px; border-radius: 4px; user-select: none; display: flex; justify-content: space-between; align-items: center;"
+ >
+ <span @click="toggleFolder('pending')" style="flex: 1; cursor: pointer;">寰呭垏鍓插師鐗�</span>
+ <button
+ @click="toggleFolder('pending')" style="background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 5px; border-radius: 3px;"
+ :title="openFolders.pending ? '鏀惰捣' : '灞曞紑'"
+ >
+ <el-icon v-if="openFolders.pending"><ArrowUp /></el-icon>
+ <el-icon v-else><ArrowDown /></el-icon>
+ </button>
+ </div>
+ <div v-show="openFolders.pending" class="folder-content" style="padding-left: 15px;">
+ <div
+ v-for="(layout, layoutIndex) in layouts"
+ :key="layoutIndex"
+ class="sidebar-item"
+ @click="selectLayout(layoutIndex)"
+ :class="{ 'selected': selectedLayoutIndex === layoutIndex }" style="margin-bottom: 5px;"
+ >
+ {{ layout.realWidth }} 脳 {{ layout.realHeight }} 脳 {{ layout.quantity }}
+ </div>
+ </div>
+ </div>
+
+<!-- 寰呰ˉ鐗囬槦鍒楁枃浠跺す -->
+ <div class="folder">
+ <div
+ class="folder-header" style="padding: 8px; background: #e0e0e0; margin-bottom: 5px; border-radius: 4px; user-select: none; display: flex; justify-content: space-between; align-items: center;"
+ >
+ <span @click="toggleFolder('patchQueue')" style="flex: 1; cursor: pointer;">寰呰ˉ鐗囬槦鍒�</span>
+ <button
+ @click="toggleFolder('patchQueue')" style="background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 5px; border-radius: 3px;"
+ :title="openFolders.patchQueue ? '鏀惰捣' : '灞曞紑'"
+ >
+ <el-icon v-if="openFolders.patchQueue"><ArrowUp /></el-icon>
+ <el-icon v-else><ArrowDown /></el-icon>
+ </button>
+ </div>
+ <div v-show="openFolders.patchQueue" class="folder-content" style="padding-left: 15px;">
+ <div style="padding: 10px; color: #666; font-style: italic;">
+ 鏆傛棤琛ョ墖浠诲姟
+ </div>
+ </div>
+ </div>
+
+ <!-- 娣诲姞鑷畾涔夊昂瀵告枃浠跺す -->
+ <div class="folder">
+ <div
+ class="folder-header" style="padding: 8px; background: #e0e0e0; margin-bottom: 5px; border-radius: 4px; user-select: none; display: flex; justify-content: space-between; align-items: center;"
+ >
+ <span @click="toggleFolder('customSize')" style="flex: 1; cursor: pointer;">娣诲姞鑷畾涔夊昂瀵�</span>
+ <button
+ @click="toggleFolder('customSize')" style="background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 5px; border-radius: 3px;"
+ :title="openFolders.customSize ? '鏀惰捣' : '灞曞紑'"
+ >
+ <el-icon v-if="openFolders.customSize"><ArrowUp /></el-icon>
+ <el-icon v-else><ArrowDown /></el-icon>
+ </button>
+ </div>
+ <div v-show="openFolders.customSize" class="folder-content" style="padding-left: 15px;">
+ <div style="padding: 10px;">
+ <button
+ @click="showAddCustomSizeDialog" style="width: 100%; padding: 8px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer;"
+ >
+ + 娣诲姞鑷畾涔夊昂瀵�
+ </button>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+
+ <!-- Main Layout Panel -->
+ <div ref="layoutPanel" :class="panelClass" :style="panelStyle">
+ <div
+ v-for="(layout, layoutIndex) in layouts"
+ :key="layoutIndex"
+ class="layout-wrapper"
+ :style="{ display: selectedLayoutIndex === layoutIndex ? 'block' : 'none', top: '-150px' }"
+ >
+ <!-- Layout Info Label -->
+ <div class="layout-info" :style="layoutInfoStyle(layoutIndex)">
+ {{ getCurrentRectInfo(layoutIndex) }}
+ </div>
+
+ <!-- Layout Container -->
+ <div class="layout-container" :style="layoutContainerStyle1(layoutIndex)">
+ <div class="layout-container" :style="layoutContainerStyle(layoutIndex)">
+ <!-- 鐏拌壊鐭╁舰 -->
+ <div
+ v-for="(glassDetail, rectIndex) in layout.glassDetails.filter(r => r.isRemain)"
+ :key="`gray-${rectIndex}`"
+ :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
+ class="layout-glassDetail"
+ :style="rectStyle1(glassDetail, layoutIndex)"
+ @contextmenu.prevent="handleGrayRectRightClick(layoutIndex, rectIndex,glassDetail)"
+ >
+<!-- <div class="glassDetail-content">
+ <div class="size">{{ glassDetail.width }}脳{{ glassDetail.height }}</div>
+ <div v-if="showJiaHao" class="jia-hao">{{ glassDetail.JiaHao }}</div>
+ <div v-if="showProcessId" class="liuchengka">{{ glassDetail.liuchengka }}</div>
+ </div>-->
+ </div>
+
+ <!-- 钃濊壊鐭╁舰 -->
+ <div
+ v-for="(glassDetail, rectIndex) in layout.glassDetails.filter(r => !r.isRemain)"
+ :key="`blue-${rectIndex}`"
+ :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
+ class="layout-glassDetail"
+ :style="rectStyle(glassDetail, layoutIndex)"
+ @contextmenu.prevent="handleRectRightClick(layoutIndex, rectIndex)"
+ @click="handleRectClick(layoutIndex, rectIndex)"
+ >
+ <div class="glassDetail-content">
+ <div class="size">{{ glassDetail.realWidth }}脳{{ glassDetail.realHeight }}</div>
+ <div>{{glassDetail.polySort }}</div>
+ <div v-if="showJiaHao" class="jia-hao">{{ glassDetail.rackNo }}</div>
+ <div v-if="showProcessId" class="liuchengka">{{ glassDetail.processId }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <button @click="submitLayouts" style="position: fixed; top: 90px; right: 20px; padding: 10px; background: #409eff; color: white; border: none; border-radius: 5px; cursor: pointer;">
+ 淇濆瓨璋冩暣
+ </button>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
+import request from "@/utils/request";
+const router = useRouter();
+import { useI18n } from "vue-i18n";
+import { ElMessage, ElMessageBox } from "element-plus";
+import useUserInfoStore from "@/stores/userInfo";
+
+const { t } = useI18n();
+const userStore = useUserInfoStore()
+const username = userStore.user.userName
+let clickEventListener = null;
+const props = defineProps({
+ layoutData: { type: Object, required: true },
+ gw: { type: Number, default: 1000 },
+ gh: { type: Number, default: 1000 },
+ style: { type: String, default: 'width:1000px;height:600px;display:block;background:gray' }
+});
+
+const emit = defineEmits(['rectClicked']);
+const layoutPanel = ref(null);
+const rectsElements = ref({});
+const focusIndex = ref(null);
+const layouts = ref([]);
+const layoutsHead = ref();
+const panelClass = ref('');
+const panelStyle = ref(props.style);
+const rectClass = ref('layout-glassDetail');
+const selectedLayoutIndex = ref(0);
+const currentRect = ref(null);
+// const dragging = ref(false);
+// const dragStartPos = ref({ x: 0, y: 0 });
+// const dragRect = ref(null);
+const showJiaHao = ref(false);
+const showProcessId = ref(false);
+const themeColor = ref(null);
+
+//淇濆瓨璋冩暣
+const submitLayouts = async () => {
+ layouts.value.forEach(layout => {
+ layout.glassDetails.forEach(glassDetail => {
+ glassDetail.x = parseFloat(glassDetail.x.toFixed(2));
+ glassDetail.y = parseFloat(glassDetail.y.toFixed(2));
+ glassDetail.width = parseFloat(glassDetail.width.toFixed(2));
+ glassDetail.height = parseFloat(glassDetail.height.toFixed(2));
+ });
+ });
+ const savedProjectNo = localStorage.getItem('projectNo');
+ const processId = savedProjectNo;
+ // 鏋勯�犱笌鍘熷鏁版嵁缁撴瀯涓�鑷寸殑瀵硅薄
+ const saveData = {
+ projectNo: processId,
+ layouts: layouts.value,
+ // 澶嶅埗鍘熷鏁版嵁涓殑鍏朵粬蹇呰瀛楁
+ ...layoutsHead.value
+ };
+
+ // 纭繚 Layouts 瀛楁鏄簭鍒楀寲鐨勫瓧绗︿覆
+ const requestData = {
+ Layouts: JSON.stringify(saveData)
+ };
+ request.post(`/glassOptimize/updateOptimizeResult/${processId}`, layoutsHead.value, {
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }).then((res) => {
+ if (res.code == 200 && res.data === true) {
+ ElMessage.success(t('basicData.msg.saveSuccess'));
+ // // 淇濆瓨鎴愬姛鍚庤烦杞埌鏁版帶鐣岄潰
+ // router.push({ path: '/main/glassOptimize/OptimizeControl' });
+ } else {
+ ElMessage.warning(res.msg);
+ }
+ });
+};
+
+const openFolders = ref({
+ pending: true, // 榛樿灞曞紑"寰呭垏鍓插師鐗�"鏂囦欢澶�
+ patchQueue: false, // 榛樿鏀惰捣"寰呰ˉ鐗囬槦鍒�"鏂囦欢澶�
+ customSize: false // 榛樿鏀惰捣"娣诲姞鑷畾涔夊昂瀵�"鏂囦欢澶�
+});
+
+// 鍒囨崲鏂囦欢澶瑰睍寮�/鏀惰捣鐘舵��
+const toggleFolder = (folderName) => {
+ openFolders.value[folderName] = !openFolders.value[folderName];
+};
+
+
+
+const showAddCustomSizeDialog = () => {
+ // 妫�鏌ユ槸鍚﹂�夋嫨浜嗙増鍥�
+ if (selectedLayoutIndex.value === null || layouts.value.length === 0) {
+ ElMessage.warning('璇峰厛閫夋嫨涓�涓増鍥�');
+ return;
+ }
+
+ // 浣跨敤鐜版湁鐨勬坊鍔犳垚鍝侀�昏緫锛屼紶鍏ュ綋鍓嶉�変腑鐨勭増鍥剧储寮�
+ showAddDialog(selectedLayoutIndex.value);
+};
+
+//鏌ヨ璁剧疆鐨勫熀纭�淇℃伅鏋跺彿锛岀煩褰㈤鑹诧紝璁㈠崟搴忓彿绛�
+const fetchSettings = async (username) => {
+ try {
+ const response = await request.post(`/glassOptimize/selectOptimizeParms/${username}`);
+ if (response.code == 200) {
+ if (!response.data) {
+ console.error('鍝嶅簲鏁版嵁涓虹┖');
+ return;
+ }
+ const parsedData = JSON.parse(response.data);
+ if (parsedData.display && parsedData.frameNumber) {
+ showJiaHao.value = parsedData.display.frameNumber;
+ }
+ if (parsedData.display && parsedData.orderNumber) {
+ showProcessId.value = parsedData.display.orderNumber;
+ }
+ if (parsedData.display) {
+ themeColor.value = parsedData.display.themeColor;
+ }
+ } else {
+ console.error('璇锋眰澶辫触锛岀姸鎬佺爜:', response.code);
+ }
+ } catch (error) {
+ console.error('璇锋眰鍙戠敓閿欒:', error);
+ }
+};
+
+//娣诲姞鎴愬搧
+const showAddDialog = (layoutIndex, rectIndex) => {
+ ElMessageBox.prompt('璇疯緭鍏ユ垚鍝佺殑瀹藉害鍜岄珮搴�', '娣诲姞鎴愬搧', {
+ inputType: 'text',
+ inputValidator: (value) => {
+ const values = value.split(',').map(v => v.trim());
+ if (values.length !== 2) {
+ return '璇疯緭鍏ヤ袱涓暟瀛楋紝鐢ㄩ�楀彿鍒嗛殧';
+ }
+ const [width, height] = values;
+ if (isNaN(width) || isNaN(height)) {
+ return '璇疯緭鍏ユ湁鏁堢殑鏁板瓧';
+ }
+ if (width <= 0 || height <= 0) {
+ return '瀹藉害鍜岄珮搴﹀繀椤诲ぇ浜�0';
+ }
+ return true;
+ },
+ inputErrorMessage: '杈撳叆鏍煎紡涓嶆纭�'
+ })
+ .then(({ value }) => {
+ const values = value.split(',').map(v => parseFloat(v.trim()));
+ const newRect = {
+ x: 0,
+ y: 0,
+ width: values[0],
+ height: values[1],
+ isRemain: false
+ };
+ addNewRect(layoutIndex, newRect);
+ })
+ .catch(() => {
+ // 鐢ㄦ埛鍙栨秷
+ });
+};
+
+//娣诲姞鎴愬搧閫昏緫鍒ゆ柇
+const addNewRect = (layoutIndex, newRect) => {
+ const layout = layouts.value[layoutIndex];
+ const bestFitPosition = findBestFitPosition(layoutIndex, newRect);
+ if (bestFitPosition) {
+ newRect.x = bestFitPosition.x;
+ newRect.y = bestFitPosition.y;
+ layout.glassDetails.push(newRect);
+ adjustGrayRectangles(layoutIndex);
+ } else {
+ ElMessage.warning('鏃犳硶鏀剧疆锛屾病鏈夎冻澶熺殑绌洪棿');
+ }
+};
+
+//娣诲姞鎴愬搧鍒ゆ柇鏄惁鍙互鏀句笅
+const findBestFitPosition = (layoutIndex, newRect) => {
+ const layout = layouts.value[layoutIndex];
+ const obstacles = layout.glassDetails.filter(r => !r.isRemain);
+ let bestFit = null;
+ let minAreaDifference = Infinity;
+
+ const remainingAreas = calculateRemainingAreas(layout.width, layout.height, obstacles);
+ remainingAreas.forEach(area => {
+ if (newRect.width <= area.width && newRect.height <= area.height) {
+ const areaDifference = Math.abs(area.width * area.height - newRect.width * newRect.height);
+ if (areaDifference < minAreaDifference) {
+ minAreaDifference = areaDifference;
+ bestFit = {
+ x: area.x,
+ y: area.y,
+ width: newRect.width,
+ height: newRect.height
+ };
+ }
+ }
+ });
+
+ return bestFit;
+};
+
+const isSelected = (layoutIndex, rectIndex) => {
+ return focusIndex.value &&
+ focusIndex.value.layoutIndex === layoutIndex &&
+ focusIndex.value.rectIndex === rectIndex;
+};
+
+//鐗堝浘鍐呭鏍峰紡鍔犺浇
+const layoutContainerStyle = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const scale = Math.min(0.25
+ );
+ return {
+ position: 'absolute',
+ left: `${layout.leftTrim * scale}px`,
+ bottom: `${layout.upTrim * scale}px`,
+ width: `${layout.width * scale}px`,
+ height: `${layout.height * scale}px`,
+ overflow: 'visible',
+ //border: '1px solid #ccc',
+ background: '#fff'
+ };
+};
+
+const layoutContainerStyle1 = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const scale = Math.min(0.25
+ );
+ return {
+ position: 'absolute',
+ left: `20px`,
+ top: `140px`,
+ width: `${layout.realWidth * scale}px`,
+ height: `${layout.realHeight * scale}px`,
+ overflow: 'visible',
+ //border: '1px solid #ccc',
+ background: '#fff'
+ };
+};
+
+//鐗堝浘鍐呭澶撮儴鏍峰紡鍔犺浇
+const layoutInfoStyle = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const scale = Math.min(0.25
+ );
+ return {
+ position: 'absolute',
+ left: `20px`,
+ top: `100px`,
+ background: 'none',
+ textAlign: 'center',
+ zIndex: 1000
+ };
+};
+
+//鐗堝浘鍐呭灏忕墖鏍峰紡鍔犺浇
+const rectStyle = (glassDetail, layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const scale = Math.min(0.25);
+ const isSelectedRect = isSelected(layoutIndex, layout.glassDetails.indexOf(glassDetail));
+
+ let style = {
+ position: 'absolute',
+ left: `${glassDetail.x * scale}px`,
+ top: `${glassDetail.y * scale}px`,
+ width: `${glassDetail.width * scale}px`,
+ height: `${glassDetail.height * scale}px`,
+ backgroundColor: glassDetail.isRemain ? '#f0f0f0' : themeColor.value,
+ border: '1px solid #000',
+ cursor: 'pointer',
+ draggable: !glassDetail.isRemain,
+ zIndex: glassDetail.isRemain ? 1 : 2
+ };
+
+ // 濡傛灉琚�変腑锛屽垯娣诲姞鍐呬晶绾㈡
+ if (isSelectedRect) {
+ style.boxShadow = 'inset 0 0 0 2px red';
+ }
+
+ return style;
+};
+
+const rectStyle1 = (glassDetail, layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const scale = Math.min(0.25);
+ const isSelectedRect = isSelected(layoutIndex, layout.glassDetails.indexOf(glassDetail));
+
+ let style = {
+ position: 'absolute',
+ left: `${glassDetail.x * scale}px`,
+ top: `${glassDetail.y * scale}px`,
+ width: `${glassDetail.width * scale}px`,
+ height: `${glassDetail.height * scale}px`,
+ backgroundColor: glassDetail.isRemain ? '#f0f0f0' : themeColor.value,
+ border: '1px solid #000',
+ cursor: 'pointer',
+ draggable: !glassDetail.isRemain,
+ zIndex: glassDetail.isRemain ? 1 : 2
+ };
+
+ // 濡傛灉琚�変腑锛屽垯娣诲姞鍐呬晶绾㈡
+ if (isSelectedRect) {
+ style.boxShadow = 'inset 0 0 0 2px red';
+ }
+
+ return style;
+};
+
+//鐐瑰嚮灏忕墖
+const handleRectClick = (layoutIndex, rectIndex) => {
+ // if (dragging.value) {
+ // return;
+ // }
+
+ focusIndex.value = { layoutIndex, rectIndex };
+ emit('rectClicked', layoutIndex, rectIndex);
+};
+
+//灏忕墖鍙抽敭鑿滃崟鍔熻兘
+const handleRectRightClick = (layoutIndex, rectIndex) => {
+ const glassDetail = layouts.value[layoutIndex].glassDetails[rectIndex];
+ if (glassDetail.isRemain) return;
+ document.querySelectorAll('.context-menu').forEach(el => el.remove());
+
+ const contextMenu = document.createElement('div');
+ contextMenu.className = 'context-menu';
+ contextMenu.style.position = 'absolute';
+ contextMenu.style.left = `${event.clientX}px`;
+ contextMenu.style.top = `${event.clientY}px`;
+ contextMenu.style.backgroundColor = '#fff';
+ contextMenu.style.border = '1px solid #ccc';
+ contextMenu.style.padding = '5px';
+ contextMenu.style.zIndex = 1001;
+
+ const rotateItem = document.createElement('div');
+ rotateItem.textContent = '鏃嬭浆';
+ rotateItem.style.cursor = 'pointer';
+ rotateItem.addEventListener('click', () => {
+ rotateRect(layoutIndex, rectIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveUpAndRotateItem = document.createElement('div');
+ moveUpAndRotateItem.textContent = '鍚戜笂绉诲姩骞舵棆杞�';
+ moveUpAndRotateItem.style.cursor = 'pointer';
+ moveUpAndRotateItem.addEventListener('click', () => {
+ moveRectAndRotate(layoutIndex, rectIndex, 'down');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveDownAndRotateItem = document.createElement('div');
+ moveDownAndRotateItem.textContent = '鍚戜笅绉诲姩骞舵棆杞�';
+ moveDownAndRotateItem.style.cursor = 'pointer';
+ moveDownAndRotateItem.addEventListener('click', () => {
+ moveRectAndRotate(layoutIndex, rectIndex, 'up');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveLeftAndRotateItem = document.createElement('div');
+ moveLeftAndRotateItem.textContent = '鍚戝乏绉诲姩骞舵棆杞�';
+ moveLeftAndRotateItem.style.cursor = 'pointer';
+ moveLeftAndRotateItem.addEventListener('click', () => {
+ moveRectAndRotate(layoutIndex, rectIndex, 'left');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveRightAndRotateItem = document.createElement('div');
+ moveRightAndRotateItem.textContent = '鍚戝彸绉诲姩骞舵棆杞�';
+ moveRightAndRotateItem.style.cursor = 'pointer';
+ moveRightAndRotateItem.addEventListener('click', () => {
+ moveRectAndRotate(layoutIndex, rectIndex, 'right');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveUpItem = document.createElement('div');
+ moveUpItem.textContent = '鍚戜笂绉诲姩';
+ moveUpItem.style.cursor = 'pointer';
+ moveUpItem.addEventListener('click', () => {
+ moveRect(layoutIndex, rectIndex, 'down');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveDownItem = document.createElement('div');
+ moveDownItem.textContent = '鍚戜笅绉诲姩';
+ moveDownItem.style.cursor = 'pointer';
+ moveDownItem.addEventListener('click', () => {
+ moveRect(layoutIndex, rectIndex, 'up');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveLeftItem = document.createElement('div');
+ moveLeftItem.textContent = '鍚戝乏绉诲姩';
+ moveLeftItem.style.cursor = 'pointer';
+ moveLeftItem.addEventListener('click', () => {
+ moveRect(layoutIndex, rectIndex, 'left');
+ document.body.removeChild(contextMenu);
+ });
+
+ const moveRightItem = document.createElement('div');
+ moveRightItem.textContent = '鍚戝彸绉诲姩';
+ moveRightItem.style.cursor = 'pointer';
+ moveRightItem.addEventListener('click', () => {
+ moveRect(layoutIndex, rectIndex, 'right');
+ document.body.removeChild(contextMenu);
+ });
+
+ const deleteItem = document.createElement('div');
+ deleteItem.textContent = '鍒犻櫎';
+ deleteItem.style.cursor = 'pointer';
+ deleteItem.addEventListener('click', () => {
+ deleteRect(layoutIndex, rectIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const addItem = document.createElement('div');
+ addItem.textContent = '娣诲姞鎴愬搧';
+ addItem.style.cursor = 'pointer';
+ addItem.addEventListener('click', () => {
+ showAddDialog(layoutIndex, rectIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const mirrorXItem = document.createElement('div');
+ mirrorXItem.textContent = 'X闀滃儚';
+ mirrorXItem.style.cursor = 'pointer';
+ mirrorXItem.addEventListener('click', () => {
+ mirrorLayoutX(layoutIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const mirrorYItem = document.createElement('div');
+ mirrorYItem.textContent = 'Y闀滃儚';
+ mirrorYItem.style.cursor = 'pointer';
+ mirrorYItem.addEventListener('click', () => {
+ mirrorLayoutY(layoutIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ contextMenu.appendChild(rotateItem);
+ contextMenu.appendChild(moveUpAndRotateItem);
+ contextMenu.appendChild(moveDownAndRotateItem);
+ contextMenu.appendChild(moveLeftAndRotateItem);
+ contextMenu.appendChild(moveRightAndRotateItem);
+ contextMenu.appendChild(moveUpItem);
+ contextMenu.appendChild(moveDownItem);
+ contextMenu.appendChild(moveLeftItem);
+ contextMenu.appendChild(moveRightItem);
+ contextMenu.appendChild(deleteItem);
+ contextMenu.appendChild(addItem);
+ contextMenu.appendChild(mirrorXItem);
+ contextMenu.appendChild(mirrorYItem);
+
+ document.body.appendChild(contextMenu);
+};
+
+//浣欐枡鍙抽敭鑿滃崟鍔熻兘
+const handleGrayRectRightClick = (layoutIndex, rectIndex,glassDetails) => {
+ //const glassDetail = glassDetails[rectIndex];
+ if (!glassDetails.isRemain) return;
+ document.querySelectorAll('.context-menu').forEach(el => el.remove());
+
+ const contextMenu = document.createElement('div');
+ contextMenu.className = 'context-menu';
+ contextMenu.style.position = 'absolute';
+ contextMenu.style.left = `${event.clientX}px`;
+ contextMenu.style.top = `${event.clientY}px`;
+ contextMenu.style.backgroundColor = '#fff';
+ contextMenu.style.border = '1px solid #ccc';
+ contextMenu.style.padding = '5px';
+ contextMenu.style.zIndex = 1001;
+
+ const addItem = document.createElement('div');
+ addItem.textContent = '娣诲姞鎴愬搧';
+ addItem.style.cursor = 'pointer';
+ addItem.addEventListener('click', () => {
+ showAddDialog(layoutIndex, rectIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const mirrorXItem = document.createElement('div');
+ mirrorXItem.textContent = 'X闀滃儚';
+ mirrorXItem.style.cursor = 'pointer';
+ mirrorXItem.addEventListener('click', () => {
+ mirrorLayoutX(layoutIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ const mirrorYItem = document.createElement('div');
+ mirrorYItem.textContent = 'Y闀滃儚';
+ mirrorYItem.style.cursor = 'pointer';
+ mirrorYItem.addEventListener('click', () => {
+ mirrorLayoutY(layoutIndex);
+ document.body.removeChild(contextMenu);
+ });
+
+ contextMenu.appendChild(addItem);
+ contextMenu.appendChild(mirrorXItem);
+ contextMenu.appendChild(mirrorYItem);
+
+ document.body.appendChild(contextMenu);
+};
+
+//灏忕墖榧犳爣鎸変笅浜嬩欢
+// const handleRectDragStart = (layoutIndex, rectIndex) => {
+// const layout = layouts.value[layoutIndex];
+// const glassDetail = layout.glassDetails[rectIndex];
+// if (glassDetail.isRemain) return;
+//
+// dragRect.value = { layoutIndex, rectIndex };
+// dragStartPos.value = {
+// x: event.clientX,
+// y: event.clientY
+// };
+// };
+
+// //灏忕墖榧犳爣绉诲姩浜嬩欢
+// const handleRectDragging = (event) => {
+// if (!dragRect.value) return;
+//
+// // 濡傛灉杩樻病纭鏄嫋鎷斤紝鍒欏厛鍒ゆ柇鏄惁杈惧埌鎷栨嫿闃堝��(渚嬪5鍍忕礌)
+// if (!dragging.value) {
+// const deltaX = event.clientX - dragStartPos.value.x;
+// const deltaY = event.clientY - dragStartPos.value.y;
+// const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+//
+// // 濡傛灉绉诲姩璺濈灏忎簬闃堝�硷紝鍒欒涓烘槸鐐瑰嚮鑰岄潪鎷栨嫿
+// if (distance < 5) {
+// return;
+// }
+//
+// // 杈惧埌闃堝�硷紝纭鏄嫋鎷芥搷浣�
+// dragging.value = true;
+// }
+//
+// const layoutIndex = dragRect.value.layoutIndex;
+// const rectIndex = dragRect.value.rectIndex;
+// const layout = layouts.value[layoutIndex];
+// const glassDetail = layout.glassDetails[rectIndex];
+//
+// // 淇濆瓨鍘熷鍧愭爣鐢ㄤ簬璁＄畻鍋忕Щ閲�
+// const originalX = glassDetail.x;
+// const originalY = glassDetail.y;
+//
+// const scale = Math.min(
+// (props.gw - 100) / layout.width,
+// (props.gh - 100) / layout.height
+// );
+//
+// const deltaX = event.clientX - dragStartPos.value.x;
+// const deltaY = event.clientY - dragStartPos.value.y;
+//
+// const newRect = { ...glassDetail };
+// newRect.x += deltaX / scale;
+// newRect.y += deltaY / scale;
+//
+// const otherRects = layout.glassDetails.filter(r => !r.isRemain && r !== glassDetail);
+// let isValidMove = true;
+//
+// otherRects.forEach(otherRect => {
+// if (checkOverlap(newRect, otherRect)) {
+// isValidMove = false;
+// }
+// });
+//
+// if (newRect.x < 0 || newRect.y < 0 ||
+// newRect.x + newRect.width > layout.width ||
+// newRect.y + newRect.height > layout.height) {
+// isValidMove = false;
+// }
+//
+// if (isValidMove) {
+// glassDetail.x = newRect.x;
+// glassDetail.y = newRect.y;
+//
+// // 鏇存柊glassPoint鍧愭爣
+// if (glassDetail.glassPoint && Array.isArray(glassDetail.glassPoint)) {
+// const offsetX = glassDetail.x - originalX;
+// const offsetY = glassDetail.y - originalY;
+//
+// glassDetail.glassPoint.forEach(point => {
+// point.X += offsetX;
+// point.Y += offsetY;
+// // 娣诲姞绮惧害鎺у埗
+// point.X = parseFloat(point.X.toFixed(2));
+// point.Y = parseFloat(point.Y.toFixed(2));
+// });
+// }
+//
+// dragStartPos.value = {
+// x: event.clientX,
+// y: event.clientY
+// };
+// adjustGrayRectangles(layoutIndex);
+// }
+// };
+
+// //灏忕墖榧犳爣鏉惧紑浜嬩欢
+// const handleRectDragEnd = () => {
+// dragging.value = false;
+// dragRect.value = null;
+// dragStartPos.value = { x: 0, y: 0 };
+// if (dragRect.value) {
+// const layoutIndex = dragRect.value.layoutIndex;
+// const rectIndex = dragRect.value.rectIndex;
+// const glassDetail = layouts.value[layoutIndex].glassDetails[rectIndex];
+// const layout = layouts.value[layoutIndex];
+// const scale = Math.min(
+// (props.gw - 100) / layout.width,
+// (props.gh - 100) / layout.height
+// );
+//
+// glassDetail.x = parseFloat(glassDetail.x.toFixed(2));
+// glassDetail.y = parseFloat(glassDetail.y.toFixed(2));
+// adjustAlignmentPosition(layoutIndex, rectIndex);
+// }
+//
+// dragging.value = false;
+// dragRect.value = null;
+// };
+
+const adjustAlignmentPosition = (layoutIndex, rectIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const glassDetail = layout.glassDetails[rectIndex];
+ const otherRects = layout.glassDetails.filter((r, i) => i !== rectIndex);
+
+ const threshold = Math.max(glassDetail.width, glassDetail.height) * 0.1;
+
+ otherRects.forEach(otherRect => {
+ // 姘村钩瀵归綈
+ if (Math.abs(glassDetail.x - otherRect.x) < threshold) {
+ glassDetail.x = Math.round((glassDetail.x + otherRect.x) / 2);
+ }
+ // 姘村钩瀵归綈鍙充晶杈圭紭
+ if (Math.abs((glassDetail.x + glassDetail.width) - (otherRect.x + otherRect.width)) < threshold) {
+ glassDetail.x = Math.round((otherRect.x + otherRect.width - glassDetail.width));
+ }
+ // 鍨傜洿瀵归綈
+ if (Math.abs(glassDetail.y - otherRect.y) < threshold) {
+ glassDetail.y = Math.round((glassDetail.y + otherRect.y) / 2);
+ }
+ // 鍨傜洿瀵归綈涓婅竟缂�
+ if (Math.abs((glassDetail.y + glassDetail.height) - (otherRect.y + otherRect.height)) < threshold) {
+ glassDetail.y = Math.round((otherRect.y + otherRect.height - glassDetail.height));
+ }
+ });
+
+ // 纭繚鐭╁舰涓嶄細瓒呭嚭甯冨眬杈圭晫
+ glassDetail.x = Math.max(0, glassDetail.x);
+ glassDetail.y = Math.max(0, glassDetail.y);
+ glassDetail.x = Math.min(glassDetail.x, layout.width - glassDetail.width);
+ glassDetail.y = Math.min(glassDetail.y, layout.height - glassDetail.height);
+
+ // 璋冩暣鍚庨噸鏂拌绠楃伆鑹蹭綑鏂�
+ adjustGrayRectangles(layoutIndex);
+};
+
+const mergeAdjacentGrayRects = (glassDetails, totalWidth, totalHeight) => {
+ const grayRects = glassDetails.filter(r => r.isRemain);
+ const nonGrayRects = glassDetails.filter(r => !r.isRemain);
+
+ // 鎸夊潗鏍囨帓搴忥紝浼樺厛鎸墆鍧愭爣锛屽叾娆℃寜x鍧愭爣锛堣繖鏍锋洿绗﹀悎浠庝笂鍒颁笅銆佷粠宸﹀埌鍙崇殑闃呰涔犳儻锛�
+ grayRects.sort((a, b) => {
+ if (a.y !== b.y) return a.y - b.y;
+ return a.x - b.x;
+ });
+
+ if (grayRects.length === 0) return;
+
+ const merged = [];
+ let current = { ...grayRects[0] };
+
+ // 閬嶅巻鎵�鏈変綑鏂欑煩褰㈣繘琛屽悎骞�
+ for (let i = 1; i < grayRects.length; i++) {
+ const next = grayRects[i];
+
+ // 妫�鏌ユ槸鍚﹀彲浠ユ按骞冲悎骞讹紙鍚屼竴琛岋紝楂樺害鐩稿悓锛岀浉閭伙級
+ if (current.y === next.y &&
+ current.height === next.height &&
+ current.x + current.width === next.x) {
+ // 姘村钩鍚堝苟
+ current.width += next.width;
+ }
+ // 妫�鏌ユ槸鍚﹀彲浠ュ瀭鐩村悎骞讹紙鍚屼竴鍒楋紝瀹藉害鐩稿悓锛岀浉閭伙級
+ else if (current.x === next.x &&
+ current.width === next.width &&
+ current.y + current.height === next.y) {
+ // 鍨傜洿鍚堝苟
+ current.height += next.height;
+ }
+ else {
+ // 鏃犳硶鍚堝苟锛屼繚瀛樺綋鍓嶇煩褰紝寮�濮嬫柊鐨勫悎骞�
+ merged.push({
+ x: current.x,
+ y: current.y,
+ width: current.width,
+ height: current.height,
+ isRemain: true
+ });
+ current = { ...next };
+ }
+ }
+
+ // 娣诲姞鏈�鍚庝竴涓煩褰�
+ merged.push({
+ x: current.x,
+ y: current.y,
+ width: current.width,
+ height: current.height,
+ isRemain: true
+ });
+
+ // 閲嶆柊鏋勫缓鏁扮粍锛氶潪浣欐枡 + 鍚堝苟鍚庣殑浣欐枡
+ glassDetails.splice(0, glassDetails.length, ...nonGrayRects, ...merged);
+};
+
+// 纭繚杩斿洖鐨勫尯鍩熶笉閲嶅彔
+const calculateRemainingAreas = (totalWidth, totalHeight, obstacles) => {
+ // 浠庢暣涓師鐗囧紑濮�
+ let remaining = [{ x: 0, y: 0, width: totalWidth, height: totalHeight }];
+
+ // 閫愪釜澶勭悊闅滅鐗╋紙宸叉斁缃殑鐜荤拑鐗囷級
+ obstacles.forEach(obstacle => {
+ remaining = cutRemainingAreas(remaining, obstacle, totalWidth, totalHeight);
+ });
+
+ // 瀵圭粨鏋滆繘琛屾帓搴忥紝纭繚涓�鑷存��
+ remaining.sort((a, b) => {
+ if (a.x !== b.x) return a.x - b.x;
+ return a.y - b.y;
+ });
+
+ return remaining;
+};
+
+
+// 璋冩暣鍚庨噸鏂拌绠楃伆鑹蹭綑鏂�
+const adjustGrayRectangles = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const glassDetails = layout.glassDetails;
+
+ // 1. 绛涢�夊嚭闈炰綑鏂欑殑鐜荤拑鐗囷紙鍗冲疄闄呰鍒囧壊鐨勭幓鐠冪墖锛�
+ const nonGrayRects = glassDetails.filter(glassDetail => !glassDetail.isRemain);
+
+ // 2. 璁＄畻鍓╀綑鍙敤鍖哄煙
+ let remainingAreas = calculateRemainingAreas(layout.width, layout.height, nonGrayRects);
+
+ // 3. 鍘婚噸澶勭悊 - 鏇翠弗鏍肩殑鍘婚噸閫昏緫
+ const uniqueArr = removeDuplicateAreas(remainingAreas);
+
+ // 4. 鑾峰彇褰撳墠宸插瓨鍦ㄧ殑浣欐枡鐭╁舰锛堥渶瑕佷繚鐣欏紩鐢ㄤ互渚挎洿鏂帮級
+ const currentGrayRects = glassDetails.filter(r => r.isRemain);
+
+ // 5. 娓呴櫎鎵�鏈夌幇鏈夌殑浣欐枡鐭╁舰
+ // 鍏堟敹闆嗛潪浣欐枡鐭╁舰
+ const nonRemainRects = glassDetails.filter(r => !r.isRemain);
+
+ // 6. 閲嶆柊鏋勫缓鐜荤拑璇︽儏鏁扮粍
+ // 淇濈暀闈炰綑鏂欑煩褰�
+ const newGlassDetails = [...nonRemainRects];
+
+ // 娣诲姞鏂扮殑浣欐枡鐭╁舰
+ uniqueArr.forEach((area) => {
+ newGlassDetails.push({
+ x: area.x,
+ y: area.y,
+ width: area.width,
+ height: area.height,
+ isRemain: true
+ });
+ });
+
+ // 7. 鏇存柊甯冨眬鐨勭幓鐠冭鎯�
+ layout.glassDetails = newGlassDetails;
+
+ // 8. 鍚堝苟鐩搁偦鐨勪綑鏂欑煩褰�
+ mergeAdjacentGrayRects(layout.glassDetails, layout.width, layout.height);
+};
+
+
+const removeDuplicateAreas = (areas) => {
+ const result = [];
+
+ areas.forEach(area => {
+ // 妫�鏌ユ槸鍚︿笌宸插瓨鍦ㄧ殑鍖哄煙閲嶅彔鎴栫浉绛�
+ const isDuplicate = result.some(existingArea => {
+ return (
+ existingArea.x === area.x &&
+ existingArea.y === area.y &&
+ existingArea.width === area.width &&
+ existingArea.height === area.height
+ );
+ });
+
+ if (!isDuplicate) {
+ result.push(area);
+ }
+ });
+
+ return result;
+};
+
+
+
+//鏃嬭浆鏂规硶
+const rotateRect = (layoutIndex, rectIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const glassDetail = layout.glassDetails[rectIndex];
+ const originalState = { ...glassDetail };
+
+ const temp = glassDetail.width;
+ glassDetail.width = glassDetail.height;
+ glassDetail.height = temp;
+
+ const otherRects = layout.glassDetails.filter(r => !r.isRemain && r !== glassDetail);
+ let isValidRotation = true;
+
+ otherRects.forEach(otherRect => {
+ if (checkOverlap(glassDetail, otherRect)) {
+ isValidRotation = false;
+ }
+ });
+
+ if (glassDetail.x + glassDetail.width > layout.width || glassDetail.y + glassDetail.height > layout.height) {
+ isValidRotation = false;
+ }
+
+ if (isValidRotation) {
+ // 鏇存柊glassPoint鍧愭爣锛堝鏋滃瓨鍦級
+ if (glassDetail.glassPoint && Array.isArray(glassDetail.glassPoint)) {
+ // 淇濆瓨鍘熷鐐瑰潗鏍�
+ const originalPoints = JSON.parse(JSON.stringify(glassDetail.glassPoint));
+
+ // 鏃嬭浆鐐瑰潗鏍囷紙浠ョ煩褰㈠乏涓婅涓哄師鐐圭殑鏃嬭浆锛�
+ glassDetail.glassPoint.forEach((point, index) => {
+ // 璁＄畻鐩稿浜庣煩褰㈠乏涓婅鐨勫潗鏍�
+ const relX = originalPoints[index].X - originalState.x;
+ const relY = originalPoints[index].Y - originalState.y;
+
+ // 鏃嬭浆90搴﹀悗鐨勫潗鏍囷紙椤烘椂閽堬級
+ point.X = originalState.x + relY;
+ point.Y = originalState.y + (originalState.width - relX);
+ // 娣诲姞绮惧害鎺у埗
+ point.X = parseFloat(point.X.toFixed(2));
+ point.Y = parseFloat(point.Y.toFixed(2));
+ });
+ }
+ adjustGrayRectangles(layoutIndex);
+ } else {
+ glassDetail.width = originalState.width;
+ glassDetail.height = originalState.height;
+ ElMessage.warning('鏃犳硶鏃嬭浆锛屽瓨鍦ㄩ噸鍙犳垨瓒呭嚭杈圭晫');
+ }
+};
+
+//绉诲姩鏃嬭浆鏂规硶
+const moveRectAndRotate = (layoutIndex, rectIndex, direction) => {
+ const layout = layouts.value[layoutIndex];
+ const glassDetail = layout.glassDetails[rectIndex];
+ const grayRects = layout.glassDetails.filter(r => r.isRemain);
+
+ const temp = glassDetail.width;
+ glassDetail.width = glassDetail.height;
+ glassDetail.height = temp;
+
+ const canPlace = grayRects.some(grayRect => {
+ return grayRect.width >= glassDetail.width && grayRect.height >= glassDetail.height;
+ });
+
+ if (!canPlace) {
+ const temp = glassDetail.width;
+ glassDetail.width = glassDetail.height;
+ glassDetail.height = temp;
+ ElMessage.warning('鏃犳硶鏃嬭浆锛屾病鏈夎冻澶熺殑绌洪棿');
+ return;
+ }
+
+ adjustGrayRectangles(layoutIndex);
+ moveRect(layoutIndex, rectIndex, direction);
+};
+
+//绉诲姩鏂规硶
+const moveRect = (layoutIndex, rectIndex, direction) => {
+ const layout = layouts.value[layoutIndex];
+ const glassDetail = layout.glassDetails[rectIndex];
+ const originalState = { ...glassDetail };
+
+ let maxStep = 0;
+ const obstacles = layout.glassDetails.filter(r => r.isRemain || r !== glassDetail);
+
+ switch (direction) {
+ case 'up':
+ maxStep = getAvailableSpaceUp(glassDetail, layout, obstacles);
+ break;
+ case 'down':
+ maxStep = getAvailableSpaceDown(glassDetail, layout, obstacles);
+ break;
+ case 'left':
+ maxStep = getAvailableSpaceLeft(glassDetail, layout, obstacles);
+ break;
+ case 'right':
+ maxStep = getAvailableSpaceRight(glassDetail, layout, obstacles);
+ break;
+ }
+
+ if (maxStep <= 0) {
+ ElMessage.warning('鏃犳硶绉诲姩锛屾病鏈夎冻澶熺殑绌洪棿');
+ return;
+ }
+
+
+ // 淇濆瓨鍘熷鍧愭爣
+ const originalX = glassDetail.x;
+ const originalY = glassDetail.y;
+
+ switch (direction) {
+ case 'up':
+ glassDetail.y += maxStep;
+ break;
+ case 'down':
+ glassDetail.y -= maxStep;
+ break;
+ case 'left':
+ glassDetail.x -= maxStep;
+ break;
+ case 'right':
+ glassDetail.x += maxStep;
+ break;
+ }
+
+ const otherRects = layout.glassDetails.filter(r => !r.isRemain && r !== glassDetail);
+ let isValidMove = true;
+
+ otherRects.forEach(otherRect => {
+ if (checkOverlap(glassDetail, otherRect)) {
+ isValidMove = false;
+ }
+ });
+
+ if (glassDetail.x < 0 || glassDetail.y < 0 ||
+ glassDetail.x + glassDetail.width > layout.width ||
+ glassDetail.y + glassDetail.height > layout.height) {
+ isValidMove = false;
+ }
+
+ if (isValidMove) {
+ // 鏇存柊glassPoint鍧愭爣
+ if (glassDetail.glassPoint && Array.isArray(glassDetail.glassPoint)) {
+ const offsetX = glassDetail.x - originalX;
+ const offsetY = glassDetail.y - originalY;
+
+ glassDetail.glassPoint.forEach(point => {
+ point.X += offsetX;
+ point.Y += offsetY;
+ // 娣诲姞绮惧害鎺у埗
+ point.X = parseFloat(point.X.toFixed(2));
+ point.Y = parseFloat(point.Y.toFixed(2));
+ });
+ }
+ adjustGrayRectangles(layoutIndex);
+ } else {
+ glassDetail.x = originalState.x;
+ glassDetail.y = originalState.y;
+ ElMessage.warning('鏃犳硶绉诲姩锛屽瓨鍦ㄩ噸鍙犳垨瓒呭嚭杈圭晫');
+ }
+};
+
+//鍒犻櫎灏忕墖
+const deleteRect = (layoutIndex, rectIndex) => {
+ const layout = layouts.value[layoutIndex];
+ layout.glassDetails.splice(rectIndex, 1);
+ adjustGrayRectangles(layoutIndex);
+};
+
+//鍒ゆ柇鍘熺墖璺熷皬鐗囩Щ鍔ㄦ槸鍚﹁秴鍑�
+const checkOverlap = (rect1, rect2) => {
+ return !(rect1.x + rect1.width <= rect2.x ||
+ rect1.x >= rect2.x + rect2.width ||
+ rect1.y + rect1.height <= rect2.y ||
+ rect1.y >= rect2.y + rect2.height);
+};
+
+//閲嶆柊璁＄畻浣欐枡鍧愭爣浠ュ強灏哄1
+// const calculateRemainingAreas = (totalWidth, totalHeight, obstacles) => {
+// let remaining = [{ x: 0, y: 0, width: totalWidth, height: totalHeight }];
+// obstacles.forEach(glassDetail => {
+// remaining = cutRemainingAreas(remaining, glassDetail,totalWidth,totalHeight);
+// });
+// return remaining;
+// };
+
+//閲嶆柊璁＄畻浣欐枡鍧愭爣浠ュ強灏哄2
+const cutRemainingAreas = (remainingAreas, obstacle, totalWidth, totalHeight) => {
+ const newRemaining = [];
+
+ remainingAreas.forEach(area => {
+ // 濡傛灉闅滅鐗╀笌褰撳墠鍖哄煙娌℃湁閲嶅彔锛屼繚鐣欏師鍖哄煙
+ if (!checkOverlap(area, obstacle)) {
+ newRemaining.push(area);
+ return;
+ }
+
+ // 璁＄畻閲嶅彔鍖哄煙鐨勮竟鐣�
+ const overlapLeft = Math.max(area.x, obstacle.x);
+ const overlapRight = Math.min(area.x + area.width, obstacle.x + obstacle.width);
+ const overlapTop = Math.max(area.y, obstacle.y);
+ const overlapBottom = Math.min(area.y + area.height, obstacle.y + obstacle.height);
+
+ // 鐢熸垚鍥涗釜鍙兘鐨勬柊鍖哄煙锛堜笂銆佷笅銆佸乏銆佸彸锛�
+
+ // 涓婃柟鍖哄煙
+ if (overlapTop > area.y) {
+ newRemaining.push({
+ x: area.x,
+ y: area.y,
+ width: area.width,
+ height: overlapTop - area.y
+ });
+ }
+
+ // 涓嬫柟鍖哄煙
+ if (overlapBottom < area.y + area.height) {
+ newRemaining.push({
+ x: area.x,
+ y: overlapBottom,
+ width: area.width,
+ height: area.y + area.height - overlapBottom
+ });
+ }
+
+ // 宸︽柟鍖哄煙锛堜粎鍦ㄩ噸鍙犲尯鍩熺殑鍨傜洿鑼冨洿鍐咃級
+ if (overlapLeft > area.x) {
+ const regionTop = overlapTop;
+ const regionBottom = overlapBottom;
+ newRemaining.push({
+ x: area.x,
+ y: regionTop,
+ width: overlapLeft - area.x,
+ height: regionBottom - regionTop
+ });
+ }
+
+ // 鍙虫柟鍖哄煙锛堜粎鍦ㄩ噸鍙犲尯鍩熺殑鍨傜洿鑼冨洿鍐咃級
+ if (overlapRight < area.x + area.width) {
+ const regionTop = overlapTop;
+ const regionBottom = overlapBottom;
+ newRemaining.push({
+ x: overlapRight,
+ y: regionTop,
+ width: area.x + area.width - overlapRight,
+ height: regionBottom - regionTop
+ });
+ }
+ });
+
+ return newRemaining;
+};
+
+//瀹氫箟姣忎釜鐗堝浘鐨勭患鍚堝唴瀹�
+const getCurrentRectInfo = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+/* const glassDetail = layout.glassDetails[focusIndex.value?.rectIndex || 0];
+ if (!glassDetail) return '';*/
+ const totalRects = layouts.value.length;
+ const currentRectIndex = layoutIndex + 1;
+ const width = layout.realWidth;
+ const height = layout.realHeight;
+ const percentage = (layout.usageRate * 100).toFixed(2) + '%';
+ return `${currentRectIndex}/${totalRects} ${width}脳${height} 脳1 ${percentage}`;
+};
+
+//鐐瑰嚮宸﹁竟鐗堝浘鍒囨崲
+const selectLayout = (layoutIndex) => {
+ selectedLayoutIndex.value = layoutIndex;
+};
+
+//鎶婁紶杈撶殑鏁版嵁璧嬪��
+const updateLayout = () => {
+ if (!layoutPanel.value) return;
+ layoutsHead.value = props.layoutData;
+ layouts.value = props.layoutData.layouts;
+};
+
+//鍚戜笂绉诲姩璁＄畻鍧愭爣
+const getAvailableSpaceUp = (glassDetail, layout, obstacles) => {
+ let maxSpace = layout.height - glassDetail.y - glassDetail.height;
+ obstacles.forEach(obstacle => {
+ if (obstacle.y > glassDetail.y + glassDetail.height &&
+ obstacle.x <= glassDetail.x + glassDetail.width &&
+ obstacle.x + obstacle.width >= glassDetail.x) {
+ maxSpace = Math.min(maxSpace, obstacle.y - (glassDetail.y + glassDetail.height));
+ }
+ });
+ return maxSpace;
+};
+
+//鍚戜笅绉诲姩璁＄畻鍧愭爣
+const getAvailableSpaceDown = (glassDetail, layout, obstacles) => {
+ let maxSpace = glassDetail.y;
+ obstacles.forEach(obstacle => {
+ if (obstacle.y + obstacle.height < glassDetail.y &&
+ obstacle.x <= glassDetail.x + glassDetail.width &&
+ obstacle.x + obstacle.width >= glassDetail.x) {
+ maxSpace = Math.min(maxSpace, glassDetail.y - (obstacle.y + obstacle.height));
+ }
+ });
+ return maxSpace;
+};
+
+//鍚戝乏绉诲姩璁＄畻鍧愭爣
+const getAvailableSpaceLeft = (glassDetail, layout, obstacles) => {
+ let maxSpace = glassDetail.x;
+ obstacles.forEach(obstacle => {
+ if (obstacle.x + obstacle.width < glassDetail.x &&
+ obstacle.y <= glassDetail.y + glassDetail.height &&
+ obstacle.y + obstacle.height >= glassDetail.y) {
+ maxSpace = Math.min(maxSpace, glassDetail.x - (obstacle.x + obstacle.width));
+ }
+ });
+ return maxSpace;
+};
+
+//鍚戝彸绉诲姩璁＄畻鍧愭爣
+const getAvailableSpaceRight = (glassDetail, layout, obstacles) => {
+ let maxSpace = layout.width - (glassDetail.x + glassDetail.width);
+ obstacles.forEach(obstacle => {
+ if (obstacle.x > glassDetail.x + glassDetail.width &&
+ obstacle.y <= glassDetail.y + glassDetail.height &&
+ obstacle.y + obstacle.height >= glassDetail.y) {
+ maxSpace = Math.min(maxSpace, obstacle.x - (glassDetail.x + glassDetail.width));
+ }
+ });
+ return maxSpace;
+};
+
+let moveInterval = null;
+
+//鎸変笅鎸夐敭涓婁笅宸﹀彸
+const handleKeyDown = (event) => {
+ if (!focusIndex.value) return;
+
+ const { layoutIndex, rectIndex } = focusIndex.value;
+ const layout = layouts.value[layoutIndex];
+ const glassDetail = layout.glassDetails[rectIndex];
+ const obstacles = layout.glassDetails.filter(r => r.isRemain || r !== glassDetail);
+
+ switch (event.key) {
+ case 'ArrowUp':
+ event.preventDefault();
+ if (!moveInterval) {
+ moveInterval = setInterval(() => {
+ moveRect(layoutIndex, rectIndex, 'down');
+ }, 50);
+ }
+ break;
+ case 'ArrowDown':
+ event.preventDefault();
+ if (!moveInterval) {
+ moveInterval = setInterval(() => {
+ moveRect(layoutIndex, rectIndex, 'up');
+ }, 50);
+ }
+ break;
+ case 'ArrowLeft':
+ event.preventDefault();
+ if (!moveInterval) {
+ moveInterval = setInterval(() => {
+ moveRect(layoutIndex, rectIndex, 'left');
+ }, 50);
+ }
+ break;
+ case 'ArrowRight':
+ event.preventDefault();
+ if (!moveInterval) {
+ moveInterval = setInterval(() => {
+ moveRect(layoutIndex, rectIndex, 'right');
+ }, 50);
+ }
+ break;
+ }
+};
+
+//鏉惧紑鎸夐敭涓婁笅宸﹀彸
+const handleKeyUp = (event) => {
+ if (event.key === 'ArrowUp' || event.key === 'ArrowDown' ||
+ event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+ if (moveInterval) {
+ clearInterval(moveInterval);
+ moveInterval = null;
+ }
+ }
+};
+
+//x闀滃儚
+const mirrorLayoutX = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const width = layout.width;
+ const glassDetails = [...layout.glassDetails]; // 鍒涘缓鍓湰閬垮厤鐩存帴淇敼
+
+ glassDetails.forEach(glassDetail => {
+ // 璁＄畻X闀滃儚鍚庣殑鍧愭爣
+ const newX = width - glassDetail.x - glassDetail.width;
+ const newY = glassDetail.y;
+
+ // 鏇存柊鐭╁舰浣嶇疆
+ glassDetail.x = newX;
+ glassDetail.y = newY;
+
+ // 鏇存柊glassPoint鍧愭爣
+ if (glassDetail.glassPoint && Array.isArray(glassDetail.glassPoint)) {
+ glassDetail.glassPoint.forEach(point => {
+ point.X = width - point.X;
+ point.X = parseFloat(point.X.toFixed(2));
+ point.Y = parseFloat(point.Y.toFixed(2));
+ });
+ }
+ });
+
+ // 鏇存柊甯冨眬
+ layout.glassDetails = glassDetails;
+ adjustGrayRectangles(layoutIndex);
+};
+
+//y闀滃儚
+const mirrorLayoutY = (layoutIndex) => {
+ const layout = layouts.value[layoutIndex];
+ const height = layout.height;
+ const glassDetails = [...layout.glassDetails]; // 鍒涘缓鍓湰閬垮厤鐩存帴淇敼
+
+ glassDetails.forEach(glassDetail => {
+ // 璁＄畻Y闀滃儚鍚庣殑鍧愭爣
+ const newX = glassDetail.x;
+ const newY = height - glassDetail.y - glassDetail.height;
+
+ // 鏇存柊鐭╁舰浣嶇疆
+ glassDetail.y = newY;
+
+ // 鏇存柊glassPoint鍧愭爣
+ if (glassDetail.glassPoint && Array.isArray(glassDetail.glassPoint)) {
+ glassDetail.glassPoint.forEach(point => {
+ point.Y = height - point.Y;
+ // 娣诲姞绮惧害鎺у埗
+ point.X = parseFloat(point.X.toFixed(2));
+ point.Y = parseFloat(point.Y.toFixed(2));
+ });
+ }
+ });
+
+ // 鏇存柊甯冨眬
+ layout.glassDetails = glassDetails;
+ adjustGrayRectangles(layoutIndex);
+};
+
+onMounted(() => {
+ fetchSettings(username);
+ updateLayout();
+
+ selectedLayoutIndex.value = 0;
+
+ clickEventListener = (event) => {
+ const contextMenus = document.querySelectorAll('.context-menu');
+ if (contextMenus.length > 0) {
+ contextMenus.forEach(menu => menu.remove());
+ }
+ };
+ document.addEventListener('click', clickEventListener);
+
+ document.addEventListener('keydown', handleKeyDown);
+ document.addEventListener('keyup', handleKeyUp);
+});
+
+onUnmounted(() => {
+ rectsElements.value = {};
+ if (clickEventListener) {
+ document.removeEventListener('click', clickEventListener);
+ clickEventListener = null;
+ }
+ document.removeEventListener('keydown', handleKeyDown);
+ document.removeEventListener('keyup', handleKeyUp);
+});
+</script>
+
+<style scoped>
+.layout-wrapper {
+ position: relative;
+ margin-top: 50px;
+}
+
+.layout-glassDetail {
+ user-select: none;
+}
+
+.layout-container {
+ position: relative;
+ overflow: visible;
+}
+
+.layout-info {
+ color: #444;
+ font-size: 12px;
+ background-color: #ffffff;
+ padding: 5px 10px;
+ border-radius: 3px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ font-weight: bold;
+}
+
+.glassDetail-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 5px;
+ min-width: 60px;
+ min-height: 20px;
+ white-space: normal;
+ overflow-wrap: break-word;
+}
+
+.size {
+ font-size: 12px;
+ color: #444;
+ white-space: normal;
+ word-wrap: break-word;
+}
+
+.jia-hao, .liuchengka {
+ font-size: 14px;
+ font-weight: bold;
+ white-space: normal;
+ word-wrap: break-word;
+}
+
+.sidebar-item {
+ padding: 10px;
+ cursor: pointer;
+}
+
+.sidebar-item.selected {
+ background: #ddd;
+}
+
+.context-menu {
+ position: absolute;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ padding: 5px;
+ z-index: 1001;
+}
+
+.context-menu div {
+ padding: 5px;
+ cursor: pointer;
+}
+
+.context-menu div:hover {
+ background-color: #f0f0f0;
+}
+
+.folder-header {
+ font-weight: bold;
+}
+
+.folder-header:hover {
+ background-color: #d0d0d0 !important;
+}
+
+.folder-content {
+ border-left: 2px solid #ccc;
+ margin-left: 5px;
+}
+</style>
--
Gitblit v1.8.0