From 768e16999a8ce4bb500490ee76c659aa61ea1783 Mon Sep 17 00:00:00 2001
From: 廖井涛 <2265517004@qq.com>
Date: 星期二, 25 三月 2025 10:08:13 +0800
Subject: [PATCH] Merge branch 'master' of http://bore.pub:10439/r/ERP_override
---
north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/RectRenderer.vue | 68 +++++++++++++++-------------------
1 files changed, 30 insertions(+), 38 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/RectRenderer.vue b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/RectRenderer.vue
similarity index 75%
rename from north-glass-erp/northglass-erp/src/views/pp/glassOptimize/RectRenderer.vue
rename to north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/RectRenderer.vue
index 11e262d..55c3067 100644
--- a/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/RectRenderer.vue
+++ b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/RectRenderer.vue
@@ -1,18 +1,14 @@
<template>
<div ref="layoutPanel" :class="panelClass" :style="panelStyle">
- <div v-for="(layout, layoutIndex) in layouts" :key="layoutIndex"
- class="layout-wrapper">
-
+ <div v-for="(layout, layoutIndex) in layouts" :key="layoutIndex" class="layout-wrapper">
<!-- 甯冨眬淇℃伅鏍囩 -->
<div class="layout-info" :style="layoutInfoStyle(layoutIndex)">
- 甯冨眬{{ layoutIndex + 1 }}
+ {{ getCurrentRectInfo(layoutIndex) }}
</div>
<!-- 甯冨眬瀹瑰櫒 -->
- <div class="layout-container"
- :style="layoutContainerStyle(layoutIndex)">
-
- <div v-for="(rect, rectIndex) in layout.rects" :key="rectIndex"
+ <div class="layout-container" :style="layoutContainerStyle(layoutIndex)">
+ <div v-for="(rect, rectIndex) in layout.rects" :key="rectIndex"
:ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
:class="rectClass"
:style="rectStyle(rect, layoutIndex)"
@@ -31,41 +27,26 @@
import { ref, reactive, onMounted, onUnmounted } from 'vue';
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'
- }
+ 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 layoutContainerStyle = (layoutIndex) => {
- const containerWidth = (props.gw - 210) / 2; // 涓ゅ垪锛屾瘡鍒楀搴︿负gw鐨勪竴鍗婏紝鍑忓幓鍙宠竟璺�
- const containerHeight = (props.gh - 100) / 3; // 涓夎锛屾瘡琛岄珮搴︿负gh鐨勪笁鍒嗕箣涓�锛屽噺鍘讳笅杈硅窛
- const x = (layoutIndex % 2) * (containerWidth + 50); // 妯悜鎺掑垪锛屽姞涓�50px闂磋窛
- const y = Math.floor(layoutIndex / 2) * (containerHeight + 50); // 绾靛悜鎺掑垪锛屽姞涓�50px闂磋窛
+ const containerWidth = (props.gw - 210) / 2;
+ const containerHeight = (props.gh - 100) / 3;
+ const x = (layoutIndex % 2) * (containerWidth + 50);
+ const y = Math.floor(layoutIndex / 2) * (containerHeight + 50);
return {
position: 'absolute',
left: `${x}px`,
@@ -86,7 +67,7 @@
return {
position: 'absolute',
left: `${x}px`,
- top: `${y - 45}px`, // 灏嗘爣绛炬斁鍦ㄧ増鍥惧鍣ㄧ殑涓婃柟
+ top: `${y - 45}px`,
background: 'none',
textAlign: 'center',
zIndex: 1000
@@ -101,7 +82,6 @@
containerWidth / layout.width,
containerHeight / layout.height
);
-
return {
position: 'absolute',
left: `${rect.x * scale}px`,
@@ -119,25 +99,38 @@
emit('rectClicked', layoutIndex, rectIndex);
};
+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 updateLayout = () => {
if (!layoutPanel.value) return;
-
- layouts.value = props.layoutData.data.Layouts;
+ layouts.value = props.layoutData.Layouts;
};
onMounted(() => {
- updateLayout();
+ setTimeout(updateLayout, 500);
});
onUnmounted(() => {
rectsElements.value = {};
});
+
+
</script>
<style scoped>
.layout-wrapper {
position: relative;
- margin-top:50px;
+ margin-top: 50px;
}
.layout-container {
@@ -153,7 +146,6 @@
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: bold;
-
}
.rect-content {
--
Gitblit v1.8.0