Merge branch 'master' of http://bore.pub:10439/r/ERP_override

廖井涛

2025-03-25 768e16999a8ce4bb500490ee76c659aa61ea1783

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/RectRenderer.vue

File was renamed from north-glass-erp/northglass-erp/src/views/pp/glassOptimize/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 {