From bfd07ebe90cdfe3e0b17e7fb94579f3656889fb7 Mon Sep 17 00:00:00 2001 From: minom Date: Mon, 9 Mar 2026 18:09:32 +0800 Subject: [PATCH] .. --- web/App_Code/DataAccess/StyleDataAccess.cs | 88 ++++++++++- web/App_Code/Entity/Style.cs | 3 + web/admin/item/TabletDesigner.aspx | 165 +++++++++++++++------ web/admin/item/TabletDesigner.aspx.cs | 10 +- web/web.config | 5 +- 5 files changed, 215 insertions(+), 56 deletions(-) diff --git a/web/App_Code/DataAccess/StyleDataAccess.cs b/web/App_Code/DataAccess/StyleDataAccess.cs index 574ff38..72d664a 100644 --- a/web/App_Code/DataAccess/StyleDataAccess.cs +++ b/web/App_Code/DataAccess/StyleDataAccess.cs @@ -157,9 +157,9 @@ public class StyleDataAccess sb.Clear(); sb.Append("insert into TabletStyleDetail(StyleID,Name,Descr,ElementID,StartX,StartY,FontSize,BreakLen,FontFamily,TwoOffset,"); - sb.Append("ThreeOffset,FourOffSet,IsActive,Width,CUser,CDate,CTime,UUser,UDate,UTime) "); + sb.Append("ThreeOffset,FourOffSet,IsActive,Width,Height,TextWidth,TextHeight,CUser,CDate,CTime,UUser,UDate,UTime) "); sb.Append("values (@StyleID,@Name,@Descr,@ElementID,@StartX,@StartY,@FontSize,@BreakLen,@FontFamily,@TwoOffset,"); - sb.Append("@ThreeOffset,@FourOffSet,@IsActive,@Width,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime) "); + sb.Append("@ThreeOffset,@FourOffSet,@IsActive,@Width,@Height,@TextWidth,@TextHeight,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime) "); foreach (var item in list) { SqlParameter[] sp1 = new SqlParameter[] { @@ -177,6 +177,9 @@ public class StyleDataAccess new SqlParameter("@FourOffset",item.FourOffset), new SqlParameter("@IsActive",item.IsActive), new SqlParameter("@Width",item.Width), + new SqlParameter("@Height",item.Height), + new SqlParameter("@TextWidth",item.TextWidth), + new SqlParameter("@TextHeight",item.TextHeight), new SqlParameter("@CUser",""), new SqlParameter("@CDate",""), new SqlParameter("@CTime",""), @@ -196,4 +199,85 @@ public class StyleDataAccess } return obj; } + + public object[] UpdateStyle(TabletStyle ts, List list) + { + try + { + using (var context = new ezEntities()) + { + StringBuilder sb = new StringBuilder(); + SqlParameter[] sp = new SqlParameter[] { + new SqlParameter("@StyleID",ts.StyleID), + new SqlParameter("@Name",ts.Name), + new SqlParameter("@Descr",ts.Descr), + new SqlParameter("@PaperSize",ts.PaperSize), + new SqlParameter("@BackendImg",ts.BackendImg), + new SqlParameter("@PrintSize",ts.PrintSize), + new SqlParameter("@PrintMode",ts.PrintMode), + new SqlParameter("@Orientation",ts.Orientation), + new SqlParameter("@PrintPageCount",ts.PrintPageCount), + new SqlParameter("@CUser",""), + new SqlParameter("@CDate",""), + new SqlParameter("@CTime",""), + new SqlParameter("@UUser",""), + new SqlParameter("@UDate",""), + new SqlParameter("@UTime",""), + }; + + sb.Append("update TableStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,"); + sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,"); + sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime "); + sb.Append("where StyleID=@StyleID "); + + context.Database.ExecuteSqlCommand(sb.ToString(), sp); + + sb.Clear(); + sb.Append("update TabletStyleDetail set Descr=@Descr,StartX=@StartX,StartY=@StartY,FontSize=@FontSize,BreakLen=@BreakLen,"); + sb.Append("FontFamily=@FontFamily,TwoOffset=@TwoOffset,ThreeOffset=@ThreeOffset,FourOffsert=@FourOffset,IsActive=@IsActive,"); + sb.Append("Width=@Width,Height=@Height,TextWidth=@TextWidth,TextHeight=@TextHeight,UUser=@UUser,UDate=@UDate,UTime=@UTime "); + sb.Append("where StyleID=@StyleID and ElementID=@ElementID "); + //sb.Append("insert into TabletStyleDetail(StyleID,Name,Descr,ElementID,StartX,StartY,FontSize,BreakLen,FontFamily,TwoOffset,"); + //sb.Append("ThreeOffset,FourOffSet,IsActive,Width,Height,TextWidth,TextHeight,CUser,CDate,CTime,UUser,UDate,UTime) "); + //sb.Append("values (@StyleID,@Name,@Descr,@ElementID,@StartX,@StartY,@FontSize,@BreakLen,@FontFamily,@TwoOffset,"); + //sb.Append("@ThreeOffset,@FourOffSet,@IsActive,@Width,@Height,@TextWidth,@TextHeight,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime) "); + foreach (var item in list) + { + SqlParameter[] sp1 = new SqlParameter[] { + new SqlParameter("@StyleID",item.StyleID), + new SqlParameter("@Name",item.Name), + new SqlParameter("@Descr",item.Descr), + new SqlParameter("@ElementID",item.ElementID), + new SqlParameter("@StartX",item.StartX), + new SqlParameter("@StartY",item.StartY), + new SqlParameter("@FontSize",item.FontSize), + new SqlParameter("@BreakLen",item.BreakLen), + new SqlParameter("@FontFamily",item.FontFamily), + new SqlParameter("@TwoOffset",item.TwoOffset), + new SqlParameter("@ThreeOffset",item.ThreeOffset), + new SqlParameter("@FourOffset",item.FourOffset), + new SqlParameter("@IsActive",item.IsActive), + new SqlParameter("@Width",item.Width), + new SqlParameter("@Height",item.Height), + new SqlParameter("@TextWidth",item.TextWidth), + new SqlParameter("@TextHeight",item.TextHeight), + new SqlParameter("@CUser",""), + new SqlParameter("@CDate",""), + new SqlParameter("@CTime",""), + new SqlParameter("@UUser",""), + new SqlParameter("@UDate",""), + new SqlParameter("@UTime",""), + }; + context.Database.ExecuteSqlCommand(sb.ToString(), sp1); + } + } + } + catch (Exception ex) + { + log.writeErrorPath("UpdateStyle:" + ex.Message + ex.StackTrace); + obj[0] = "N"; + obj[1] = ex.Message; + } + return obj; + } } \ No newline at end of file diff --git a/web/App_Code/Entity/Style.cs b/web/App_Code/Entity/Style.cs index 35c7be0..bce4a46 100644 --- a/web/App_Code/Entity/Style.cs +++ b/web/App_Code/Entity/Style.cs @@ -48,6 +48,9 @@ public class TabletStyleDetail public string FourOffset { get; set; } public string IsActive { get; set; } public string Width { get; set; } + public string Height { get; set; } + public string TextWidth { get; set; } + public string TextHeight { get; set; } public string BreakLen { get; set; } public string CUser { get; set; } public string CDate { get; set; } diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx index fcd6838..936b155 100644 --- a/web/admin/item/TabletDesigner.aspx +++ b/web/admin/item/TabletDesigner.aspx @@ -8,6 +8,7 @@ @import "css/tablet-design.css"; @import "css/floating.css"; --%> + @@ -23,26 +24,7 @@ - <%--
-
- -
-
-
- - -
-
-
--%> - - <%--
- - -
--%> +
- <%--
+
- - + +
-
--%> +
+
+
+
+ + +
+
+
+
+ + +
+
+
@@ -221,15 +217,12 @@ }, changeOrientation() { this.orientation = (this.orientation === "portrait" ? "land" : "portrait"); - console.log(this.orientation); $("#paperOrientation").empty(); let ori = this.orientation == "portrait" ? "直向" : "橫向"; - console.log(this.orientation, ori) $("#paperOrientation").html("" + ori + ""); let paperSize = $("#paperSize").val() let size = this.allSize.find(x => x.name == paperSize) - console.log(paperSize, size); this.paper.width = this.orientation == "portrait" ? size.width : size.height; this.paper.height = this.orientation == "portrait" ? size.height : size.width; $(".tablet-paper").css({ @@ -239,17 +232,17 @@ }); }, async getElements() { + let self=this await axios .post(HTTP_HOST + 'api/tablet/GetTabletElement', {}) .then(response => { - console.log(response); //if (response.result=="Y") { if (response.status == "200") { let data = response.data; if (data.result == "Y") { data.data.forEach(x => { - this.tabletElements.push(x); - } + self.tabletElements.push(x); + }); } } }); @@ -258,7 +251,6 @@ await axios .post(HTTP_HOST + 'api/tablet/GetStyleData', {}) .then(response => { - console.log(response); //if (response.result=="Y") { if (response.status == "200") { let data = response.data; @@ -279,7 +271,6 @@ $(".style-menu li").on("click", function (e) { $(".style-menu li").removeClass('active'); $(this).addClass('active'); - console.log(e.target.textContent, $(this)); $("#styleName").val(e.target.textContent); self.changeStyle(e.target.getAttribute("data-value")); let style = self.allStyle.find(x => x.styleID == e.target.getAttribute("data-value")); @@ -293,6 +284,16 @@ let self = this; this.elements.length = 0; let obj = this.elements + let s=this.allStyle.find(x=>x.styleID==id) + $("#paperSize").val(s.paperSize); + $("#backendInp").val(s.backendImg); + $("#printSize").val(s.printSize); + $("#printMode").val(s.printMode); + $("#perPage").val(s.printPageCount); + console.log("s:",s); + let img = this.bg.find(x => x.name == s.backendImg); + console.log(img); + $(".tablet-paper").css({ 'background-image': 'url(' + img.path + ')', 'background-size': '100% 100%' }) await axios .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', {}) .then(response => { @@ -300,10 +301,13 @@ let data = response.data; if (data.result == "Y") { let details = data.data; - $(".tablet-paper").empty() details.forEach(el => { - let te=self.tabletElements.find(x=>x.elementID==el.elementID); + + let te = self.tabletElements.find(x => { + return x.elementID == el.elementID + }); + console.log("details:",el,te); let config = { id: el.elementID, type: te.elementType, @@ -313,10 +317,14 @@ fontSize: 24, fontFamily: "Kaiti", isVertical : true, letterSpacing : 5, lineHeight : 1.5, - visibility: el.isActive + visibility: te.isActive }, width: el.width, - breakLen:el.breakLen + height: el.height, + textWidth: el.textWidth, + textHeight:el.textHeight, + breakLen: el.breakLen, + backendInp: el.backendImg }; obj.push(config) @@ -353,6 +361,10 @@ $('#3offset').on('input', (e) => this.updateActive('3offset', $(e.target).val())) $('#4offset').on('input', (e) => this.updateActive('4offset', $(e.target).val())) $('#breakLen').on('input', (e) => this.updateActive('breakLen', $(e.target).val())) + $('#width').on('input', (e) => this.updateActive('width', $(e.target).val())) + $('#height').on('input', (e) => this.updateActive('height', $(e.target).val())) + $('#textWidth').on('input', (e) => this.updateActive('textWidth', $(e.target).val())) + $('#textHeight').on('input', (e) => this.updateActive('textHeight', $(e.target).val())) $(document).on('mousedown', '.tablet-element', (e) => { e.stopPropagation(); this.select($(e.currentTarget).attr('id')); @@ -409,16 +421,64 @@ else if (el.id === 'address') { html = el.text.replace(/(\d+)/g, '$1'); } + else if (el.id === 'title1') { + + //html = "
"; + //console.log(slice); + //slice.forEach(x => { + // html=html+""+x+"" + //}); + //html = html + "
"; + html = this.renderNameList(slice,el); + console.log(html); + } else { html = el.text; } return $(`
`) .css({ - position: "absolute", left: this.getPosInMm(el.x) + "mm", top: this.getPosInMm(el.y) + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility + position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility }) .html(html); }, + renderNameList(names,el) { + let $namelist = $(`
`).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", + }); + console.log("nameList:", $namelist) + let self = this; + names.forEach(n => { + $namelist.append(self.renderNameSpan(n,el)) + }) + return $namelist; + }, + renderNameSpan(name,el) { + return $(`${name}`).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": "40px", + "margin-left": "5px", + "text-justify": "inter-character", + }); + }, // 品字佈局邏輯：一上二下 renderRoster(names, el) { @@ -453,8 +513,6 @@ const el = self.elements.find(x => x.id === id); el.x = self.getPosInMm(ui.position.left); el.y = self.getPosInMm(ui.position.top); - - console.log(id, el) //console.log(id,ui.position.left, ui.position.top,ui.offset.left,ui.offset.top); $(`.tablet-element[id="${id}"]`).css({ left: el.x + "mm", top: el.y + "mm" }); } @@ -474,13 +532,15 @@ $("#4offset").val(el.fourOffset); $("#breakLen").val(el.breakLen); $("#width").val(el.width); + $("#height").val(el.height); + $("#textWidth").val(el.textWidth); + $("#textHeight").val(el.textHeight); //this.render(); }, updateActive(key, val) { const el = this.elements.find(x => x.id === this.activeId); - console.log("updateActive:",this.activeId, el,key,val) if (key === 'fontSize') el.style.fontSize = parseFloat(val); else if (key === 'width') el.width = parseFloat(val); else if (key === 'breakLen') el.breakLen = parseInt(val); @@ -502,6 +562,18 @@ $(`.tablet-element[id="${this.activeId}"]`).css({ position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility }).html(html); + } else if (this.activeId === "title1") { + let slice = el.text.split('\n').filter(s => s.trim()); + //html = "
"; + //console.log(slice); + //slice.forEach(x => { + // html = html + "" + x + "" + //}); + //html = html + "
"; + html = this.renderNameList(slice, el); + $(`.tablet-element[id="${this.activeId}"]`).css({ + position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility + }).html(html); } else { $(`.tablet-element[id="${this.activeId}"]`).css({ position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility @@ -510,11 +582,8 @@ //this.render(); }, displayItem(id) { - console.log(id); let el = this.elements.find(x => x.id === id); - console.log("before:", el); el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden"; - console.log("after:", el, el.x, el.y); $("#" + id).css({ position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility }) @@ -541,7 +610,7 @@ //this.render(); }, addElement() { - console.log("QQQ"); + //console.log("QQQ"); }, wrapImageInSvg(imageBase64) { // 建立一個簡單的 SVG 字串，將圖片鋪滿 @@ -562,10 +631,9 @@ }, bindBackend() { $("#backendInp").on('change', function (e) { - console.log($("#backendInp")) + const input = e.target; if (input.files && input.files[0]) { - console.log("file:", input.files[0]); const file = input.files[0]; // 1. 先讀取檔案轉成 Base64 @@ -575,7 +643,6 @@ // 2. 將 Base64 PNG 包裝成 SVG //const svgDataUri = this.wrapImageInSvg(base64Image); - console.log(base64Image) // 3. 設定到底圖 //this.service.setBackground(svgDataUri); $(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')', 'background-size': '100% 100%' }) @@ -595,7 +662,7 @@ detail.push({ elementID: el.id, startX: el.x, startY: el.y, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily, breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset, - isActive: el.style.visibility,width:el.width + isActive: el.style.visibility,width:el.width,height:el.height,textWidth:el.textWidth,textHeight:el.textHeight }); }); diff --git a/web/admin/item/TabletDesigner.aspx.cs b/web/admin/item/TabletDesigner.aspx.cs index ddf0e33..065b58c 100644 --- a/web/admin/item/TabletDesigner.aspx.cs +++ b/web/admin/item/TabletDesigner.aspx.cs @@ -23,6 +23,9 @@ public class TabletElement public double? threeOffset { get; set; } public double? fourOffset { get; set; } public int? breakLen { get; set; } + public string backendInp { get; set; } + public double? textWidth { get; set; } + public double? textHeight { get; set; } } @@ -58,12 +61,13 @@ public partial class admin_item_TabletDesigner :MyWeb.config { elements = new List { new TabletElement { - id = "address", type = "address", text = "台中市潭子區中山路", x = 160, y = 80, + id = "address", type = "address", text = "台中市潭子區中山路", x = 60, y = 80, style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" } }, new TabletElement { - id = "title1", type = "ancestor", text = "牌位正名", x = 130, y = 80, - style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" } + id = "title1", type = "ancestor", text = "張一\n李二\n陳三\n吳四\n劉五\n趙六\n林七\n徐八", x = 50, y = 80, + width=136,height=600,textWidth=20,textHeight=90, + style = new ElementStyle { fontSize = 16, fontFamily = "Kaiti", isVertical = true, letterSpacing = 1, lineHeight = 1 ,visibility="" } }, new TabletElement { id = "lefttitle", type = "ancestor", text = "左正名", x = 10, y = 80, diff --git a/web/web.config b/web/web.config index 466bace..bcc89b1 100644 --- a/web/web.config +++ b/web/web.config @@ -42,11 +42,12 @@ + - - + +