From 0bb9da198bd884de394b186e572f48eb21bbff6d Mon Sep 17 00:00:00 2001 From: minom Date: Wed, 11 Mar 2026 17:37:27 +0800 Subject: [PATCH] .. --- web/admin/item/TabletDesigner.aspx | 202 +++++++++++++++++---------- web/admin/item/css/tablet-design.css | 9 +- 2 files changed, 136 insertions(+), 75 deletions(-) diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx index 65819b5..e1ad193 100644 --- a/web/admin/item/TabletDesigner.aspx +++ b/web/admin/item/TabletDesigner.aspx @@ -232,7 +232,7 @@ elements: [], activeId: null, styleID: null, - paper: { width: 100, height: 272 }, + paper: { width: "100", height: "272" }, rosterLimit: 8, allSize: [ //{ name: "A3", width: 297, height: 420, selected: "" }, @@ -301,6 +301,8 @@ }, print() { + let s = this.allStyle.find(x => x.styleID == this.styleID) + let size = this.allSize.find(x=>x.id=s.paperSize) let w = window.open('', '_blank'); if (!w) { alert("請允許瀏覽器開啟彈出式視窗！"); @@ -319,73 +321,114 @@ // 4. 組合列印視窗的 HTML let htmlContent = ` - - - - 預覽列印 - 牌位設計 - - + + + + 預覽列印 - 牌位設計 + + - - - - ${canvasHtml} - - - `; + } + body{ + --page-w: ${size.width}mm; + --page-h: ${size.height}mm; + --font-max: 22pt; + --bg-padding: 0; + } + } + + + + ${canvasHtml} + + + `; w.document.write(htmlContent); w.document.close(); @@ -430,8 +473,8 @@ }); $("#paperSize").append("") this.allSize.forEach(x => { - $("#paperSize").append("") - $("#printSize").append(""); + $("#paperSize").append("") + $("#printSize").append(""); }) }, async getElements() { @@ -499,13 +542,23 @@ this.elements.length = 0; let obj = this.elements let s = this.allStyle.find(x => x.styleID == id) + console.log("changeStyle:", s); + let size = this.allSize.find(x => x.id == s.paperSize) + this.paper.width = size.width + this.paper.height = size.height + console.log("changeStyle:", size); + console.log("changeStyle:", this.paper); $("#paperSize").val(s.paperSize); $("#backendInp").val(s.backendImg); $("#printSize").val(s.printSize); $("#printMode").val(s.printMode); $("#perPage").val(s.printPageCount); let img = this.bg.find(x => x.name == s.backendImg); - $(".tablet-paper").css({ 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%' }) + $(".tablet-paper").css({ + 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%', + width: (size?size.width:self.paper.width) + "mm", + height: (size?size.height:self.paper.height) + "mm", + }) await axios .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id }) .then(response => { @@ -559,16 +612,16 @@ }, changePaper() { let paperSize = $("#paperSize").val() - console.log(paperSize); - + let self = this; if (paperSize == "newsize") { $("#sizeDiv").attr("style","display:"); } else { - let size = this.allSize.find(x => x.name == paperSize) + console.log("paperSize:",paperSize); + let size = this.allSize.find(x => x.id == paperSize) $(".tablet-paper").css({ "background-color": "white", - width: size.width + "mm", - height: size.height + "mm", + width: (size?size.width:self.paper.width) + "mm", + height: (size?size.height:self.paper.height) + "mm", }); } }, @@ -625,11 +678,18 @@ const roster = this.elements.find(e => e.type === 'roster'); const names = roster ? roster.text.split('\n').filter(s => s.trim()) : []; const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit)); - + let style = this.allStyle.find(x => x.styleID == this.styleID); + let size = this.allSize.find(x=>x.id==style.paperSize); + console.log(this.paper,size); //for (let p = 0; p < pages; p++) { // const $paper = $('
') // .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' }); - let $paper = $(".tablet-paper").css({ "background-color": "white", width: this.paper.width + 'mm', height: this.paper.height + 'mm', position: "absolute" }); + let $paper = $(".tablet-paper").css({ + "background-color": "white", + width: (size ? size.width : this.paper.width) + 'mm', + height: (size ? size.height : this.paper.height) + 'mm', + position: "absolute" + }); //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit); const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit); this.elements.forEach(el => { diff --git a/web/admin/item/css/tablet-design.css b/web/admin/item/css/tablet-design.css index f35b4b5..07d3992 100644 --- a/web/admin/item/css/tablet-design.css +++ b/web/admin/item/css/tablet-design.css @@ -67,10 +67,10 @@ /* 名單金字塔佈局容器 */ .roster-container { - width: 100%; height: 100%; + width: 100%; height: 600px; writing-mode: vertical-rl; /* 直書 */ display: flex; - //flex-direction: column; /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */ + /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */ flex-direction: row; /* 上下分層 (Top / Bottom) */ align-items: center; /* 左右置中對齊 */ justify-content: center; @@ -95,12 +95,13 @@ .roster-name { text-orientation: upright; - font-weight: bold; + /*font-weight: bold;*/ white-space: nowrap; line-height: 1.2; font-family: 'Kaiti', serif; /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */ -/* width: fit-content;*/ + width: fit-content; + height:200px; }