ERP_override.git

<template>
  <div ref="layoutPanel" :class="panelClass" :style="panelStyle">
    <div id="printFlowCard">
      <div v-for="(layout, layoutIndex) in layouts" :key="layoutIndex" class="layout-wrapper">
        <div class="header" :style="headerStyle(layoutIndex)">
          工程号{{ processId }}
          {{ getCurrentRectInfo(layoutIndex) }}
        </div>
        <div class="layout-container" :style="layoutContainerStyle(layoutIndex)">
          <div class="grid-container" :class="`cols-${printColumns}`">
            <div
              v-for="(rect, rectIndex) in layout.rects"
              :key="rectIndex"
              :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"
              :class="rectClass"
              :style="rectStyle(rect, layoutIndex)"
              @click="handleRectClick(layoutIndex, rectIndex)"
            >
              <div v-if="!rect.isRemain" class="rect-content">
                <div class="size">{{ rect.w }}×{{ rect.h }}</div>
                <div class="jia-hao">{{ rect.JiaHao }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue';
import request from "@/utils/request";
 
const props = defineProps({
  layoutData: { type: Object, required: true },
  gw: { type: Number, default: 1400 },
  gh: { type: Number, default: 1100 },
  style: { type: String, default: 'width:100%;height:800px;display:block;background:gray' },
  printLayout: { type: String, default: '2rows-2cols' }, // 可选值：4rows-2cols, 3rows-2cols, 3rows-1col, 2rows-2cols
  fixedPageHeight: { type: Number, default: 1100 } // 固定页面高度
});
 
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 processId = localStorage.getItem('projectNo');
const printColumns = ref(2); // 初始化为2列
const layoutsPerPage = ref(4); // 默认每页显示4个布局（2行×2列）
 
// 定义不同布局的放大比例
const layoutScales = {
  '4rows-2cols': 0.8, // 四行两列，较小的放大比例
  '3rows-2cols': 0.9, // 三行两列，适中的放大比例
  '3rows-1col': 1.0,  // 三行一列，较大的放大比例
  '2rows-2cols': 1   // 两行两列，较大的放大比例
};
 
// 监听printLayout变化
watch(() => props.printLayout, (newVal) => {
  adjustPrintLayout();
  updateLayout();
});
 
const layoutContainerStyle = (layoutIndex) => {
  const containerWidth = (props.gw - 20) / printColumns.value; // 减少边距
  const containerHeight = (props.gh - 20) / Math.ceil(layoutsPerPage.value / printColumns.value);
  const x = (layoutIndex % printColumns.value) * containerWidth;
  const y = Math.floor(layoutIndex / printColumns.value) * containerHeight;
  return {
    position: 'absolute',
    left: `${x}px`,
    top: `${y}px`,
    width: `${containerWidth}px`,
    height: `${containerHeight}px`,
    overflow: 'visible',
    padding: '10px' // 添加内边距
  };
};
 
const headerStyle = (layoutIndex) => {
  const containerWidth = (props.gw - 20) / printColumns.value;
  const containerHeight = (props.gh - 20) / Math.ceil(layoutsPerPage.value / printColumns.value);
  const x = (layoutIndex % printColumns.value) * containerWidth;
  const y = Math.floor(layoutIndex / printColumns.value) * containerHeight;
  const scale = Math.min(
    containerWidth,
    containerHeight
  ) * 1.2; // 放大1.2倍
  return {
    position: 'absolute',
    left: `${x}px`,
    top: `${y - 45}px`,
    width: `${scale}px`,
    textAlign: 'center',
    zIndex: 1000,
    background: '#ffffff',
    padding: '5px',
    fontSize: '12px'
  };
};
 
const rectStyle = (rect, layoutIndex) => {
  const layout = layouts.value[layoutIndex];
  const containerWidth = (props.gw - 100) / printColumns.value;
  const containerHeight = (props.gh - 100) / Math.ceil(layoutsPerPage.value / printColumns.value);
  
  // 根据当前打印布局获取放大比例
  const currentScale = layoutScales[props.printLayout] || 1.0;
  
  const scale = Math.min(
    containerWidth / layout.width,
    containerHeight / layout.height
  ) * currentScale; // 应用当前布局的放大比例
  
  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' : '#a0d8ef',
    border: '1px solid #000',
    cursor: 'pointer'
  };
};
 
