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-04-06 19:06:22 +08:00
parent f087e4aa61
commit 36174834a8
5 changed files with 533 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/print/print_multi_new.aspx
+365 -114
View File
@@ -18,6 +18,62 @@
</head>
<body>
<div id="customMenu" style="top:20px;right:10mm;width:20vw;height:90vh; position: fixed; background-color: #f0f0f0;
border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
<div class="container">
<div class="row">
<div class="col-12">
<input type="radio" name="setup" id="indivualSetup" style="width:30px;height:30px;" checked="checked"/>個別設定
<input type="radio" name="setup" id="allSetup" style="width:30px;height:30px;"/>全域設定
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('X')" />
<label class="small" for="textX">X軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('Y')" />
<label class="small" for="textY">Y軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('fontSize')" />
<label class="small" for="fontSize">字體大小</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('width')" />
<label class="small" for="textWidth">物件寬度</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('height')" />
<label class="small" for="textHeight">物件高度</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakCount" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakCount">文字斷行(依字數)</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakWord" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakWord">文字斷行(依文字)</label>
</div>
</div>
</div>
</div>
</div>
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<select id="paperSizeSel" onchange="Printer.render()">
<!-- onchange="Printer.render()"-->
@@ -33,36 +89,6 @@
</div>
<div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textX">X軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textY">Y軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
<label class="small" for="fontSize">字體大小</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textWidth">文字寬度</label>
</div>
</div>
</div>
</div>
</div>
<form id="form1" runat="server">
</form>
</body>
@@ -82,14 +108,14 @@
selected: null,
http_host: "",
pageStyle: "",
pSize:"",
pSize: "",
allStyle: [],
allSize: [],
allStyleDetails: [],
printData: [],
tabletElement: [],
observer: null,
isInit:true,
isInit: true,
bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -97,23 +123,23 @@
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
],
async init() {
let HTTP_HOST = "<%=UrlHost()%>";
this.http_host = HTTP_HOST;
//
Promise.all([
this.getActItem(),
this.getPaperSize(),
]).then(() => {
Promise.all([
]).then(() => {
Promise.all([
this.getTabletElement(),
this.getTabletStyles(),
this.getAllStyleDetails(),
this.getData(),
]).then(() => {
this.render();
})
]).then(() => {
this.render();
})
})
},
async getActItem() {
@@ -159,7 +185,7 @@
this.allSize = data.data;
//console.log(this.allSize);
if (this.allSize) {
this.allSize.forEach(x => {
this.allSize.forEach(x => {
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
})
//if (this.printSize) {
@@ -207,7 +233,7 @@
if (response.status == 200) {
this.printData = response.data;
//this.render();
//this.print();
}
@@ -223,19 +249,31 @@
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
let nowPageWidth = 0;
let tabletpaper;
this.printData.forEach(x => {
if ($("#paperSizeSel").val() == "") {
if (this.pSize&&this.pSize!=undefined) {
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0003");
}
//列印紙張的尺寸
if ($("#paperSizeSel").val() == "") {
if (this.pSize && this.pSize != undefined) {
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0001");
}
}
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
this.printData.forEach(x => {
console.log("x:", x)
let style = self.allStyle.find(y => y.styleID == x.style);
//用來印內容的尺寸
let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
let printSize = self.allSize.find(y => y.paperID ==style.printSize);
if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize);
//用長根寬算出一張紙可以印幾張
let xCount = parseFloat(pageSize.width) / parseFloat(printSize.width);
let yCount = parseFloat(pageSize.height) / parseFloat(printSize.height);
let total = Math.floor(xCount) * Math.floor(yCount);
console.log(xCount, yCount, total);
//if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
if (nowPageWidth >= total) {
//$(canvas).css("width", printSize.width + "mm");
//$(canvas).css("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center");
@@ -246,7 +284,7 @@
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
nowPageWidth = 0;
}
nowPageWidth = nowPageWidth + parseFloat(printSize.width);
nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper">
</div>`)
let img = self.bg.find(y => y.name == style.backendImg);
@@ -265,8 +303,9 @@
let mid_items = tablet.mid_items;
let left_items = tablet.left_items;
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
console.log("details:", details);
let mid = [];
mid_items.forEach(y => {
mid.push(y.fam_name);
@@ -281,7 +320,7 @@
details.forEach(d => {
if (d.isActive != "hidden") {
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = "";
let alive = "";
let yang = "";
@@ -308,11 +347,12 @@
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
console.log("spanWidth:", spanWidth);
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span>${z}</span>`).css({
let $span = $(`<span class="nameSpan">${z}</span>`).css({
display: "block",
"min-height": `${height}px`,
"max-height": `${d.height}px`,
@@ -320,7 +360,7 @@
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "40px",
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
//"justify-content":"center"
@@ -333,17 +373,21 @@
html = self.renderLiveList(left, d);
newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
html = self.renderRoster(mid, d)
}
if (newFontSize < 10) {
newFontSize = 10;
}
let content = $(`<div class="tablet-element vertical-text "></div>`)
.css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items":"center"
"align-items": "center"
})
.html(html);
tabletpaper.append(content);
tabletpaper.append(content);
html = "";
alive = "";
yang = "";
@@ -352,6 +396,9 @@
})
//console.log("xCount:", Math.floor( xCount));
let xFloor = Math.floor(xCount);
self.pageStyle = `<style id="pageStyle">
{
-webkit-print-color-adjust: exact !important;
@@ -363,6 +410,10 @@
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
body{
overflow: visible !important;
}
@media print{
:host {
width:auto !important;
@@ -372,7 +423,7 @@
size:${pageSize.width}mm ${pageSize.height}mm !important;
margin:0;
}
html, body, form, .full-home, #printArea, .canvas-area {
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
@@ -386,15 +437,23 @@
.canvas-area{
display:flex !important;
display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr);
flex-direction: row !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;
align-items:center !important;
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
${xFloor > 1 ? 'margin-top:-20px !important' : ''};
}
.no-print, #customMenu {
display: none !important;
}
//.no-print, #customMenu {
// display: none !important;
//}
.tablet-paper {
position: relative !important;
display: block !important;
display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
break-inline:avoid;
page-break-inline:avoid;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
@@ -479,22 +538,31 @@
}
.canvas-area{
width: ${printSize.width}mm;
height: ${printSize.height}mm;
justify-content: center;
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
break-after: page;
page-break-after: always;
display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr);
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
/*align-items: center !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;*/
}
.tablet-paper{
background-color: white;
display: inline-block;
width: ${size.width}mm !important;
height: ${ size.height }mm !important;
height: ${size.height}mm !important;
position: relative;
margin-bottom: 0;
background-image: url(${ img.path });
background-image: url(${img.path});
background-size: 100% 100%;
break-after: page;
page-break-after: always;
/*break-after: page;
page-break-after: always;*/
break-inline:avoid;
page-break-inline:avoid;
}
.tablet-element {
cursor: move;
@@ -505,6 +573,10 @@
}
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
.tablet-paper:last-child { page-break-after: auto; }
.tablet-element span{
z-index: 999;
}
</style>
`
$("#pageStyle").remove();
@@ -515,47 +587,85 @@
//$(canvas).css("justify-content", "center");
$("#printArea").append(canvas);
});
$(".tablet-element").draggable({
start(e, ui) {
//console.log("gogogogo");
},
stop(e, ui) {
//console.log(ui.position.left, ui.position.top);
}
});
//$(".tablet-element").draggable({
// start(e, ui) {
// //console.log("gogogogo");
// },
// stop(e, ui) {
// //console.log(ui.position.left, ui.position.top);
// }
//});
$(".tablet-element").on("click", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("fontSize");
let fontFamily = $(this).css("fontFamily");
let left = $(this).css("left");
let top = $(this).css("top");
});
//$(".tablet-element").on("click", function (e) {
// e.preventDefault();
// self.selected = $(this);
// let fontSize = $(this).css("fontSize");
// let fontFamily = $(this).css("fontFamily");
// let left = $(this).css("left");
// let top = $(this).css("top");
//});
$(".tablet-element").on("contextmenu", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family");
console.log($(this).css("font-size"));
let textWidth = $(this).find("span").first().css("width");
let textWidth;//= $(this).css("width");//find("span").first().css("width");
let textHeight; //= $(this).css("height");
if ($(this).find(".nameList").first()) {
textWidth = $(this).find(".nameList").first().css("width");
textHeight = $(this).find(".nameList").first().css("height");
} else if ($(this).find(".liveList").first()) {
textWidth = $(this).find(".liveList").first().css("width");
textHeight = $(this).find(".liveList").first().css("height");
} else if ($(this).find(".rosterList").first()) {
textWidth = $(this).find(".rosterList").first().css("width");
textHeight = $(this).find(".rosterList").first().css("height");
}
let left = $(this).css("left");
let top = $(this).css("top");
$("#customMenu").css({
top: e.pageY + "px",
left: (e.pageX + 30) + "px"
});
left = left.replace("px", "");
top = top.replace("px", "");
$("#textX").val(self.fix2(left * 0.265));
$("#textY").val(self.fix2(top * 0.265));
$("#fontSize").val(fontSize);
$("#textWidth").val(textWidth);
$("#customMenu").show();
$("#textHeight").val(textHeight);
$("#textX").prop("readonly", false);
$("#textY").prop("readonly", false);
$("#fontSize").prop("readonly", false);
});
$(".tablet-element span").on("click", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family");
let textWidth = $(this).css("max-width");
let textHeight = $(this).css("min-height");
let left = $(this).css("left");
let top = $(this).css("top");
left = left.replace("px", "");
top = top.replace("px", "");
$("#textX").val("");
$("#textY").val("");
$("#fontSize").val("");
$("#textWidth").val(textWidth);
$("#textHeight").val(textHeight);
let parentElement = this.parentElement;
if ($(parentElement).hasClass("nameList") || $(parentElement).hasClass("liveList") || $(parentElement).hasClass("rosterList")) {
$("#textX").prop("readonly", true);
$("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true);
}
});
},
fix2(val) {
return Number.parseFloat(val).toFixed(2);
@@ -584,7 +694,7 @@
return $namelist;
},
renderLiveSpan(name, el) {
return $(`<span>${name}</span>`).css({
return $(`<span class="liveSpan">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
@@ -592,23 +702,61 @@
height: `${el.textHeight}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "15px",
"margin-bottom": "10px",
"text-justify": "inter-character",
});
},
getTextInfo(text,font) {
// 品字佈局邏輯：一上二下
renderRoster(names, el) {
if (!names.length) return '';
const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
const top = names.slice(0, mid);
const bot = names.slice(mid);
const size = this.autoScale(names, el.fontSize);
let h = $(`<div class="rosterList"></div>`).css(
{
width: el.width, height: el.height,
"writing-mode": "vertical-rl", /* 直書 */
display: "flex",
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
"align-items": "center", /* 左右置中對齊 */
"justify-content": "start",
gap: "20px",
});
h.append(this.renderNameGroups(top, el));
if (bot.length) h.append(this.renderNameGroups(bot, el));
return h
},
renderNameGroups(items, el) {
let g = $(`<div class="rosterspan"></div>`).css({
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"height": el.textHeight,
})
items.forEach(x => {
g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
})
return g;
},
autoScale(names, base) {
const max = Math.max(...names.map(n => n.length), 0);
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
},
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 context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics;
},
getTextSize(txt, fontsize) {
@@ -626,24 +774,127 @@
document.body.removeChild(span);
return result;
},
scaleFontSize(txtContent, fontSize,elementWidth) {
scaleFontSize(txtContent, fontSize, elementWidth) {
let font = this.getTextSize("講", parseInt(fontSize));
let font = this.getTextSize("講", parseInt(fontSize));
//自動判斷縮小字型的規則,要同時縮小間距
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
}
return fontSize;
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
console.log("newfontSize:", newfontSize);
if (newfontSize <= 8) {
return newfontSize;
}
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
}
return fontSize;
},
breakWord(txtContent, style, dStyle) {
//自動判斷斷字
//1. by 特定字 2.by長度
},
async changeSetup(config) {
switch (config) {
case "X":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("left", $("#textX").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
}
break;
case "Y":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("top", $("#textY").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
}
break;
case "fontSize":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("font-size", $("#fontSize").val())
} else if ($("#allSetup").prop("checked")) {
}
break;
case "width":
if ($("#indivualSetup").prop("checked")) {
if (this.selected.find(".nameList").length>=1) {
$(this.selected.find(".nameList").first()).css("width", $("#textWidth").val())
} else if (this.selected.find(".liveList").length >= 1) {
this.selected.find(".liveList").first().css("width", $("#textWidth").val())
} else if (this.selected.find(".rosterList").length >= 1) {
this.selected.find(".rosterList").first().css("width", $("#textWidth").val())
} else if (this.selected.hasClass("nameSpan")) {
let spans = $(this.selected.parent().first()).find(".nameSpan");
spans.each(function (index, x) {
$(x).css("max-width", $("#textWidth").val());
});
} else if (this.selected.hasClass("liveSpan")) {
let spans = $(this.selected.parent().first()).find(".liveSpan");
spans.each(function (index, x) {
$(x).css("max-width", $("#textWidth").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function(index, x) {
$(x).css("max-width", $("#textWidth").val());
});
}
} else if ($("#allSetup").prop("checked")) {
}
break;
case "height":
if ($("#indivualSetup").prop("checked")) {
if (this.selected.find(".nameList").length >= 1) {
$(this.selected.find(".nameList").first()).css("height", $("#textHeight").val())
} else if (this.selected.find(".liveList").length >= 1) {
this.selected.find(".liveList").first().css("height", $("#textHeight").val())
} else if (this.selected.find(".rosterList").length >= 1) {
this.selected.find(".rosterList").first().css("height", $("#textHeight").val())
} else if (this.selected.hasClass("nameSpan")) {
let spans = $(this.selected.parent().first()).find(".nameSpan");
spans.each(function (index, x) {
console.log($(x))
$(x).css("min-height", $("#textHeight").val());
});
} else if (this.selected.hasClass("liveSpan")) {
let spans = $(this.selected.parent().first()).find(".liveSpan");
spans.each(function (index, x) {
$(x).css("min-height", $("#textHeight").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function (index, x){
$(x).css("min-height", $("#textHeight").val());
});
}
} else if ($("#allSetup").prop("checked")) {
}
break;
case "breakCount":
if ($("#indivualSetup").prop("checked")) {
} else if ($("#allSetup").prop("checked")) {
}
break;
case "breakWord":
if ($("#indivualSetup").prop("checked")) {
} else if ($("#allSetup").prop("checked")) {
}
break;
}
},
async changeLocation() {
$(this.selected).css("left", $("#textX").val() + "mm");
$(this.selected).css("top", $("#textY").val() + "mm");
@@ -723,9 +974,9 @@
},
}
$(document).click(function (e) {
if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
$("#customMenu").hide();
}
//if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
// $("#customMenu").hide();
//}
});
$(() => Printer.init());
</script>