From 37d0b928ecb1af35e8c0dc8fe4f1c173297cb815 Mon Sep 17 00:00:00 2001 From: minom Date: Wed, 1 Apr 2026 18:03:42 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=8C=E4=BD=8D=E8=A8=AD=E5=AE=9A=E5=88=97?= =?UTF-8?q?=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/admin/item/TabletDesigner.aspx | 6 +- web/admin/item/css/tablet-design.css | 11 ++ web/admin/print/print_multi_new.aspx | 162 ++++++++++++++++----------- 3 files changed, 108 insertions(+), 71 deletions(-) diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx index 3722630..e054816 100644 --- a/web/admin/item/TabletDesigner.aspx +++ b/web/admin/item/TabletDesigner.aspx @@ -311,7 +311,7 @@ /*font-weight: bold;*/ white-space: nowrap; line-height: 1.2; - font-family: 'Kaiti', serif; + font-family: ${style.fontFamily}; /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */ width: fit-content; } @@ -543,7 +543,7 @@ x: el.startX, y: el.startY, style: { fontSize: el.fontSize, - fontFamily: "Kaiti", + fontFamily: el.fontFamily, isVertical: true, letterSpacing: 5, lineHeight: 1.5, visibility: el.isActive, @@ -717,7 +717,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", diff --git a/web/admin/item/css/tablet-design.css b/web/admin/item/css/tablet-design.css index 6710085..dbdf9eb 100644 --- a/web/admin/item/css/tablet-design.css +++ b/web/admin/item/css/tablet-design.css @@ -16,6 +16,17 @@ /* 紙張保持米黃，因為它是實物模擬 */ } +/*.yangshang-wrapper { + display: flex !important; + flex-direction: row !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;*/ /* 確保文字方向轉正 */ + /*gap: 1px; +}*/ .designer-root { /* 防止瀏覽器預設捲動影響畫布 */ diff --git a/web/admin/print/print_multi_new.aspx b/web/admin/print/print_multi_new.aspx index 38a72a3..cf9b22d 100644 --- a/web/admin/print/print_multi_new.aspx +++ b/web/admin/print/print_multi_new.aspx @@ -33,23 +33,18 @@ 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; /* 確保文字方向轉正 */ -} + } + 列印 +
@@ -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; }