const handleRectClick = (layoutIndex, rectIndex) => {
  focusIndex.value = { layoutIndex, rectIndex };
  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 sum = layout.rects.reduce((sum, r) => sum + (r.w * r.h), 0);
  const areaUtilization = ((sum / (width * height)) * 100).toFixed(2);
  return `${currentRectIndex}/${totalRects} ${height}X${width}X1 ${areaUtilization}%`;
};
 
const adjustPrintLayout = () => {
  switch (props.printLayout) {
    case '4rows-2cols':
      printColumns.value = 2;
      layoutsPerPage.value = 8; // 4行×2列
      break;
    case '3rows-2cols':
      printColumns.value = 2;
      layoutsPerPage.value = 6; // 3行×2列
      break;
    case '3rows-1col':
      printColumns.value = 1;
      layoutsPerPage.value = 3; // 3行×1列
      break;
    case '2rows-2cols':
      printColumns.value = 2;
      layoutsPerPage.value = 4; // 2行×2列
      break;
    default:
      printColumns.value = 2;
      layoutsPerPage.value = 4;
  }
};
 
const updateLayout = () => {
  if (!layoutPanel.value) return;
  layouts.value = props.layoutData.Layouts;
  adjustPrintLayout();
  // 强制重新渲染
  layoutPanel.value.offsetHeight; // 触发布局更新
};
 
onMounted(() => {
updateLayout();
});
 
onUnmounted(() => {
  rectsElements.value = {};
});
 
const print = () => {
  const el = document.getElementById('printFlowCard');
  const doc = document;
  const body = doc.body || doc.getElementsByTagName("body")[0];
  const printId = "print-" + Date.now();
 
  // 创建一个克隆的节点
  const content = document.createElement("div");
  content.id = printId;
  content.appendChild(el.cloneNode(true)); // 克隆节点并保留所有属性和子节点
 
  const style = document.createElement("style");
  style.innerHTML =
    "body>#" +
    printId +
    "{display:none}@media print{" +
    "@page {" +
    "    size: auto; " +
    "    margin: 13mm 4mm 0mm 4mm; " +
    "  }body>:not(#" +
    printId +
    "){display:none !important}body>#" +
    printId +
    "{display:block;padding-top:1px}}";
 
  body.appendChild(style);
  body.appendChild(content);
 
  // 优化分页逻辑
  const layoutWrappers = content.querySelectorAll('.layout-wrapper');
  let currentPageHeight = 0;
  let currentWrapperIndex = 0;
 
  layoutWrappers.forEach((wrapper, index) => {
    const wrapperHeight = wrapper.offsetHeight;
    if (currentPageHeight + wrapperHeight > props.fixedPageHeight) {
      const pageBreak = document.createElement('div');
      pageBreak.className = 'element-to-break-after';
      layoutWrappers[currentWrapperIndex - 1].appendChild(pageBreak);
      currentPageHeight = wrapperHeight;
    } else {
      currentPageHeight += wrapperHeight;
    }
    currentWrapperIndex = index + 1;
  });
 
  setTimeout(() => {
    window.print();
    body.removeChild(content);
    body.removeChild(style);
  }, 200);
};
 
defineExpose({
  print,
  updateLayout
});
</script>
 
<style scoped>
@media print {
  .layout-wrapper {
    page-break-inside: avoid;
    margin-bottom: 20px;
  }
 
  .element-to-break-after {
    page-break-after: always;
  }
 
  .header {
    position: static;
    width: 100%;
  }
 
  .layout-container {
    position: static;
    width: 100%;
    height: auto;
  }
 
  .grid-container {
    display: grid;
    gap: 10px; /* 减少打印时的网格间距 */
  }
 
  .cols-1 {
    grid-template-columns: 1fr;
  }
 
  .cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
 
  .cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
 
  .cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
 
.element-to-break-after {
  page-break-after: always;
}
 
.layout-wrapper {
  position: relative;
  margin-top: 50px;
}
 
.header {
  position: absolute;
  top: -45px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
  background-color: #ffffff;
  padding: 5px;
  font-size: 12px;
}
 
.layout-container {
  position: relative;
  overflow: visible;
}
 
.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 {
  grid-row: 2;
  grid-column: 1;
  margin: auto;
  font-size: 14px;
  font-weight: bold;
}
</style>