Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
e561d58c by renchao@pashanhoo.com
Options

style:证书预览

1 parent 9d6a70e6
Inline Side-by-side
Showing 2 changed files with 211 additions and 32 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 09:21:38
* @LastEditTime: 2023-08-25 10:34:46
-->
<template>
<div>
......@@ -106,12 +106,23 @@
this.loading = false
})
},
// 不动产证书
/**
* @description: 不动产证书
* @author: renchao
*/
drawTextOnImage () {
function getByteLen (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zs;
const context = canvas.getContext('2d');
const image = new Image();
......@@ -123,30 +134,29 @@
context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97);
context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
// 不动产单元号
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97);
context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136);
this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
context.fillText(this.bdcdyh ? this.bdcdyh : '', 138, 223);
context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223);
context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
// 使用期限
if (this.bdcqz.syqx && this.bdcqz.syqx.length > 28) {
let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
lines3.forEach((line, index) => {
const y = 427 + (index * 27); // 每行文本的垂直位置
context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
// context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
if (getByteLen(this.bdcqz.mj) > 41) {
lines6.forEach((line, index) => {
const y = 378 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 315) {
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
......@@ -155,18 +165,37 @@
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 138, y + (index * 20)); // 调整行高
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
lines6.forEach((line, index) => {
const y = 386 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
// context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
// qlqtzk
const maxWidth = 305; // 最大宽度限制
const maxWidth = 330; // 最大宽度限制
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
lines.forEach((line, index) => {
const y = 469 + (index * 37); // 每行文本的垂直位置
const y = 463 + (index * 40); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
......@@ -181,13 +210,12 @@
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 138, y + (index * 20)); // 调整行高
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : [];
lines1.forEach((line, index) => {
const y = 100 + (index * 37); // 每行文本的垂直位置
const y = 100 + (index * 30); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
......@@ -202,9 +230,94 @@
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 580, y + (index * 20)); // 调整行高
context.fillText(line, 580, y + (index * 30)); // 调整行高
})
})
let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
if (getByteLen(this.bdcqz.syqx) > 41) {
lines3.forEach((line, index) => {
const y = 423 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines3.forEach((line, index) => {
const y = 430 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 315) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
if (getByteLen(this.bdcqz.zl) > 41) {
lines2.forEach((line, index) => {
const y = 170 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines2.forEach((line, index) => {
const y = 180 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
}
image.src = this.imgSrc
},
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 09:31:57
* @LastEditTime: 2023-08-25 10:44:31
-->
<template>
<div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
......@@ -122,6 +122,18 @@
* @author: renchao
*/
drawTextOnImage () {
function getByteLen (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zs;
const context = canvas.getContext('2d');
const image = new Image();
......@@ -145,10 +157,52 @@
context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
// context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
if (getByteLen(this.bdcqz.mj) > 41) {
lines6.forEach((line, index) => {
const y = 378 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines6.forEach((line, index) => {
const y = 386 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
// context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
// qlqtzk
const maxWidth = 333; // 最大宽度限制
const maxWidth = 330; // 最大宽度限制
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
lines.forEach((line, index) => {
const y = 463 + (index * 40); // 每行文本的垂直位置
......@@ -190,7 +244,7 @@
})
})
let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
if (lines3.length >= 22) {
if (getByteLen(this.bdcqz.syqx) > 41) {
lines3.forEach((line, index) => {
const y = 423 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
......@@ -198,7 +252,7 @@
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 315) {
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
......@@ -233,7 +287,7 @@
}
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
if (lines2.length >= 22) {
if (getByteLen(this.bdcqz.zl) > 41) {
lines2.forEach((line, index) => {
const y = 170 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
......@@ -282,6 +336,19 @@
* @author: renchao
*/
drawTextzmImage () {
function getByteLen (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zm;
const context = canvas.getContext('2d');
const image = new Image();
......@@ -355,7 +422,6 @@
context.fillText(line, 775, y + (index * 16)); // 调整行高
})
})
// fj
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : [];
lines1.forEach((line, index) => {
......