@@ -112,8 +107,8 @@
printData: [],
tabletElement: [],
bg: [
- { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
- { name: "黃2", path: "../../admin/print/html/tablet-1B.svg" },
+ { name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
+ { name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
],
@@ -154,7 +149,11 @@
if (response.status == "200") {
let data = response.data;
this.allSize = data.data;
-
+ this.allSize.forEach(x => {
+ $("#paperSizeSel").append(`
`);
+
+ })
+ $("#paperSizeSel").val("0003")
}
}
)
@@ -206,18 +205,21 @@
});
},
render() {
+ $("#printArea").empty();
let self = this;
let canvas = $(`
`)
let nowPageWidth = 0;
let tabletpaper;
this.printData.forEach(x => {
let style = self.allStyle.find(y => y.styleID == x.style);
-
let size = self.allSize.find(y => y.paperID == style.paperSize);
-
- if ((nowPageWidth + parseFloat(size.width)) > 297) {
- $(canvas).css("width", "297" + "mm");
- $(canvas).css("height", "210" + "mm");
+ let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
+ let printSize = self.allSize.find(y => y.paperID ==style.printSize);
+ console.log("size:",size);
+ if ((nowPageWidth + parseFloat(size.width)) > pageSize.width) {
+ $(canvas).css("width", printSize.width + "mm");
+ $(canvas).css("height", printSize.height + "mm");
+ $(canvas).css("justify-content", "center");
$(canvas).css("break-after", "page");
$(canvas).css("page-break-after", "always");
$(canvas).append(tabletpaper);
@@ -237,8 +239,8 @@
"margin-bottom": "0",
"background-image": `url(${img.path})`,
'background-size': '100% 100%',
- "break-after": "page",
- "page-break-after": "always"
+ //"break-after": "page",
+ //"page-break-after": "always"
});
let tablet = JSON.parse(x.f_num_tablet);
@@ -251,11 +253,12 @@
mid.push(y.fam_name);
});
let left = []
- left_items.forEach(y => {
- left.push(y.fam_name);
- });
+ if (left_items) {
+ left_items.forEach(y => {
+ left.push(y.fam_name);
+ });
+ }
-
details.forEach(d => {
if (d.isActive != "hidden") {
//console.log(d);
@@ -264,6 +267,9 @@
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = "";
+ let alive = "";
+ let yang = "";
+ let bi = "";
if (d.elementID === 'title1') {
let $namelist = $(`
`).css({
"writing-mode": "vertical rl",
@@ -275,14 +281,12 @@
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
- "font-family": "BiauKai",
+ "font-family": style.fontFamily,
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
"justify-content": "space-between",
-
-
});
mid.forEach(z => {
@@ -312,32 +316,52 @@
} else if (d.elementID === "alive") {
//陽上
//d.startX
- let alive = $("
");
- let yang = $("
")
- $(yang).append("
陽上")
+ //yang = $("
").css({
+ // height: "36px","font-size": "12px"
+ //});
+ //$(yang).append("
陽上")
html = self.renderLiveList(left, d);
-
+
//拜薦
- let bi = $("
")
- $(bi).append("
拜薦")
+ //bi = $("
")
+ //$(bi).append("
拜薦").css({
+ // height: "36px","font-size":"12px"
+ //});
+ //alive = $("
").css({
+ // //"font-size": d.fontSize+"px",
+ // display: "flex ",
+ // "flex-direction": "row", /* 垂直堆疊 */
+ // "justify-content": "space-between ", /* 陽上與拜薦各據頂底 */
+ // "align-items": "center", /* 水平方向置中 */
+ // "height": "100%",//"100% !important",
+ // "width": "100% ",
+ // "writing-mode": "vertical-rl", /* 確保內部文字均為垂直書寫 */
+ // "text-orientation": "upright", /* 確保文字方向轉正 */
+ // "gap": "1px"
+ //})
- html=$(alive).append(yang).append(html).append(bi);
-
- //tabletpaper.append(bi)
+ newFontSize = d.fontSize;
+ //html=$(alive).append(yang).append(html).append(bi);
}
- // console.log(mid, newFontSize, newTxtWidth)
let content = $(`
`)
.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 + 'px',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items":"center"
//"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
})
.html(html);
- tabletpaper.append(content);
+ //if (d.elementID == "alive") {
+ // tabletpaper.append( $(alive).append(yang).append(content).append(bi));
+ //} else {
+ tabletpaper.append(content);
+ //}
html = "";
+ alive = "";
+ yang = "";
+ bi = "";
}
})
@@ -349,34 +373,21 @@
height:auto !important;
}
@page {
- size:297mm 210mm landscape !important;
+ size:${pageSize.width}mm 393mm !important;
margin:0;
}
- /*.tablet-paper {
- width: ${size.width}mm ;
- height: ${size.height}mm;
- position: relative !important;
- display: block !important;
- break-after: page !important;
- page-break-after: always !important;
- margin: 0 !important;
- border: none !important;
- }
- .tablet-paper .tablet-element .nameList{
- justify-content:center !important;
- }
- .tablet-paper .tablet-element span{
- word-break: break-all !important;
- }*/
+
}
`
+ console.log("pageSize:",pageSize);
$("#pageStyle").remove();
$("head").append(pageStyle);
$(canvas).append(tabletpaper);
- $(canvas).css("width", "297" + "mm");
- $(canvas).css("height", "210" + "mm");
+ $(canvas).css("width", printSize.width + "mm");
+ $(canvas).css("height", printSize.height + "mm");
+ $(canvas).css("justify-content", "center");
$("#printArea").append(canvas);
//this.bindKeyEvent();
});
@@ -401,8 +412,9 @@
$(".tablet-element").on("contextmenu", function (e) {
e.preventDefault();
self.selected = $(this);
- let fontSize = $(this).css("fontSize");
- let fontFamily = $(this).css("fontFamily");
+ 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 left = $(this).css("left");
let top = $(this).css("top");
@@ -433,7 +445,7 @@
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
- "font-family": "BiauKai",
+ "font-family": el.fontFamily,
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
@@ -453,10 +465,11 @@
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
+ height: `${el.textHeight}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "15px",
- "margin-left": "5px",
+ //"margin-left": "5px",
"text-justify": "inter-character",
});
},
@@ -501,7 +514,7 @@
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
- console.log("newfontSize:",newfontSize)
+ //console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
}
//}
@@ -519,7 +532,7 @@
$(this.selected).css("top", $("#textY").val() + "mm");
},
async changeSize() {
- $(this.selected).css("fontSize", $("#fontSize").val())
+ $(this.selected).css("font-size", $("#fontSize").val())
},
async changeWidth() {
let nameList = $(this.selected).find(".nameList").first();
@@ -533,12 +546,25 @@
}
}
+ let liveList = $(this.selected).find(".liveList").first();
+ if (liveList) {
+ let spans = $(liveList).find("span");
+ if (spans) {
+ spans.each(function (index, x) {
+ $(x).css("width", $("#textWidth").val())
+ });
+
+ }
+ }
},
print() {
//setTimeout(() => { window.print(); }, 1000);
- let s = this.allStyle.find(x => x.styleID == this.styleID)
- let size = this.allSize.find(x => x.paperID = "20260311160935")
+ //let s = this.allStyle.find(x => x.styleID == this.style)
+ //let size = this.allSize.find(x => x.paperID == s.paperSize)
+ let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
+ let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
+ //console.log("a:",pageSize," b:",printSize);
let w = window.open('', '_blank');
if (!w) {
alert("請允許瀏覽器開啟彈出式視窗！");
@@ -596,7 +622,7 @@
/* 關鍵：修正 Ctrl+P 空白問題 */
@media print {
@page {
- size: 297mm 210mm landscape;
+ size: ${printSize.width}mm 393mm !important;
margin: 0;
}
html, body, form, .full-home, #printArea, .canvas-area {
@@ -677,7 +703,7 @@
/*font-weight: bold;*/
white-space: normal;
line-height: 1.2;
- font-family: 'Kaiti', serif;
+ font-family: DFKai-sb;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}