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

陽上

Browse Source
This commit is contained in:
minom
2026-03-31 18:03:45 +08:00
parent f16b3e3678
commit 5f8da12363
1 changed files with 156 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
web/admin/print/print_multi_new.aspx
View File

@@ -32,6 +32,17 @@
.no-print, #customMenu { .no-print, #customMenu {
display: none !important; display: none !important;
} }
.yangshang-wrapper {
display: flex !important;
flex-direction: column !important; /* 垂直堆疊 */
justify-content: space-between !important; /* 陽上與拜薦各據頂底 */
align-items: center !important; /* 水平方向置中 */
height: 100% !important;
width: 100% !important;
writing-mode: vertical-rl !important; /* 確保內部文字均為垂直書寫 */
text-orientation: upright !important; /* 確保文字方向轉正 */
}
} }
</style> </style>
@@ -239,12 +250,19 @@
mid_items.forEach(y => { mid_items.forEach(y => {
mid.push(y.fam_name); mid.push(y.fam_name);
}); });
let left = []
left_items.forEach(y => {
left.push(y.fam_name);
});
console.log("details:", details);
details.forEach(d => { details.forEach(d => {
if (d.isActive != "hidden") { if (d.isActive != "hidden") {
//console.log(d); //console.log(d);
let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d) //let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = ""; let html = "";
if (d.elementID === 'title1') { if (d.elementID === 'title1') {
let $namelist = $(`<div class='nameList'></div>`).css({ let $namelist = $(`<div class='nameList'></div>`).css({
@@ -257,41 +275,63 @@
height: `${d.height}px`, height: `${d.height}px`,
border: "0px solid #ccc", border: "0px solid #ccc",
padding: "1px", padding: "1px",
"font-family": "DFKai-sb", "font-family": "BiauKai",
"letter-spacing": "0.1em", "letter-spacing": "0.1em",
"column-gap": "1px", "column-gap": "1px",
"row-gap": "1px", "row-gap": "1px",
"align-items": "center", "align-items": "center",
"justify-content":"center" "justify-content": "space-between",
}); });
mid.forEach(z => { mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span>${z}</span>`).css({ let $span = $(`<span>${z}</span>`).css({
display: "block", display: "block",
"min-height": `${d.textHeight}px`, "min-height": `${height}px`,
"max-height": `${d.height}px`, "max-height": `${d.height}px`,
//width: newTxtWidth +"px", //`${d.textWidth}px`, "max-width": `${spanWidth}px`,
//width: `${newFontSize}px`,
"text-align": "justify", "text-align": "justify",
"text-align-last": "justify", "text-align-last": "justify",
"margin-bottom": "20px", "margin-bottom": "40px",
"margin-left": "5px", "margin-left": "5px",
"text-justify": "inter-character", "text-justify": "inter-character",
//"font-size": newFontSize + "px", //"justify-content":"center"
"z-index": 10000,
"word-break": "break-all"
}); });
$namelist.append($span); $namelist.append($span);
}); });
html = $namelist; html = $namelist;
} else if (d.elementID === "alive") {
//陽上
//d.startX
let alive = $("<div class='yangshang-wrapper '></div>");
let yang = $("<div class='yang'></div>")
$(yang).append("<span>陽上</span>")
html = self.renderLiveList(left, d);
//拜薦
let bi = $("<div class='bi'></div>")
$(bi).append("<span>拜薦</span>")
html=$(alive).append(yang).append(html).append(bi);
//tabletpaper.append(bi)
} }
console.log(mid, newFontSize, newTxtWidth) // console.log(mid, newFontSize, newTxtWidth)
let content = $(`<div class="tablet-element vertical-text "></div>`) let content = $(`<div class="tablet-element vertical-text "></div>`)
.css({ .css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'pt', position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'pt',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive, fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items":"center"
//"text-align": "justify","text-align-last": "justify", //"text-align": "justify","text-align-last": "justify",
//position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
}) })
@@ -312,7 +352,7 @@
size:297mm 210mm landscape !important; size:297mm 210mm landscape !important;
margin:0; margin:0;
} }
.tablet-paper { /*.tablet-paper {
width: ${size.width}mm ; width: ${size.width}mm ;
height: ${size.height}mm; height: ${size.height}mm;
position: relative !important; position: relative !important;
@@ -327,8 +367,9 @@
} }
.tablet-paper .tablet-element span{ .tablet-paper .tablet-element span{
word-break: break-all !important; word-break: break-all !important;
} }*/
} }
</style>
` `
$("#pageStyle").remove(); $("#pageStyle").remove();
$("head").append(pageStyle); $("head").append(pageStyle);
@@ -381,55 +422,92 @@
fix2(val) { fix2(val) {
return Number.parseFloat(val).toFixed(2); return Number.parseFloat(val).toFixed(2);
}, },
renderLiveList(names, el) {
let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
width: `${el.width}px`,
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": "BiauKai",
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
});
let self = this;
//$namelist.append("陽上");
names.forEach(n => {
$namelist.append(self.renderLiveSpan(n, el))
})
//$namelist.append("拜薦");
return $namelist;
},
renderLiveSpan(name, el) {
return $(`<span>${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "15px",
"margin-left": "5px",
"text-justify": "inter-character",
});
},
getTextInfo(text,font) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics
},
getTextWidth(text,font) { getTextWidth(text,font) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
context.font = font; context.font = font;
const metrics = context.measureText(text); const metrics = context.measureText(text);
return metrics.width/2;
return metrics;
}, },
scaleFontSize(txtContent, style, dStyle) { getTextSize(txt, fontsize) {
let newTxtWidth = dStyle.textWidth; let span = document.createElement("span");
let newFontSize = dStyle.fontSize; span.style.visibility = "hidden";
span.style.position = "absolute";
span.style.fontSize = fontsize + "px";
span.style.fontFamily = "";
span.innerText = txt;
document.body.appendChild(span);
let result = {
width: span.offsetWidth,
height: span.offsetHeight
}
//console.log("result:",result);
document.body.removeChild(span);
return result;
},
scaleFontSize(txtContent, fontSize,elementWidth) {
let font = this.getTextSize("講", parseInt(fontSize));
console.log("scaleFontSize:", fontSize, " A:", font, " B:", Math.ceil((txtContent.length) / 2), " C:", font.width, elementWidth, (Math.ceil(txtContent.length / 2) * font.width)*2)
//console.log(newFontSize, newTxtWidth) //console.log(newFontSize, newTxtWidth)
//自動判斷縮小字型的規則,要同時縮小間距 //自動判斷縮小字型的規則,要同時縮小間距
console.log("A:", dStyle, dStyle.fontSize) // console.log("A:", dStyle, dStyle.fontSize)
if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下 //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if (txtContent.length > 8) {//這要做成參數，讓使用者設定 if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
switch (txtContent.length - 8) { let newfontSize = parseInt(fontSize) - 1;
case 1: console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
case 2: }
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 2) + " " + "DFKai-sb"); //}
newFontSize = (parseInt(dStyle.fontSize) - 2);
break;
case 3:
case 4:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 4) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 4);
break;
case 5:
case 6:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 6) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 6);
break;
case 7:
case 8:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 8) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 8);
break;
default:
break;
}
}
}
//console.log(txtContent,style,dStyle) //console.log(txtContent,style,dStyle)
//console.log(newFontSize,newTxtWidth) //console.log(newFontSize,newTxtWidth)
return { newFontSize, newTxtWidth } return fontSize;
}, },
breakWord(txtContent, style, dStyle) { breakWord(txtContent, style, dStyle) {
//自動判斷斷字 //自動判斷斷字
@@ -511,6 +589,7 @@
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-color: white; background-color: white;
text-align:justify;
} }
} }
@@ -542,26 +621,28 @@
page-break-after: always !important; page-break-after: always !important;
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
} background-repeat: no-repeat;
} background-size: 100% 100%;
}
/* 元素排版樣式 */ .tablet-element {
.tablet-paper { position: absolute !important;
position: relative; white-space: normal;
overflow: hidden; color: black !important; /* 確保文字是黑色的 */
background-repeat: no-repeat; }
background-size: 100% 100%; }
}
.tablet-element { /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
position: absolute !important; .tablet-paper {
white-space: nowrap; width: var(--page-w);
} height: var(--page-h);
.vertical-text { }
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important; .vertical-text {
} writing-mode: vertical-rl !important;
</style> -webkit-writing-mode: vertical-rl !important;
<style> text-orientation: mixed !important;
}
/* 名單金字塔佈局容器 */ /* 名單金字塔佈局容器 */
.roster-container { .roster-container {
@@ -594,17 +675,12 @@
.roster-name { .roster-name {
text-orientation: upright; text-orientation: upright;
/*font-weight: bold;*/ /*font-weight: bold;*/
white-space: nowrap; white-space: normal;
line-height: 1.2; line-height: 1.2;
font-family: 'Kaiti', serif; font-family: 'Kaiti', serif;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */ /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content; width: fit-content;
} }
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
/* 【修復底圖沒出現】強制印出背景設定 */ /* 【修復底圖沒出現】強制印出背景設定 */
* { * {
@@ -614,20 +690,6 @@
} }
/* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
.tablet-paper {
position: relative !important;
margin: 0 auto !important;
page-break-after: always !important;
box-shadow: none !important;
width: var(--page-w);
height: var(--page-h);
}
.tablet-element {
position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
color: black !important; /* 確保文字是黑色的 */
}
.ancestor-wrapper { .ancestor-wrapper {
@@ -649,7 +711,7 @@
font-size: 0.6em; /* 縮小字體 */ font-size: 0.6em; /* 縮小字體 */
line-height: 1.2; line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */ margin-top: 4px; /* 與上方林張的間距 */
white-space: nowrap; /* 避免自動換行 */ white-space: normal; /* 避免自動換行 */
writing-mode:vertical-rl writing-mode:vertical-rl
} }