| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div style="display: flex; height: 100vh;">
|
|---|
| | | <!-- Sidebar -->
|
|---|
| | | <div class="sidebar" style="width: 200px; background: #f4f4f4; padding: 10px;">
|
|---|
| | | <div
|
|---|
| | | v-for="(layout, layoutIndex) in layouts"
|
|---|
| | | :key="layoutIndex"
|
|---|
| | | class="sidebar-item"
|
|---|
| | | @click="selectLayout(layoutIndex)"
|
|---|
| | | :class="{ 'selected': selectedLayoutIndex === layoutIndex }"
|
|---|
| | | >
|
|---|
| | | {{ layout.width }} × {{ layout.height }} × {{ layout.SameCount }}
|
|---|
| | | </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="layoutContainerStyle(layoutIndex)">
|
|---|
| | | <!-- 灰色矩形 -->
|
|---|
| | | <div
|
|---|
| | | v-for="(rect, rectIndex) in layout.rects.filter(r => r.isRemain)"
|
|---|
| | | :key="`gray-${rectIndex}`"
|
|---|
| | | :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
|
|---|
| | | class="layout-rect"
|
|---|
| | | :style="rectStyle(rect, layoutIndex)"
|
|---|
| | | @contextmenu.prevent="handleGrayRectRightClick(layoutIndex, rectIndex)"
|
|---|
| | | />
|
|---|
| | |
|
|---|
| | | <!-- 蓝色矩形 -->
|
|---|
| | | <div
|
|---|
| | | v-for="(rect, rectIndex) in layout.rects.filter(r => !r.isRemain)"
|
|---|
| | | :key="`blue-${rectIndex}`"
|
|---|
| | | :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
|
|---|
| | | class="layout-rect"
|
|---|
| | | :style="rectStyle(rect, layoutIndex)"
|
|---|
| | | @contextmenu.prevent="handleRectRightClick(layoutIndex, rectIndex)"
|
|---|
| | | @mousedown="handleRectDragStart(layoutIndex, rectIndex)"
|
|---|
| | | @mousemove="handleRectDragging"
|
|---|
| | | @mouseup="handleRectDragEnd"
|
|---|
| | | @mouseleave="handleRectDragEnd"
|
|---|
| | | >
|
|---|
| | | <div class="rect-content">
|
|---|
| | | <div class="size">{{ rect.w }}×{{ rect.h }}</div>
|
|---|
| | | <div v-if="showJiaHao" class="jia-hao">{{ rect.JiaHao }}</div>
|
|---|
| | | <div v-if="showProcessId" class="liuchengka">{{ rect.liuchengka }}</div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <!-- 提交按钮 -->
|
|---|
| | | <button @click="submitLayouts" style="position: fixed; bottom: 20px; right: 20px; padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">
|
|---|
| | | 保存调整
|
|---|
| | | </button>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script setup>
|
|---|
| | | import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
|---|
| | | import request from "@/utils/request";
|
|---|
| | | 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
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | 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 panelClass = ref('');
|
|---|
| | | const panelStyle = ref(props.style);
|
|---|
| | | const rectClass = ref('layout-rect');
|
|---|
| | | 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); // 新增：控制jia-hao的显示状态
|
|---|
| | | const showProcessId= ref(false);
|
|---|
| | | const themeColor=ref(null)
|
|---|
| | | // 提交布局数据到后端
|
|---|
| | | const submitLayouts = async () => {
|
|---|
| | | layouts.value.forEach(layout => {
|
|---|
| | | layout.rects.forEach(rect => {
|
|---|
| | | rect.x = Math.round(rect.x);
|
|---|
| | | rect.y = Math.round(rect.y);
|
|---|
| | | rect.w = Math.round(rect.w);
|
|---|
| | | rect.h = Math.round(rect.h);
|
|---|
| | | });
|
|---|
| | | });
|
|---|
| | | const savedProjectNo = localStorage.getItem('projectNo');
|
|---|
| | | const processId = savedProjectNo;
|
|---|
| | | const Layouts = layouts.value;
|
|---|
| | | request.post(`/glassOptimize/updateOptimizeResult/${processId}`, JSON.stringify({ Layouts }), {
|
|---|
| | | headers: {
|
|---|
| | | 'Content-Type': 'application/json'
|
|---|
| | | }
|
|---|
| | | }).then((res) => {
|
|---|
| | | if (res.code == 200 && res.data === true) {
|
|---|
| | | ElMessage.success(t('basicData.msg.saveSuccess'));
|
|---|
| | | } else {
|
|---|
| | | ElMessage.warning(res.msg);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | //获取优化设置
|
|---|
| | | 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);
|
|---|
| | | console.log(parsedData.display.frameNumber)
|
|---|
| | | if (parsedData.display && parsedData.display.frameNumber) {
|
|---|
| | | showJiaHao.value = parsedData.display.frameNumber;
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | if (parsedData.display && parsedData.display.orderNumber) {
|
|---|
| | | showProcessId.value = parsedData.display.orderNumber;
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | if (parsedData.display ) {
|
|---|
| | | themeColor.value = parsedData.display.themeColor;
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | console.log( parsedData);
|
|---|
| | | } 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,
|
|---|
| | | w: values[0],
|
|---|
| | | h: values[1],
|
|---|
| | | isRemain: false
|
|---|
| | | |
|---|
| | | };
|
|---|
| | | addNewRect(layoutIndex, newRect);
|
|---|
| | | })
|
|---|
| | | .catch(() => {
|
|---|
| | | // 用户取消
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const addNewRect = (layoutIndex, newRect) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | layout.rects.push(newRect);
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const layoutContainerStyle = (layoutIndex) => {
|
|---|
| | | const containerWidth = (props.gw - 210) / 2;
|
|---|
| | | const containerHeight = (props.gh - 100) / 3;
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const scale = Math.min(
|
|---|
| | | (props.gw - 100) / layout.width,
|
|---|
| | | (props.gh - 100) / layout.height
|
|---|
| | | );
|
|---|
| | | return {
|
|---|
| | | position: 'absolute',
|
|---|
| | | left: `${(props.gw - layout.width * scale) / 2}px`,
|
|---|
| | | top: `${(props.gh - layout.height * scale) / 2}px`,
|
|---|
| | | width: `${layout.width * scale}px`,
|
|---|
| | | height: `${layout.height * scale}px`,
|
|---|
| | | overflow: 'visible',
|
|---|
| | | border: '1px solid #ccc',
|
|---|
| | | background: '#fff'
|
|---|
| | | };
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const layoutInfoStyle = (layoutIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const scale = Math.min(
|
|---|
| | | (props.gw - 100) / layout.width,
|
|---|
| | | (props.gh - 100) / layout.height
|
|---|
| | | );
|
|---|
| | | return {
|
|---|
| | | position: 'absolute',
|
|---|
| | | left: `${(props.gw - layout.width * scale) / 2}px`,
|
|---|
| | | top: `${(props.gh - layout.height * scale) / 2 - 45}px`,
|
|---|
| | | background: 'none',
|
|---|
| | | textAlign: 'center',
|
|---|
| | | zIndex: 1000
|
|---|
| | | };
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const rectStyle = (rect, layoutIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const scale = Math.min(
|
|---|
| | | (props.gw - 100) / layout.width,
|
|---|
| | | (props.gh - 100) / layout.height
|
|---|
| | | );
|
|---|
| | | return {
|
|---|
| | | position: 'absolute',
|
|---|
| | | left: `${rect.x * scale}px`,
|
|---|
| | | top: `${rect.y * scale}px`,
|
|---|
| | | width: `${rect.w * scale}px`,
|
|---|
| | | height: `${rect.h * scale}px`,
|
|---|
| | | backgroundColor: rect.isRemain ? '#f0f0f0' : themeColor.value,
|
|---|
| | | border: '1px solid #000',
|
|---|
| | | cursor: 'pointer',
|
|---|
| | | draggable: !rect.isRemain,
|
|---|
| | | zIndex: rect.isRemain ? 1 : 2
|
|---|
| | | };
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleRectClick = (layoutIndex, rectIndex) => {
|
|---|
| | | focusIndex.value = { layoutIndex, rectIndex };
|
|---|
| | | emit('rectClicked', layoutIndex, rectIndex);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleRectRightClick = (layoutIndex, rectIndex) => {
|
|---|
| | | const rect = layouts.value[layoutIndex].rects[rectIndex];
|
|---|
| | | if (rect.isRemain) return;
|
|---|
| | |
|
|---|
| | | 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, 'up');
|
|---|
| | | document.body.removeChild(contextMenu);
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | const moveDownAndRotateItem = document.createElement('div');
|
|---|
| | | moveDownAndRotateItem.textContent = '向下移动并旋转';
|
|---|
| | | moveDownAndRotateItem.style.cursor = 'pointer';
|
|---|
| | | moveDownAndRotateItem.addEventListener('click', () => {
|
|---|
| | | moveRectAndRotate(layoutIndex, rectIndex, 'down');
|
|---|
| | | 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, 'up');
|
|---|
| | | document.body.removeChild(contextMenu);
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | const moveDownItem = document.createElement('div');
|
|---|
| | | moveDownItem.textContent = '向下移动';
|
|---|
| | | moveDownItem.style.cursor = 'pointer';
|
|---|
| | | moveDownItem.addEventListener('click', () => {
|
|---|
| | | moveRect(layoutIndex, rectIndex, 'down');
|
|---|
| | | 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);
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | 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);
|
|---|
| | |
|
|---|
| | | document.body.appendChild(contextMenu);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleGrayRectRightClick = (layoutIndex, rectIndex) => {
|
|---|
| | | const rect = layouts.value[layoutIndex].rects[rectIndex];
|
|---|
| | | if (!rect.isRemain) return;
|
|---|
| | |
|
|---|
| | | 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);
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | contextMenu.appendChild(addItem);
|
|---|
| | |
|
|---|
| | | document.body.appendChild(contextMenu);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleRectDragStart = (layoutIndex, rectIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | if (rect.isRemain) return;
|
|---|
| | |
|
|---|
| | | dragging.value = true;
|
|---|
| | | dragRect.value = { layoutIndex, rectIndex };
|
|---|
| | | dragStartPos.value = {
|
|---|
| | | x: event.clientX,
|
|---|
| | | y: event.clientY
|
|---|
| | | };
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleRectDragging = (event) => {
|
|---|
| | | if (!dragging.value || !dragRect.value) return;
|
|---|
| | |
|
|---|
| | | const layoutIndex = dragRect.value.layoutIndex;
|
|---|
| | | const rectIndex = dragRect.value.rectIndex;
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | 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 = { ...rect };
|
|---|
| | | newRect.x += deltaX / scale;
|
|---|
| | | newRect.y += deltaY / scale;
|
|---|
| | |
|
|---|
| | | // 检查是否与其他蓝色矩形重叠
|
|---|
| | | const otherRects = layout.rects.filter(r => !r.isRemain && r !== rect);
|
|---|
| | | let isValidMove = true;
|
|---|
| | | |
|---|
| | | otherRects.forEach(otherRect => {
|
|---|
| | | if (checkOverlap(newRect, otherRect)) {
|
|---|
| | | isValidMove = false;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 检查是否超出布局边界
|
|---|
| | | if (newRect.x < 0 || newRect.y < 0 ||
|
|---|
| | | newRect.x + newRect.w > layout.width ||
|
|---|
| | | newRect.y + newRect.h > layout.height) {
|
|---|
| | | isValidMove = false;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (isValidMove) {
|
|---|
| | | rect.x = newRect.x;
|
|---|
| | | rect.y = newRect.y;
|
|---|
| | | dragStartPos.value = {
|
|---|
| | | x: event.clientX,
|
|---|
| | | y: event.clientY
|
|---|
| | | };
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleRectDragEnd = () => {
|
|---|
| | | if (dragRect.value) {
|
|---|
| | | const layoutIndex = dragRect.value.layoutIndex;
|
|---|
| | | const rectIndex = dragRect.value.rectIndex;
|
|---|
| | | const rect = layouts.value[layoutIndex].rects[rectIndex];
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const scale = Math.min(
|
|---|
| | | (props.gw - 100) / layout.width,
|
|---|
| | | (props.gh - 100) / layout.height
|
|---|
| | | );
|
|---|
| | |
|
|---|
| | | // 拖动结束后自动对齐到最近的整数位置
|
|---|
| | | rect.x = Math.round(rect.x);
|
|---|
| | | rect.y = Math.round(rect.y);
|
|---|
| | |
|
|---|
| | | // 只调整位置对齐，不调整大小
|
|---|
| | | adjustAlignmentPosition(layoutIndex, rectIndex);
|
|---|
| | |
|
|---|
| | | // 调整灰色矩形
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | dragging.value = false;
|
|---|
| | | dragRect.value = null;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const adjustAlignmentPosition = (layoutIndex, rectIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | const otherRects = layout.rects.filter((r, i) => i !== rectIndex);
|
|---|
| | |
|
|---|
| | | const threshold = Math.max(rect.w, rect.h) * 0.1;
|
|---|
| | |
|
|---|
| | | otherRects.forEach(otherRect => {
|
|---|
| | | if (Math.abs(rect.x - otherRect.x) < threshold) {
|
|---|
| | | rect.x = Math.round((rect.x + otherRect.x) / 2);
|
|---|
| | | }
|
|---|
| | | if (Math.abs((rect.x + rect.w) - (otherRect.x + otherRect.w)) < threshold) {
|
|---|
| | | // 不调整宽度
|
|---|
| | | }
|
|---|
| | | if (Math.abs(rect.y - otherRect.y) < threshold) {
|
|---|
| | | rect.y = Math.round((rect.y + otherRect.y) / 2);
|
|---|
| | | }
|
|---|
| | | if (Math.abs((rect.y + rect.h) - (otherRect.y + otherRect.h)) < threshold) {
|
|---|
| | | // 不调整高度
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const mergeAdjacentGrayRects = (rects) => {
|
|---|
| | | const grayRects = rects.filter(r => r.isRemain);
|
|---|
| | | let merged = [];
|
|---|
| | | |
|---|
| | | grayRects.sort((a, b) => {
|
|---|
| | | if (a.x !== b.x) return a.x - b.x;
|
|---|
| | | return a.y - b.y;
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | if (grayRects.length === 0) return;
|
|---|
| | |
|
|---|
| | | merged.push({ ...grayRects[0] });
|
|---|
| | |
|
|---|
| | | for (let i = 1; i < grayRects.length; i++) {
|
|---|
| | | const last = merged[merged.length - 1];
|
|---|
| | | const current = grayRects[i];
|
|---|
| | |
|
|---|
| | | if (current.x === last.x + last.w && |
|---|
| | | current.y === last.y && |
|---|
| | | current.h === last.h) {
|
|---|
| | | last.w += current.w;
|
|---|
| | | last.x = Math.round(last.x);
|
|---|
| | | last.y = Math.round(last.y);
|
|---|
| | | last.w = Math.round(last.w);
|
|---|
| | | last.h = Math.round(last.h);
|
|---|
| | | } else if (current.y === last.y + last.h && |
|---|
| | | current.x === last.x && |
|---|
| | | current.w === last.w) {
|
|---|
| | | last.h += current.h;
|
|---|
| | | last.x = Math.round(last.x);
|
|---|
| | | last.y = Math.round(last.y);
|
|---|
| | | last.w = Math.round(last.w);
|
|---|
| | | last.h = Math.round(last.h);
|
|---|
| | | } else {
|
|---|
| | | merged.push({ |
|---|
| | | x: Math.round(current.x),
|
|---|
| | | y: Math.round(current.y),
|
|---|
| | | w: Math.round(current.w),
|
|---|
| | | h: Math.round(current.h),
|
|---|
| | | isRemain: true
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | const nonGray = rects.filter(r => !r.isRemain);
|
|---|
| | | rects.splice(0, rects.length, ...nonGray, ...merged);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const adjustGrayRectangles = (layoutIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rects = layout.rects;
|
|---|
| | | const nonGrayRects = rects.filter(rect => !rect.isRemain);
|
|---|
| | |
|
|---|
| | | const remainingAreas = calculateRemainingAreas(layout.width, layout.height, nonGrayRects);
|
|---|
| | |
|
|---|
| | | const currentGrayRects = rects.filter(r => r.isRemain);
|
|---|
| | | currentGrayRects.forEach((_, index) => {
|
|---|
| | | if (index >= remainingAreas.length) {
|
|---|
| | | rects.splice(index, 1);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | remainingAreas.forEach((area, index) => {
|
|---|
| | | if (index < currentGrayRects.length) {
|
|---|
| | | currentGrayRects[index].x = Math.round(area.x);
|
|---|
| | | currentGrayRects[index].y = Math.round(area.y);
|
|---|
| | | currentGrayRects[index].w = Math.round(area.w);
|
|---|
| | | currentGrayRects[index].h = Math.round(area.h);
|
|---|
| | | } else {
|
|---|
| | | rects.push({
|
|---|
| | | x: Math.round(area.x),
|
|---|
| | | y: Math.round(area.y),
|
|---|
| | | w: Math.round(area.w),
|
|---|
| | | h: Math.round(area.h),
|
|---|
| | | isRemain: true
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | mergeAdjacentGrayRects(rects);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const rotateRect = (layoutIndex, rectIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | const originalState = { ...rect };
|
|---|
| | |
|
|---|
| | | // 旋转矩形
|
|---|
| | | const temp = rect.w;
|
|---|
| | | rect.w = rect.h;
|
|---|
| | | rect.h = temp;
|
|---|
| | |
|
|---|
| | | // 检查旋转后是否与其他蓝色矩形重叠
|
|---|
| | | const otherRects = layout.rects.filter(r => !r.isRemain && r !== rect);
|
|---|
| | | let isValidRotation = true;
|
|---|
| | |
|
|---|
| | | otherRects.forEach(otherRect => {
|
|---|
| | | if (checkOverlap(rect, otherRect)) {
|
|---|
| | | isValidRotation = false;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 检查是否超出布局边界
|
|---|
| | | if (rect.x + rect.w > layout.width || rect.y + rect.h > layout.height) {
|
|---|
| | | isValidRotation = false;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (isValidRotation) {
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | } else {
|
|---|
| | | // 恢复原状
|
|---|
| | | rect.w = originalState.w;
|
|---|
| | | rect.h = originalState.h;
|
|---|
| | | ElMessage.warning('无法旋转，存在重叠或超出边界');
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const moveRectAndRotate = (layoutIndex, rectIndex, direction) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | const grayRects = layout.rects.filter(r => r.isRemain);
|
|---|
| | |
|
|---|
| | | // 旋转矩形
|
|---|
| | | const temp = rect.w;
|
|---|
| | | rect.w = rect.h;
|
|---|
| | | rect.h = temp;
|
|---|
| | |
|
|---|
| | | // 检查旋转后的矩形是否可以放置在某个灰色矩形的位置
|
|---|
| | | const canPlace = grayRects.some(grayRect => {
|
|---|
| | | return grayRect.w >= rect.w && grayRect.h >= rect.h;
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | if (!canPlace) {
|
|---|
| | | // 如果不能放置，恢复原状
|
|---|
| | | const temp = rect.w;
|
|---|
| | | rect.w = rect.h;
|
|---|
| | | rect.h = temp;
|
|---|
| | | ElMessage.warning('无法旋转，没有足够的空间');
|
|---|
| | | return;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 调整灰色矩形
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | |
|
|---|
| | | // 移动矩形
|
|---|
| | | moveRect(layoutIndex, rectIndex, direction);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const moveRect = (layoutIndex, rectIndex, direction) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[rectIndex];
|
|---|
| | | const originalState = { ...rect };
|
|---|
| | |
|
|---|
| | | // 计算剩余空间
|
|---|
| | | const remainingAreas = calculateRemainingAreas(layout.width, layout.height, layout.rects.filter(r => !r.isRemain));
|
|---|
| | | |
|---|
| | | // 根据方向计算可移动的最大步长
|
|---|
| | | let maxStep = 0;
|
|---|
| | | switch (direction) {
|
|---|
| | | case 'up':
|
|---|
| | | maxStep = rect.y;
|
|---|
| | | break;
|
|---|
| | | case 'down':
|
|---|
| | | maxStep = layout.height - (rect.y + rect.h);
|
|---|
| | | break;
|
|---|
| | | case 'left':
|
|---|
| | | maxStep = rect.x;
|
|---|
| | | break;
|
|---|
| | | case 'right':
|
|---|
| | | maxStep = layout.width - (rect.x + rect.w);
|
|---|
| | | break;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 移动步长，根据剩余空间动态调整
|
|---|
| | | const stepSize = maxStep;
|
|---|
| | | const actualStep = Math.min(maxStep, stepSize);
|
|---|
| | |
|
|---|
| | | // 移动矩形
|
|---|
| | | switch (direction) {
|
|---|
| | | case 'up':
|
|---|
| | | rect.y -= actualStep;
|
|---|
| | | break;
|
|---|
| | | case 'down':
|
|---|
| | | rect.y += actualStep;
|
|---|
| | | break;
|
|---|
| | | case 'left':
|
|---|
| | | rect.x -= actualStep;
|
|---|
| | | break;
|
|---|
| | | case 'right':
|
|---|
| | | rect.x +=actualStep;
|
|---|
| | | break;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 检查是否与其他蓝色矩形重叠
|
|---|
| | | const otherRects = layout.rects.filter(r => !r.isRemain && r !== rect);
|
|---|
| | | let isValidMove = true;
|
|---|
| | |
|
|---|
| | | otherRects.forEach(otherRect => {
|
|---|
| | | if (checkOverlap(rect, otherRect)) {
|
|---|
| | | isValidMove = false;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 检查是否超出布局边界
|
|---|
| | | if (rect.x < 0 || rect.y < 0 ||
|
|---|
| | | rect.x + rect.w > layout.width ||
|
|---|
| | | rect.y + rect.h > layout.height) {
|
|---|
| | | isValidMove = false;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (isValidMove) {
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | } else {
|
|---|
| | | // 恢复原状
|
|---|
| | | rect.x = originalState.x;
|
|---|
| | | rect.y = originalState.y;
|
|---|
| | | ElMessage.warning('无法移动，存在重叠或超出边界');
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const deleteRect = (layoutIndex, rectIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | layout.rects.splice(rectIndex, 1);
|
|---|
| | | adjustGrayRectangles(layoutIndex);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const checkOverlap = (rect1, rect2) => {
|
|---|
| | | return !(rect1.x + rect1.w <= rect2.x ||
|
|---|
| | | rect1.x >= rect2.x + rect2.w ||
|
|---|
| | | rect1.y + rect1.h <= rect2.y ||
|
|---|
| | | rect1.y >= rect2.y + rect2.h);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const calculateRemainingAreas = (totalWidth, totalHeight, obstacles) => {
|
|---|
| | | let remaining = [{ x: 0, y: 0, w: totalWidth, h: totalHeight }];
|
|---|
| | | obstacles.forEach(rect => {
|
|---|
| | | remaining = cutRemainingAreas(remaining, rect);
|
|---|
| | | });
|
|---|
| | | return remaining;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const cutRemainingAreas = (remainingAreas, obstacle) => {
|
|---|
| | | const newRemaining = [];
|
|---|
| | | remainingAreas.forEach(area => {
|
|---|
| | | if (checkOverlap(area, obstacle)) {
|
|---|
| | | if (obstacle.x > area.x) {
|
|---|
| | | newRemaining.push({
|
|---|
| | | x: area.x,
|
|---|
| | | y: area.y,
|
|---|
| | | w: obstacle.x - area.x,
|
|---|
| | | h: area.h
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | if (obstacle.x + obstacle.w < area.x + area.w) {
|
|---|
| | | newRemaining.push({
|
|---|
| | | x: obstacle.x + obstacle.w,
|
|---|
| | | y: area.y,
|
|---|
| | | w: area.w - (obstacle.x + obstacle.w - area.x),
|
|---|
| | | h: area.h
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | if (obstacle.y > area.y) {
|
|---|
| | | newRemaining.push({
|
|---|
| | | x: area.x,
|
|---|
| | | y: area.y,
|
|---|
| | | w: area.w,
|
|---|
| | | h: obstacle.y - area.y
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | if (obstacle.y + obstacle.h < area.y + area.h) {
|
|---|
| | | newRemaining.push({
|
|---|
| | | x: area.x,
|
|---|
| | | y: obstacle.y + obstacle.h,
|
|---|
| | | w: area.w,
|
|---|
| | | h: area.h - (obstacle.y + obstacle.h - area.y)
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | } else {
|
|---|
| | | newRemaining.push(area);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | return newRemaining;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const getCurrentRectInfo = (layoutIndex) => {
|
|---|
| | | const layout = layouts.value[layoutIndex];
|
|---|
| | | const rect = layout.rects[focusIndex.value?.rectIndex || 0];
|
|---|
| | | if (!rect) return '';
|
|---|
| | | const totalRects = layouts.value.length;
|
|---|
| | | const currentRectIndex = layoutIndex + 1;
|
|---|
| | | const width = layout.width;
|
|---|
| | | const height = layout.height;
|
|---|
| | | const percentage = ((rect.w / layout.width) * 100).toFixed(1) + '%';
|
|---|
| | | return `${currentRectIndex}/${totalRects} ${width}×${height} ×1 ${percentage}`;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const selectLayout = (layoutIndex) => {
|
|---|
| | | selectedLayoutIndex.value = layoutIndex;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const updateLayout = () => {
|
|---|
| | | if (!layoutPanel.value) return;
|
|---|
| | | layouts.value = props.layoutData.Layouts;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | let clickEventListener = null;
|
|---|
| | | onMounted(() => {
|
|---|
| | | fetchSettings(username);
|
|---|
| | | setTimeout(updateLayout, 500);
|
|---|
| | |
|
|---|
| | | selectedLayoutIndex.value = 0;
|
|---|
| | |
|
|---|
| | | // 添加全局点击事件监听器
|
|---|
| | | clickEventListener = (event) => {
|
|---|
| | | // 检查是否存在右键菜单
|
|---|
| | | const contextMenus = document.querySelectorAll('.context-menu');
|
|---|
| | | if (contextMenus.length > 0) {
|
|---|
| | | // 移除所有右键菜单
|
|---|
| | | contextMenus.forEach(menu => menu.remove());
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | document.addEventListener('click', clickEventListener);
|
|---|
| | |
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | onUnmounted(() => {
|
|---|
| | | rectsElements.value = {};
|
|---|
| | | // 移除全局点击事件监听器
|
|---|
| | | if (clickEventListener) {
|
|---|
| | | document.removeEventListener('click', clickEventListener);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style scoped>
|
|---|
| | | .layout-wrapper {
|
|---|
| | | position: relative;
|
|---|
| | | margin-top: 50px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .layout-rect {
|
|---|
| | | 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;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .rect-content {
|
|---|
| | | display: grid;
|
|---|
| | | grid-template-columns: 1fr;
|
|---|
| | | grid-template-rows: 1fr;
|
|---|
| | | padding: 5px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .size {
|
|---|
| | | grid-row: 1;
|
|---|
| | | grid-column: 1;
|
|---|
| | | color: #444;
|
|---|
| | | font-size: 12px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .jia-hao .liuchengka {
|
|---|
| | | grid-row: 2;
|
|---|
| | | grid-column: 1;
|
|---|
| | | margin: auto;
|
|---|
| | | font-size: 14px;
|
|---|
| | | font-weight: bold;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .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;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
