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
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 09:21:38 4 * @LastEditTime: 2023-08-25 10:34:46
5 --> 5 -->
6 <template> 6 <template>
7 <div> 7 <div>
...@@ -106,12 +106,23 @@ ...@@ -106,12 +106,23 @@
106 this.loading = false 106 this.loading = false
107 }) 107 })
108 }, 108 },
109 // 不动产证书
110 /** 109 /**
111 * @description: 不动产证书 110 * @description: 不动产证书
112 * @author: renchao 111 * @author: renchao
113 */ 112 */
114 drawTextOnImage () { 113 drawTextOnImage () {
114 function getByteLen (val) {
115 var len = 0;
116 for (var i = 0; i < val.length; i++) {
117 var length = val.charCodeAt(i);
118 if (length >= 0 && length <= 128) {
119 len += 1;
120 } else {
121 len += 2;
122 }
123 }
124 return len;
125 }
115 const canvas = this.$refs.zs; 126 const canvas = this.$refs.zs;
116 const context = canvas.getContext('2d'); 127 const context = canvas.getContext('2d');
117 const image = new Image(); 128 const image = new Image();
...@@ -123,30 +134,29 @@ ...@@ -123,30 +134,29 @@
123 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); 134 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
124 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56); 135 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
125 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56); 136 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
126 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97); 137 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97);
127 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138); 138 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136);
128 context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180); 139
129 // 不动产单元号
130 this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' + 140 this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
131 this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length) 141 this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
132 context.fillText(this.bdcdyh ? this.bdcdyh : '', 138, 223); 142 context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223);
133 143
134 144
135 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263); 145
136 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303); 146 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
137 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); 147 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
138 context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); 148 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
139 // 使用期限 149 // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
140 if (this.bdcqz.syqx && this.bdcqz.syqx.length > 28) { 150 let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
141 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; 151 if (getByteLen(this.bdcqz.mj) > 41) {
142 lines3.forEach((line, index) => { 152 lines6.forEach((line, index) => {
143 const y = 427 + (index * 27); // 每行文本的垂直位置 153 const y = 378 + (index * 27); // 每行文本的垂直位置
144 let currentLine = ''; 154 let currentLine = '';
145 let arr = []; 155 let arr = [];
146 for (let word of line) { 156 for (let word of line) {
147 const testLine = currentLine + word; 157 const testLine = currentLine + word;
148 const lineWidth = context.measureText(testLine).width; 158 const lineWidth = context.measureText(testLine).width;
149 if (lineWidth <= 315) { 159 if (lineWidth <= 330) {
150 currentLine = testLine; 160 currentLine = testLine;
151 } else { 161 } else {
152 arr.push(currentLine); 162 arr.push(currentLine);
...@@ -155,18 +165,37 @@ ...@@ -155,18 +165,37 @@
155 } 165 }
156 arr.push(currentLine); 166 arr.push(currentLine);
157 arr.forEach((line, index) => { 167 arr.forEach((line, index) => {
158 context.fillText(line, 138, y + (index * 20)); // 调整行高 168 context.fillText(line, 129, y + (index * 20)); // 调整行高
159 }) 169 })
160 }) 170 })
161 } else { 171 } else {
162 context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); 172 lines6.forEach((line, index) => {
173 const y = 386 + (index * 27); // 每行文本的垂直位置
174 let currentLine = '';
175 let arr = [];
176 for (let word of line) {
177 const testLine = currentLine + word;
178 const lineWidth = context.measureText(testLine).width;
179 if (lineWidth <= 330) {
180 currentLine = testLine;
181 } else {
182 arr.push(currentLine);
183 currentLine = word;
184 }
185 }
186 arr.push(currentLine);
187 arr.forEach((line, index) => {
188 context.fillText(line, 129, y + (index * 20)); // 调整行高
189 })
190 })
163 } 191 }
164 192
193 // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
165 // qlqtzk 194 // qlqtzk
166 const maxWidth = 305; // 最大宽度限制 195 const maxWidth = 330; // 最大宽度限制
167 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; 196 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
168 lines.forEach((line, index) => { 197 lines.forEach((line, index) => {
169 const y = 469 + (index * 37); // 每行文本的垂直位置 198 const y = 463 + (index * 40); // 每行文本的垂直位置
170 let currentLine = ''; 199 let currentLine = '';
171 let arr = []; 200 let arr = [];
172 for (let word of line) { 201 for (let word of line) {
...@@ -181,13 +210,12 @@ ...@@ -181,13 +210,12 @@
181 } 210 }
182 arr.push(currentLine); 211 arr.push(currentLine);
183 arr.forEach((line, index) => { 212 arr.forEach((line, index) => {
184 context.fillText(line, 138, y + (index * 20)); // 调整行高 213 context.fillText(line, 129, y + (index * 20)); // 调整行高
185 }) 214 })
186 }) 215 })
187
188 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; 216 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : [];
189 lines1.forEach((line, index) => { 217 lines1.forEach((line, index) => {
190 const y = 100 + (index * 37); // 每行文本的垂直位置 218 const y = 100 + (index * 30); // 每行文本的垂直位置
191 let currentLine = ''; 219 let currentLine = '';
192 let arr = []; 220 let arr = [];
193 for (let word of line) { 221 for (let word of line) {
...@@ -202,9 +230,94 @@ ...@@ -202,9 +230,94 @@
202 } 230 }
203 arr.push(currentLine); 231 arr.push(currentLine);
204 arr.forEach((line, index) => { 232 arr.forEach((line, index) => {
205 context.fillText(line, 580, y + (index * 20)); // 调整行高 233 context.fillText(line, 580, y + (index * 30)); // 调整行高
206 }) 234 })
207 }) 235 })
236 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
237 if (getByteLen(this.bdcqz.syqx) > 41) {
238 lines3.forEach((line, index) => {
239 const y = 423 + (index * 27); // 每行文本的垂直位置
240 let currentLine = '';
241 let arr = [];
242 for (let word of line) {
243 const testLine = currentLine + word;
244 const lineWidth = context.measureText(testLine).width;
245 if (lineWidth <= 330) {
246 currentLine = testLine;
247 } else {
248 arr.push(currentLine);
249 currentLine = word;
250 }
251 }
252 arr.push(currentLine);
253 arr.forEach((line, index) => {
254 context.fillText(line, 129, y + (index * 20)); // 调整行高
255 })
256 })
257 } else {
258 lines3.forEach((line, index) => {
259 const y = 430 + (index * 27); // 每行文本的垂直位置
260 let currentLine = '';
261 let arr = [];
262 for (let word of line) {
263 const testLine = currentLine + word;
264 const lineWidth = context.measureText(testLine).width;
265 if (lineWidth <= 315) {
266 currentLine = testLine;
267 } else {
268 arr.push(currentLine);
269 currentLine = word;
270 }
271 }
272 arr.push(currentLine);
273 arr.forEach((line, index) => {
274 context.fillText(line, 129, y + (index * 20)); // 调整行高
275 })
276 })
277 }
278
279 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
280 if (getByteLen(this.bdcqz.zl) > 41) {
281 lines2.forEach((line, index) => {
282 const y = 170 + (index * 20); // 每行文本的垂直位置
283 let currentLine = '';
284 let arr = [];
285 for (let word of line) {
286 const testLine = currentLine + word;
287 const lineWidth = context.measureText(testLine).width;
288 if (lineWidth <= 336) {
289 currentLine = testLine;
290 } else {
291 arr.push(currentLine);
292 currentLine = word;
293 }
294 }
295 arr.push(currentLine);
296 arr.forEach((line, index) => {
297 context.fillText(line, 129, y + (index * 20)); // 调整行高
298 })
299 })
300 } else {
301 lines2.forEach((line, index) => {
302 const y = 180 + (index * 20); // 每行文本的垂直位置
303 let currentLine = '';
304 let arr = [];
305 for (let word of line) {
306 const testLine = currentLine + word;
307 const lineWidth = context.measureText(testLine).width;
308 if (lineWidth <= 336) {
309 currentLine = testLine;
310 } else {
311 arr.push(currentLine);
312 currentLine = word;
313 }
314 }
315 arr.push(currentLine);
316 arr.forEach((line, index) => {
317 context.fillText(line, 129, y + (index * 20)); // 调整行高
318 })
319 })
320 }
208 } 321 }
209 image.src = this.imgSrc 322 image.src = this.imgSrc
210 }, 323 },
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 09:31:57 4 * @LastEditTime: 2023-08-25 10:44:31
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;"> 7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
...@@ -122,6 +122,18 @@ ...@@ -122,6 +122,18 @@
122 * @author: renchao 122 * @author: renchao
123 */ 123 */
124 drawTextOnImage () { 124 drawTextOnImage () {
125 function getByteLen (val) {
126 var len = 0;
127 for (var i = 0; i < val.length; i++) {
128 var length = val.charCodeAt(i);
129 if (length >= 0 && length <= 128) {
130 len += 1;
131 } else {
132 len += 2;
133 }
134 }
135 return len;
136 }
125 const canvas = this.$refs.zs; 137 const canvas = this.$refs.zs;
126 const context = canvas.getContext('2d'); 138 const context = canvas.getContext('2d');
127 const image = new Image(); 139 const image = new Image();
...@@ -145,10 +157,52 @@ ...@@ -145,10 +157,52 @@
145 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263); 157 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
146 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303); 158 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
147 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346); 159 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
148 context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); 160 // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
161 let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
162 if (getByteLen(this.bdcqz.mj) > 41) {
163 lines6.forEach((line, index) => {
164 const y = 378 + (index * 27); // 每行文本的垂直位置
165 let currentLine = '';
166 let arr = [];
167 for (let word of line) {
168 const testLine = currentLine + word;
169 const lineWidth = context.measureText(testLine).width;
170 if (lineWidth <= 330) {
171 currentLine = testLine;
172 } else {
173 arr.push(currentLine);
174 currentLine = word;
175 }
176 }
177 arr.push(currentLine);
178 arr.forEach((line, index) => {
179 context.fillText(line, 129, y + (index * 20)); // 调整行高
180 })
181 })
182 } else {
183 lines6.forEach((line, index) => {
184 const y = 386 + (index * 27); // 每行文本的垂直位置
185 let currentLine = '';
186 let arr = [];
187 for (let word of line) {
188 const testLine = currentLine + word;
189 const lineWidth = context.measureText(testLine).width;
190 if (lineWidth <= 330) {
191 currentLine = testLine;
192 } else {
193 arr.push(currentLine);
194 currentLine = word;
195 }
196 }
197 arr.push(currentLine);
198 arr.forEach((line, index) => {
199 context.fillText(line, 129, y + (index * 20)); // 调整行高
200 })
201 })
202 }
149 // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429); 203 // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
150 // qlqtzk 204 // qlqtzk
151 const maxWidth = 333; // 最大宽度限制 205 const maxWidth = 330; // 最大宽度限制
152 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; 206 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
153 lines.forEach((line, index) => { 207 lines.forEach((line, index) => {
154 const y = 463 + (index * 40); // 每行文本的垂直位置 208 const y = 463 + (index * 40); // 每行文本的垂直位置
...@@ -190,7 +244,7 @@ ...@@ -190,7 +244,7 @@
190 }) 244 })
191 }) 245 })
192 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; 246 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
193 if (lines3.length >= 22) { 247 if (getByteLen(this.bdcqz.syqx) > 41) {
194 lines3.forEach((line, index) => { 248 lines3.forEach((line, index) => {
195 const y = 423 + (index * 27); // 每行文本的垂直位置 249 const y = 423 + (index * 27); // 每行文本的垂直位置
196 let currentLine = ''; 250 let currentLine = '';
...@@ -198,7 +252,7 @@ ...@@ -198,7 +252,7 @@
198 for (let word of line) { 252 for (let word of line) {
199 const testLine = currentLine + word; 253 const testLine = currentLine + word;
200 const lineWidth = context.measureText(testLine).width; 254 const lineWidth = context.measureText(testLine).width;
201 if (lineWidth <= 315) { 255 if (lineWidth <= 330) {
202 currentLine = testLine; 256 currentLine = testLine;
203 } else { 257 } else {
204 arr.push(currentLine); 258 arr.push(currentLine);
...@@ -233,7 +287,7 @@ ...@@ -233,7 +287,7 @@
233 } 287 }
234 288
235 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; 289 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
236 if (lines2.length >= 22) { 290 if (getByteLen(this.bdcqz.zl) > 41) {
237 lines2.forEach((line, index) => { 291 lines2.forEach((line, index) => {
238 const y = 170 + (index * 20); // 每行文本的垂直位置 292 const y = 170 + (index * 20); // 每行文本的垂直位置
239 let currentLine = ''; 293 let currentLine = '';
...@@ -282,6 +336,19 @@ ...@@ -282,6 +336,19 @@
282 * @author: renchao 336 * @author: renchao
283 */ 337 */
284 drawTextzmImage () { 338 drawTextzmImage () {
339 function getByteLen (val) {
340 var len = 0;
341 for (var i = 0; i < val.length; i++) {
342 var length = val.charCodeAt(i);
343 if (length >= 0 && length <= 128) {
344 len += 1;
345 } else {
346 len += 2;
347 }
348 }
349 return len;
350 }
351
285 const canvas = this.$refs.zm; 352 const canvas = this.$refs.zm;
286 const context = canvas.getContext('2d'); 353 const context = canvas.getContext('2d');
287 const image = new Image(); 354 const image = new Image();
...@@ -355,7 +422,6 @@ ...@@ -355,7 +422,6 @@
355 context.fillText(line, 775, y + (index * 16)); // 调整行高 422 context.fillText(line, 775, y + (index * 16)); // 调整行高
356 }) 423 })
357 }) 424 })
358
359 // fj 425 // fj
360 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; 426 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : [];
361 lines1.forEach((line, index) => { 427 lines1.forEach((line, index) => {
......