Skip to content

bdc / bdcdj-web

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

style:cavans换行

1 parent 4a9aa98e
Expand all
Inline Side-by-side
Showing 4 changed files with 68 additions and 26 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-31 16:04:44 4 * @LastEditTime: 2023-06-20 15:51:11
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px"> 7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px">
8 <!-- 表单部分 --> 8 <!-- 表单部分 -->
9 <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1"> 9 <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
10 <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz" 10 <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bdcqzlx"
11 v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane> 11 v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
12 </el-tabs> 12 </el-tabs>
13 <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div> 13 <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
14 <!-- <img :src="previewImage" class="imgClass"> --> 14 <canvas ref="zs" width="860" v-if="activeName==1" height="720"></canvas>
15 <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas> 15 <canvas ref="zm" width="1460" v-else height="800"></canvas>
16 </div> 16 </div>
17 </template> 17 </template>
18 18
...@@ -30,9 +30,7 @@ ...@@ -30,9 +30,7 @@
30 data () { 30 data () {
31 return { 31 return {
32 imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'), 32 imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
33 canvasWidth: 1018, 33 bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
34 canvasHeight: 720,
35
36 loading: false, 34 loading: false,
37 //印刷序列号集合 35 //印刷序列号集合
38 ysxlh: [], 36 ysxlh: [],
...@@ -79,10 +77,14 @@ ...@@ -79,10 +77,14 @@
79 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => { 77 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
80 if (res.code == 200) { 78 if (res.code == 200) {
81 if (res.result && res.result.length > 0) { 79 if (res.result && res.result.length > 0) {
82 this.activeName = res.result[0].bsmBdcqz 80 this.activeName = res.result[0].bdcqzlx
83 this.bdcqz = res.result[0] 81 this.bdcqz = res.result[0]
84 this.headTabBdcqz = res.result 82 this.headTabBdcqz = res.result
85 this.drawTextOnImage(); 83 if (this.activeName == 1) {
84 this.drawTextOnImage()
85 } else {
86 this.drawTextzmImage()
87 }
86 } 88 }
87 } 89 }
88 this.loading = false 90 this.loading = false
...@@ -91,21 +93,16 @@ ...@@ -91,21 +93,16 @@
91 //tab表头切换方法 93 //tab表头切换方法
92 handleClick (e) { 94 handleClick (e) {
93 this.bdcqz = this.headTabBdcqz[e.index - 0] 95 this.bdcqz = this.headTabBdcqz[e.index - 0]
94 this.activeName = this.headTabBdcqz.bsmBdcqz 96 this.activeName = this.headTabBdcqz.bdcqzlx
95 // this.getBdcqzPreview(); 97 if (this.activeName == 1) {
96 this.drawTextOnImage() 98 this.drawTextOnImage()
99 } else {
100 this.drawTextzmImage()
101 }
97 }, 102 },
98 // getBdcqzPreview () { 103 // 不动产证书
99 // bdcqzPreview(this.bdcqz).then(res => {
100 // this.loading = false
101 // let blob = new Blob([res]);
102 // let url = window.URL.createObjectURL(blob);
103 // this.previewImage = url;
104 // this.drawTextOnImage()
105 // })
106 // },
107 drawTextOnImage () { 104 drawTextOnImage () {
108 const canvas = this.$refs.canvas; 105 const canvas = this.$refs.zs;
109 const context = canvas.getContext('2d'); 106 const context = canvas.getContext('2d');
110 const image = new Image(); 107 const image = new Image();
111 image.onload = () => { 108 image.onload = () => {
...@@ -128,7 +125,52 @@ ...@@ -128,7 +125,52 @@
128 context.fillText(this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk : '', 138, 469); 125 context.fillText(this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk : '', 138, 469);
129 context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100); 126 context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
130 } 127 }
131 image.src = this.imgSrc; 128 image.src = this.imgSrc
129 },
130 // 不动产证明
131 drawTextzmImage () {
132 const canvas = this.$refs.zm;
133 const context = canvas.getContext('2d');
134 const image = new Image();
135 image.onload = () => {
136 context.drawImage(image, 0, 0);
137 context.font = '18px 楷体';
138 context.fillStyle = '#000000';
139 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125);
140 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125);
141 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125);
142 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123);
143 context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180);
144 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
145 // 义务人
146 context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
147 context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
148 // bdcdyh
149 context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 775, 373);
150 // qlqtzk
151 const maxWidth = 280; // 最大宽度限制
152 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
153 lines.forEach((line, index) => {
154 const y = 415 + (index * 37); // 每行文本的垂直位置
155 let currentLine = '';
156 let arr = [];
157 for (let word of line) {
158 const testLine = currentLine + word;
159 const lineWidth = context.measureText(testLine).width;
160 if (lineWidth <= maxWidth) {
161 currentLine = testLine;
162 } else {
163 arr.push(currentLine);
164 currentLine = word;
165 }
166 }
167 arr.push(currentLine);
168 arr.forEach((line, index) => {
169 context.fillText(line, 775, y + (index * 20)); // 调整行高
170 });
171 });
172 };
173 image.src = this.bdczmSrc;
132 } 174 }
133 } 175 }
134 } 176 }
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-18 15:01:31 4 * @LastEditTime: 2023-06-20 11:28:09
5 */ 5 */
6 import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js"; 6 import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js";
7 import { getPrintTemplateByCode } from "@/api/system"; 7 import { getPrintTemplateByCode } from "@/api/system";
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
106 this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { 106 this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", {
107 bsmSlsq: this.bsmSlsq, 107 bsmSlsq: this.bsmSlsq,
108 entryType: '1' 108 entryType: '1'
109 }, '65%', true) 109 }, '1210px', true)
110 break; 110 break;
111 case "B6": 111 case "B6":
112 //根据编号获取对应信息 112 //根据编号获取对应信息
......