yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

調整牌位版面

Browse Source
This commit is contained in:
minom
2026-09-04 10:01:07 +08:00
parent 78ac144a32
commit 126e46e6ed
1 changed files with 175 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/print/print_multi_new.aspx
+173 -193
View File
@@ -353,176 +353,57 @@
let yang = "";
let bi = "";
if (d.elementID === 'title1') {
let h = Number(d.height);
let w = Number(d.width);
let s = Number(d.fontSize);
//let th = parseFloat(d.textHeight) || parseFloat(d.height);
//let v_gap = parseFloat(d.textSpan) || 0;
//let h_gap = 5;
//let shrinkLimit = 6;
//if (Number(d.height) < Number(500)) {
// shrinkLimit = 8;
//}
//// 1. 固定的長短名判斷
//let items = mid.map(name => {
// let l = name.length;
// let isShort = (mid.length > 1) && ((l * 40) <= (th + 40));
// return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
//});
//let long_s = parseFloat(d.fontSize);
//let short_s = parseFloat(d.fontSize);
//// 🌟 核心修復：在排版前，預先剔除「幽靈扣血」區間！
//// 算出短名跟長名的「真實極限大小」，讓它們直接從極限起跑，絕不空轉。
//let max_short_effective = shrinkLimit;
//let min_long_limit = parseFloat(d.fontSize);
//items.forEach(item => {
// if (item.isShort) {
// let max_s_for_th = Math.floor(th / (item.l * 1.333));
// if (max_s_for_th > max_short_effective) max_short_effective = max_s_for_th;
// } else {
// // 算出長名字不折行的極限大小
// let max_s_for_h = Math.floor((h - 10) / (item.l * 1.333));
// if (max_s_for_h < min_long_limit) min_long_limit = max_s_for_h;
// }
//});
//// 直接把虛胖的字體壓到物理極限
//if (short_s > max_short_effective) short_s = max_short_effective;
//if (long_s > min_long_limit) long_s = min_long_limit;
//let sizes = [];
//let shrink_turn = 'long';
//while (true) {
// let totalWidth = 0;
// let current_col_h = 0;
// let current_col_w = 0;
// let cols_width = [];
// let any_wrapped = false;
// for (let i = 0; i < items.length; i++) {
// let item = items[i];
// let s = item.isShort ? short_s : long_s;
// // 讓 3個字 跟 4個字 的短名字能在格子內各自完美對齊
// if (item.isShort) {
// let max_s_for_th = Math.floor(th / (item.l * 1.333));
// if (s > max_s_for_th) s = max_s_for_th;
// }
// item.size = s;
// let size_px = s * 1.333;
// if (item.isShort) {
// let item_h = Math.max(th, item.l * size_px);
// if (current_col_h === 0) {
// current_col_h = item_h;
// current_col_w = size_px;
// } else if ((current_col_h + v_gap + item_h) <= h) {
// current_col_h += (v_gap + item_h);
// if (size_px > current_col_w) current_col_w = size_px;
// } else {
// cols_width.push(current_col_w);
// current_col_h = item_h;
// current_col_w = size_px;
// }
// } else {
// if (current_col_h > 0) {
// cols_width.push(current_col_w);
// current_col_h = 0;
// current_col_w = 0;
// }
// let item_w = size_px;
// if ((item.l * size_px) > (h - 10)) {
// item.isMulti = true;
// any_wrapped = true;
// let chars_per_col = Math.floor((h - 10) / size_px);
// if (chars_per_col < 1) chars_per_col = 1;
// let item_cols = Math.ceil(item.l / chars_per_col);
// item_w = item_cols * (size_px * 1.1);
// } else {
// item.isMulti = false;
// }
// cols_width.push(item_w);
// }
// }
// if (current_col_h > 0) cols_width.push(current_col_w);
// totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
// // 🌟 過關條件
// if (totalWidth <= w && (!any_wrapped || long_s === 6)) {
// sizes = items.map(x => ({ name: x.name, size: x.size, isMulti: x.isMulti, isShort: x.isShort }));
// break;
// }
// // 真實的輪流縮小機制
// if (any_wrapped && long_s > shrinkLimit) {
// long_s--; // 高度爆框，只懲罰長名字
// } else {
// // 寬度爆框，輪流真槍實彈互扣
// let hasLong = items.some(x => !x.isShort);
// let hasShort = items.some(x => x.isShort);
// if (hasLong && hasShort) {
// if (shrink_turn === 'long') {
// if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
// else if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
// else break;
// } else {
// if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
// else if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
// else break;
// }
// } else if (hasLong) {
// if (long_s > shrinkLimit) long_s--;
// else break;
// } else {
// if (short_s > shrinkLimit) short_s--;
// else break;
// }
// }
//}
let th = Number(d.textHeight) || Number(d.height);
let th = Number(d.textHeight) || h;
let v_gap = Number(d.textSpan) || 0;
let h_gap = 5;
let shrinkLimit = 6;
if (Number(d.height) < Number(500)) {
shrinkLimit =8;
}else if (Number(d.height) < Number(300)) {
if (h < 500) {
shrinkLimit = 8;
} else if (h < 300) {
shrinkLimit = 12;
}
let long_s = Number(d.fontSize);
let short_s = Number(d.fontSize);
if (Number(d.height)<500&&mid.length == 1 && mid[0].includes("暨無始劫以來累世冤親債主")) {
mid = mid[0].split("暨")
if (h < 500 && mid.length == 1 && mid[0].includes("暨無始劫以來累世冤親債主")) {
mid = mid[0].split("暨");
mid[0] = mid[0] + "暨";
console.log("mid:",mid)
}
// 1. 沿用你確認成功的版本：用固定的 40px 當作長短名尺規，徹底解決短名字被強佔 800px 變三行的問題！
// 1. 初始判定與特例條件計算
let items = mid.map(name => {
let l = name.length;
let isShort = (mid.length > 1) &&(l * 40) <= (th + (v_gap/2));
let isShort = (l * 40) <= (th + (v_gap / 2));
return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
});
let maxShortLen = Math.max(...items.filter(x => x.isShort).map(x => x.l), 1);
let allShort = items.every(x => x.isShort);
// 🚀 動態防呆：不寫死字數！用「實際字體大小」計算是否放得進半高。
// 這樣 13 個字會自動出局，而 3 個字的小牌位絕對能穩穩過關。
let fitsInHalf = items.every(x => (x.l * short_s * 1.333) <= (h / 2));
let isSpecial1 = allShort && fitsInHalf && items.length === 1;
let isSpecial2 = allShort && fitsInHalf && items.length === 2;
let isSpecial4 = allShort && fitsInHalf && (items.length === 4 || items.length===6||items.length===8);
let isSpecial = isSpecial1 || isSpecial2 || isSpecial4;
let sizes = [];
let shrink_turn = 'long';
// 2. 模擬排版與字體縮放運算
while (true) {
let totalWidth = 0;
let current_col_h = 0;
let current_col_w = 0;
let cols_width = [];
let any_wrapped = false; // 🌟 專門用來監測長名字有沒有折行
let any_wrapped = false;
for (let i = 0; i < items.length; i++) {
let item = items[i];
@@ -531,7 +412,19 @@
let size_px = s * 1.333;
if (item.isShort) {
let item_h = Math.max(th, item.l * size_px);
let item_h = Math.max(th, maxShortLen * size_px);
// 壓縮高度釋放空間 (支援反向放大字體)
if (isSpecial) {
if (isSpecial1 || isSpecial2) item_h = h / 2;
if (isSpecial4) item_h = (h / 2) - (v_gap / 2);
} else {
let natural_h = maxShortLen * size_px;
if (item_h > natural_h * 1.5) {
item_h = natural_h * 1.5;
}
}
if (current_col_h === 0) {
current_col_h = item_h;
current_col_w = size_px;
@@ -552,10 +445,9 @@
let item_w = size_px;
// 🌟 解決長名字折行：加上安全邊距 (h - 10)，一旦超過就標記 any_wrapped
if ((item.l * size_px) > (h - 10)) {
item.isMulti = true;
any_wrapped = true; // 抓到長名字折行了！
any_wrapped = true;
let chars_per_col = Math.floor((h - 10) / size_px);
if (chars_per_col < 1) chars_per_col = 1;
@@ -573,25 +465,20 @@
totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
// 🌟 核心修正：除了總寬度沒爆框，還必須【沒有發生長名字折行】(或長名字已經縮到極限 6pt 退無可退)，才會滿意並停止縮小！
if (totalWidth <= w && (!any_wrapped || long_s === shrinkLimit)) {
sizes = items.map(x => {
let final_s = x.size;
if (x.isShort) {
// 算出這個字數能剛好塞進 th 的最大字體
let max_s_for_th = Math.floor(th / (x.l * 1.333));
// 如果統算出來的 short_s 太大，就把它壓低到剛好符合 th 高度
let max_s_for_th = Math.floor(th / (maxShortLen * 1.333));
if (final_s > max_s_for_th) {
final_s = max_s_for_th;
}
}
return { name: x.name, size: final_s, isMulti: x.isMulti, isShort: x.isShort };
});
break;
}
// 沿用成功的輪流互相縮小機制 (-1pt)
let hasLong = items.some(x => !x.isShort);
let hasShort = items.some(x => x.isShort);
@@ -614,45 +501,101 @@
}
}
// 防呆處理
if (sizes.length === 0) {
sizes = mid.map(name => {
return { name: name, size: shrinkLimit, isMulti: false, isShort: true };
});
}
// 2. 建立外層的 Flexbox 容器
// 3. 建立外層 Flexbox 容器
let flexDir = isSpecial2 ? "column" : "row";
let flexJustify = isSpecial ? "center" : "flex-start";
let flexAlign = "center";
if (isSpecial4) {
v_gap=Number(h)/4
}
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical-rl",
display: "flex",
"flex-direction": "row",
"flex-direction": flexDir,
"flex-wrap": "wrap",
"align-content": "center",
"align-items": "center", // 確保元素靠上對齊
"align-items": flexAlign,
"justify-content": flexJustify,
margin: "auto",
width: `${d.width}px`,
height: `${d.height}px`,
border: "0px solid #ccc",
width: `${w}px`,
height: `${h}px`,
border: "0px solid transparent",
padding: "1px",
"column-gap": `${d.textSpan}px`,
"font-family":d.fontFamily
"column-gap": `${v_gap}px`,
"font-family": d.fontFamily
});
// 4. 渲染單一名稱
sizes.forEach(item => {
let th = Number(d.textHeight) || Number(d.height)
let minH = item.isShort ? `${th}px` : `${d.height}px` ;
let size_px = item.size * 1.333;
// 🚀 關鍵修正：統一使用 maxShortLen 算出標準高度，保證所有短名字的「格子」一模一樣大！
let natural_max_h = maxShortLen * size_px;
let boxH_num = item.isShort ? Math.max(th, natural_max_h) : h;
if (isSpecial) {
if (isSpecial1 || isSpecial2) boxH_num = h / 2;
if (isSpecial4) boxH_num = (h / 2) - (v_gap ) - 2;
} else if (item.isShort) {
// 壓縮高度釋放空間時，同樣以統一的標準高度來判定
if (boxH_num > natural_max_h * 1.5) {
boxH_num = natural_max_h * 1.5;
}
}
let minH = `${boxH_num}px`;
let alignStyle = item.isMulti || (!item.isMulti && !item.isShort) ? "start" : "justify";
let $span= $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
display: "block",
"min-height": minH, // 強制多行長名撐滿高度，避免其他名字墊底
"max-height": `${d.height}px`,
width: "auto",
let spanDisplay = "block";
let spanJustifyContent = "flex-start";
// 🚀 新增：只針對單一短名賦予 1/4 的 margin-top
let spanMarginTop = "0px";
if (isSpecial1 || isSpecial2) {
spanMarginTop = `-${h / 4}px`;
}
if (isSpecial1 || isSpecial2 || isSpecial4) {
alignStyle = "justify";
spanJustifyContent = "space-between";
}
// 這裡依然保留各自的真實字數，只用來計算「字距」，不影響格子大小
let nameLen = item.name.length;
let contentH = nameLen * size_px;
let emptySpace = boxH_num - contentH;
let gapsCount = nameLen > 1 ? (nameLen - 1) : 1;
let avgGap = emptySpace / gapsCount;
// 防過度拉扯 (排除特例，保護單名/雙名的正常分散)
if (!isSpecial && alignStyle === "justify" && avgGap > (size_px * 1.5)) {
alignStyle = "justify";
spanDisplay = "block";
spanJustifyContent = "start";
}
let $span = $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
"display": spanDisplay,
"justify-content": spanJustifyContent,
"align-items": "center",
"min-height": minH,
"max-height": `${h}px`,
"width": "auto",
"line-height": "1.1",
"text-align": alignStyle,
"text-align-last": alignStyle,
"margin-left": "5px",
"margin-top": spanMarginTop, // 🚀 套用動態外距
"text-justify": "inter-character",
"word-break": "break-all"
});
$namelist.append($span);
});
@@ -703,7 +646,7 @@
})
let content = $(`<div class="tablet-element print_id "></div>`)
.css({
position: "absolute", right: "0mm", top: "0mm", fontSize: '16px',
position: "absolute", right: "0mm", top: "-1mm", fontSize: '12px',
"z-index": 9999,
"align-items": "center"
@@ -765,7 +708,7 @@
}
.row-wrapper{
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
margin: 0 20px 0 20px; /* 關鍵：左右邊界一致置中 */
margin: 20px 20px 0 20px; /* 關鍵：左右邊界一致置中 */
font-size: 0;
}
.tablet-paper {
@@ -775,7 +718,7 @@
page-break-inline:avoid;
break-after: page !important;
page-break-after: always !important;
margin:7mm 1px 0 1px;
margin:2mm 1px 0 1px;
border: none !important;
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -865,7 +808,7 @@
}
.row-wrapper{
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
margin: 0 20px 0 20px; /* 關鍵：左右邊界一致置中 */
margin: 20px 20px 0 20px; /* 關鍵：左右邊界一致置中 */
font-size: 0;
}
.tablet-paper{
@@ -874,7 +817,7 @@
width: ${size.width}mm !important;
height: ${size.height}mm !important;
position: relative;
margin: 7mm 1px 0 1px;
margin: 2mm 1px 0 1px;
background-image: url(${img.path});
background-size: 100% 100%;
break-inline:avoid;
@@ -1066,9 +1009,7 @@
let w = parseFloat(el.width);
let th = parseFloat(el.textHeight) || h;
// 🌟 軸向修正：textSpan 其實是「垂直」堆疊間距！
let v_gap = parseFloat(el.textSpan) || 0;
// 水平換行的間距，給予固定的安全值 5px
let h_gap = 5;
let shrinkLimit = 4;
if (Number(el.height) < 300) {
@@ -1077,6 +1018,12 @@
shrinkLimit = 6;
}
let s = parseFloat(el.fontSize);
if (names.length == 2) {
h = th + v_gap;
}
// 🚀 新增：取得這批名單的最大字數，確保所有格子高度統一
let maxLen = Math.max(...names.map(x => x.length), 1);
while (s >= shrinkLimit) {
let size_px = s * 1.333;
@@ -1088,10 +1035,14 @@
for (let i = 0; i < names.length; i++) {
let l = names[i].length;
// 實際佔用高度
let item_h = Math.max(th, l * size_px);
// 🚀 修正：排版預測時，統一使用最大字數來計算所需高度
let natural_max_h = maxLen * size_px;
let item_h = Math.max(th, natural_max_h);
if (item_h > natural_max_h * 1.5) {
item_h = natural_max_h * 1.5;
}
// 1. 若單一名字高度超過容器，視為長名字折行
if (item_h > (h - 5)) {
any_wrapped = true;
if (current_col_h > 0) {
@@ -1104,15 +1055,14 @@
let item_cols = Math.ceil(l / chars_per_col);
cols_width.push(item_cols * (size_px * 1.1));
} else {
// 2. 短名字正常堆疊，並套用正確的 v_gap (30px)
if (current_col_h === 0) {
current_col_h = item_h;
current_col_w = size_px;
} else if (current_col_h + v_gap + item_h <= h) {
current_col_h += v_gap + item_h; // 高度夠，疊在同一行
current_col_h += v_gap + item_h;
if (size_px > current_col_w) current_col_w = size_px;
} else {
cols_width.push(current_col_w); // 高度不夠，換行
cols_width.push(current_col_w);
current_col_h = item_h;
current_col_w = size_px;
}
@@ -1121,7 +1071,6 @@
if (current_col_h > 0) cols_width.push(current_col_w);
// 總寬度計算 = 所有欄寬加總 + (欄數-1)*5px
let totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
if (totalWidth <= w && (!any_wrapped || s === shrinkLimit)) {
@@ -1145,28 +1094,59 @@
"border": "0px solid transparent",
"padding": "0px",
"font-family": el.fontFamily,
"column-gap": `${v_gap}px` // 直書模式下，column-gap 對應的就是垂直間距！
"column-gap": `${v_gap}px`
});
let self = this;
names.forEach(name => {
$namelist.append(self.renderLiveSpan(name, el, s));
// 🚀 將 maxLen 傳遞給渲染函式
$namelist.append(self.renderLiveSpan(name, el, s, maxLen));
});
return $namelist;
},
renderLiveSpan(name, el, fontSize) {
// 🚀 接收 maxLen 參數
renderLiveSpan(name, el, fontSize, maxLen = 1) {
let h = parseFloat(el.height);
let th = parseFloat(el.textHeight) || h;
let size_px = fontSize * 1.333;
let l = name.length;
let natural_max_h = maxLen * size_px;
let boxH_num = Math.max(th, natural_max_h);
if (boxH_num > natural_max_h * 1.5) {
boxH_num = natural_max_h * 1.5;
}
let minH = `${boxH_num}px`;
let alignStyle = "justify";
let spanDisplay = "block";
let spanJustifyContent = "flex-start";
let contentH = l * size_px;
let emptySpace = boxH_num - contentH;
let gapsCount = l > 1 ? (l - 1) : 1;
let avgGap = emptySpace / gapsCount;
// 🚀 關鍵修正：當陽上名字字距過大觸發防過度拉扯時，改為「靠上對齊 (start)」而不是置中 (center)
if (alignStyle === "justify" && avgGap > (size_px * 1.5)) {
alignStyle = "justify"; // 改為靠上，讓字首切齊
spanDisplay = "block";
spanJustifyContent = "space-between"; // Flex 靠上
}
return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
"display": "block",
"min-height": `${th}px`,
"display": spanDisplay,
"justify-content": spanJustifyContent,
"align-items": "center",
"min-height": minH,
"max-height": `${h}px`,
"width": "auto",
"text-align": "justify",
"text-align-last": "justify",
"margin-left": "0px", // 配合 JS 計算的 h_gap = 5
"text-align": alignStyle,
"text-align-last": alignStyle,
"margin-left": "0px",
"margin-top": "0px",
"text-justify": "inter-character",
"word-break": "break-all",
"white-space": "pre-line"