This commit is contained in:
2026-07-22 18:04:17 +08:00
parent 07c5027ad8
commit da58dc92d0
19 changed files with 2105 additions and 148 deletions
+70 -29
View File
@@ -511,11 +511,11 @@
await axios
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
.then(response => {
console.log(response)
//console.log(response)
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
console.log("data:",data)
//console.log("data:",data)
if (data.result == "Y") {
data.data.forEach(x => {
self.tabletElements.push(x);
@@ -826,9 +826,18 @@
createEl(el, slice) {
let html = '';
let fontSize = el.style.fontSize;
// 1. 智慧名單渲染
if (el.type === 'roster') {
html = this.renderRoster(slice, el);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
let fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderRoster(slice, el, rowWidth);
}
// 2. 正名合併置中
else if (el.type === 'combined-center') {
@@ -843,11 +852,27 @@
html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
}
else if (el.id === 'title1') {
html = this.renderNameList(slice, el);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
fontSize = Math.floor(rowWidth / 2);
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderNameList(slice, el, rowWidth);
}
else if (el.id === 'alive') {
console.log("createEl:",slice,el)
html = this.renderLiveList(slice, el);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderLiveList(slice, el, rowWidth);
}
else {
html = el.text;
@@ -855,12 +880,12 @@
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
.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
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
//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);
},
renderNameList(names, el) {
renderNameList(names, el,rowWidth) {
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
@@ -880,16 +905,16 @@
//"row-gap": "1px",
let self = this;
names.forEach(n => {
$namelist.append(self.renderNameSpan(n, el))
$namelist.append(self.renderNameSpan(n, el,rowWidth))
})
return $namelist;
},
renderNameSpan(name, el) {
renderNameSpan(name, el,rowWidth) {
return $(`<span>${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
width: `${rowWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
@@ -897,8 +922,8 @@
"text-justify": "inter-character",
});// "margin-bottom": `${el.textSpan}px`,
},
renderLiveList(names, el) {
console.log("renderLiveList:",names);
renderLiveList(names, el,rowWidth) {
//console.log("renderLiveList:",names);
//$("#imp-text").updateActive("text",names)
let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl",
@@ -919,18 +944,17 @@
//"row-gap": "1px",
let self = this;
names.forEach(n => {
$namelist.append(self.renderLiveSpan(n, el))
$namelist.append(self.renderLiveSpan(n, el,rowWidth))
})
return $namelist;
},
renderLiveSpan(name, el) {
console.log("renderLiveSpan:", name, el
);
renderLiveSpan(name, el, rowWidth) {
//console.log("renderLiveSpan:", name, el );
return $(`<span>${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
width: `${rowWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
@@ -1000,9 +1024,9 @@
},
select(id) {
console.log("QQ:",id);
//console.log("QQ:",id);
this.activeId = id;
console.log("QQ:",this.elements);
//console.log("QQ:",this.elements);
const el = this.elements.find(x => x.id === id);
const el1 = this.elements.find(x => x.id === "titletriangle");
$('#attr-box').removeClass('d-none');
@@ -1024,7 +1048,7 @@
},
updateActive(key, val) {
console.log("updateActive:",key, val)
//console.log("updateActive:",key, val)
const el = this.elements.find(x => x.id === this.activeId);
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
@@ -1042,7 +1066,7 @@
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
}).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
} else if (el.type == "combined-center") {
console.log("combined-center");
//console.log("combined-center");
const parts = el.text.split('\n');
html = `<div class="ancestor-wrapper" style='width:${el.width}px !important;height:${el.height}px !important' >
@@ -1058,16 +1082,33 @@
} else if (this.activeId === "title1") {
let names = el.text.split('\n').filter(s => s.trim());
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
html = this.renderNameList(slice, el);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
let fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
html = this.renderNameList(slice, el, rowWidth);//el.style.fontSize
$(`.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
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else if (this.activeId === "alive") {
let names = el.text.split('\n').filter(s => s.trim());
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
html = this.renderLiveList(slice, el);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
let fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderLiveList(slice, el, rowWidth);
$(`.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
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else if (this.activeId==="righttitle") {
$(`.tablet-element[id="${this.activeId}"]`).css({
@@ -1095,11 +1136,11 @@
//this.render();
},
displayItem(id) {
console.log("displayItem:", this.elements, id);
//console.log("displayItem:", this.elements, id);
let el = this.elements.find(x => x.id === id);
el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
//要判斷如果所在位置超出範圍,要拉回來放
console.log("displayItem:", this.paper, el)
//console.log("displayItem:", this.paper, el)
if (el.x > this.paper.width) {
el.x = this.paper.width/2
}
@@ -1197,7 +1238,7 @@
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: 8,
detail: detail
}
console.log(master);
//console.log(master);
let path = "SavDegignerData";
if (this.styleID != null && this.styleID != "") {
path = "UpdateDegignerData"