Skip to content

bdc / bdcdj-web

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

style:证书证明预览样式修改

1 parent 6f39450e
Inline Side-by-side
Showing 1 changed file with 635 additions and 643 deletions
...@@ -8,88 +8,81 @@ ...@@ -8,88 +8,81 @@
8 class="from-clues loadingtext" 8 class="from-clues loadingtext"
9 v-Loading="loading" 9 v-Loading="loading"
10 element-loading-text="拼命加载中..." 10 element-loading-text="拼命加载中..."
11 style="height: 720px; text-align: center" 11 style="height: 720px; text-align: center">
12 >
13 <!-- 表单部分 --> 12 <!-- 表单部分 -->
14 <el-tabs v-model="activeName" @tab-click="handleClick"> 13 <el-tabs v-model="activeName" @tab-click="handleClick">
15 <el-tab-pane label="证书预览" name="zsyl"> 14 <el-tab-pane label="证书预览" name="zsyl">
16 <el-empty 15 <el-empty
17 description="暂无数据" 16 description="暂无数据"
18 v-if="headTabBdcqz.length == 0 && noData" 17 v-if="headTabBdcqz.length == 0 && noData"></el-empty>
19 ></el-empty>
20 <div class="zsys"> 18 <div class="zsys">
21 <canvas 19 <canvas
22 ref="zs" 20 ref="zs"
23 width="1000" 21 width="1000"
24 v-show="this.bdcqz.bdcqzlx == 1" 22 v-show="this.bdcqz.bdcqzlx == 1"
25 height="700" 23 height="700"></canvas>
26 ></canvas>
27 <canvas 24 <canvas
28 ref="zm" 25 ref="zm"
29 width="1180" 26 width="1180"
30 v-show="this.bdcqz.bdcqzlx == 2" 27 v-show="this.bdcqz.bdcqzlx == 2"
31 height="780" 28 height="780"></canvas>
32 ></canvas>
33 </div> 29 </div>
34 </el-tab-pane> 30 </el-tab-pane>
35 <el-tab-pane label="证书详情" name="lcjl"> 31 <el-tab-pane label="证书详情" name="lcjl">
36 <div class="slxx_title title-block"> 32 <div class="slxx_title title-block">
37 证书详情信息 33 证书详情信息
38 <div class="triangle"></div> 34 <div class="triangle"></div>
39 </div> 35 </div>
40 <el-form :rules="rules" ref="ruleForm" label-width="120px"> 36 <el-form :rules="rules" ref="ruleForm" label-width="120px">
41 <el-row> 37 <el-row>
42 <el-col :span="8"> 38 <el-col :span="8">
43 <el-form-item label="权利人" prop="cyxm"> 39 <el-form-item label="权利人" prop="cyxm">
44 <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> 40 <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
45 </el-form-item> 41 </el-form-item>
46 </el-col> 42 </el-col>
47 <el-col :span="8"> 43 <el-col :span="8">
48 <el-form-item label="义务人" prop="jtgxdm"> 44 <el-form-item label="义务人" prop="jtgxdm">
49 <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> 45 <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
50 </el-form-item> 46 </el-form-item>
51 </el-col> 47 </el-col>
52 <el-col :span="8"> 48 <el-col :span="8">
53 <el-form-item label="坐落" prop="cbfdm"> 49 <el-form-item label="坐落" prop="cbfdm">
54 <el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input> 50 <el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input>
55 </el-form-item> 51 </el-form-item>
56 </el-col> 52 </el-col>
57 53
58 </el-row> 54 </el-row>
59 <el-row> 55 <el-row>
60 <el-col :span="8"> 56 <el-col :span="8">
61 <el-form-item label="不动产单元号" prop="cyxm"> 57 <el-form-item label="不动产单元号" prop="cyxm">
62 <el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input> 58 <el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input>
63 </el-form-item> 59 </el-form-item>
64 </el-col> 60 </el-col>
65 <el-col :span="8"> 61 <el-col :span="8">
66 <el-form-item label="印刷序列号" prop="jtgxdm"> 62 <el-form-item label="印刷序列号" prop="jtgxdm">
67 <el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input> 63 <el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input>
68 </el-form-item> 64 </el-form-item>
69 </el-col> 65 </el-col>
70 <el-col :span="8"> 66 <el-col :span="8">
71 <el-form-item label="不动产权证号" prop="cbfdm"> 67 <el-form-item label="不动产权证号" prop="cbfdm">
72 <el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input> 68 <el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input>
73 </el-form-item> 69 </el-form-item>
74 </el-col> 70 </el-col>
75 71
76 </el-row> 72 </el-row>
77 </el-form> 73 </el-form>
78 <div class="slxx_title title-block"> 74 <div class="slxx_title title-block">
79 缮证记录信息 75 缮证记录信息
80 <div class="triangle"></div> 76 <div class="triangle"></div>
81 </div> 77 </div>
82 <div class="from-clues-content"> 78 <lb-table
83 <lb-table 79 class="sz"
84 class="sz" 80 :column="szxxtableData.columns"
85 :column="szxxtableData.columns" 81 heightNumSetting
86 heightNumSetting 82 :pagination="false"
87 :pagination="false" 83 :key="key"
88 :key="key" 84 :data="szxxtableData.data">
89 :data="szxxtableData.data" 85 </lb-table>
90 >
91 </lb-table>
92 </div>
93 <div class="slxx_title title-block"> 86 <div class="slxx_title title-block">
94 发证记录信息 87 发证记录信息
95 <div class="triangle"></div> 88 <div class="triangle"></div>
...@@ -99,8 +92,7 @@ ...@@ -99,8 +92,7 @@
99 :column="tableDatas.columns" 92 :column="tableDatas.columns"
100 :heightNum="100" 93 :heightNum="100"
101 :data="tableDatas.data" 94 :data="tableDatas.data"
102 :pagination="false" 95 :pagination="false">
103 >
104 </lb-table> 96 </lb-table>
105 </el-tab-pane> 97 </el-tab-pane>
106 <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane> 98 <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane>
...@@ -109,355 +101,291 @@ ...@@ -109,355 +101,291 @@
109 </template> 101 </template>
110 102
111 <script> 103 <script>
112 // import { zsyldatas } from "../../javascript/zsyl.js"; 104 // import { zsyldatas } from "../../javascript/zsyl.js";
113 import { getSlsqBdcqzList } from "@/api/bdcqz.js"; 105 import { getSlsqBdcqzList } from "@/api/bdcqz.js";
114 import { getCertificateList } from "@/api/bdcqz.js"; 106 import { getCertificateList } from "@/api/bdcqz.js";
115 import { getSzRecordList } from "@/api/bdcqz.js"; 107 import { getSzRecordList } from "@/api/bdcqz.js";
116 import { szxxdatas } from "../../javascript/szxxdatapart"; 108 import { szxxdatas } from "../../javascript/szxxdatapart";
117 import { datas } from "../../javascript/fzxxdatapart"; 109 import { datas } from "../../javascript/fzxxdatapart";
118 export default { 110 export default {
119 name: "zsyl", 111 name: "zsyl",
120 props: { 112 props: {
121 formData: { 113 formData: {
122 type: Object, 114 type: Object,
123 default: {}, 115 default: {},
124 },
125 },
126 data() {
127 return {
128 key: 0,
129 noData: false,
130 imgSrc: require("@/image/bdcqz/bdcqzs2.jpg"),
131 bdczmSrc: require("@/image/bdcqz/bdczm.jpg"),
132 loading: false,
133 //印刷序列号集合
134 ysxlh: [],
135 //列名称对象
136 columns: [],
137 //选择的不动产权证文件
138 bdcqz: "",
139 //证书打开类型 是否需要展示打印按钮
140 isToPrint: false,
141 //tab切换栏数组
142 tabslist: [],
143 headTabBdcqz: [],
144 //tab选择绑定值
145 activeName: "zsyl",
146 //证书图片预览
147 previewImage: "",
148 ruleForm: {
149 bsmBdcqz: "",
150 szmc: "不动产权证书",
151 bsmBdcqz: "",
152 szzh: "",
153 ysxlh: "",
154 },
155 formdata: {},
156 szxxtableData: {
157 total: 0,
158 columns: szxxdatas.columns(),
159 data: [],
160 },
161 tableDatas: {
162 total: 0,
163 columns: datas.columns().fzgrid,
164 data: [],
165 }, 116 },
166 };
167 },
168 mounted() {
169 this.queryClick();
170 this.query();
171 if (this.formData.bdcqz) {
172 //从缮证进入
173 this.bdcqz = this.formData.bdcqz;
174 } else {
175 //从按钮进入
176 this.getHeadTabBdcqz();
177 }
178 },
179 methods: {
180 /**
181 * @description: queryClick
182 * @author: miaofang
183 */
184 queryClick() {
185 this.formdata.bsmSlsq = this.formData.bsmSlsq;
186 getCertificateList(this.formdata).then((res) => {
187 if (res.code === 200) {
188 this.tableDatas.data = res.result ? res.result : [];
189 console.log("this.tableDatas",this.tableDatas);
190 }
191 });
192 },
193 /**
194 * @description: query
195 * @author: miaofang
196 */
197 query() {
198 getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => {
199 if (res.code == 200) {
200 this.szxxtableData.data = res.result;
201 this.key++;
202 }
203 });
204 },
205 /**
206 * @description: 获取证书内容
207 * @param {*} code
208 * @author: miaofang
209 */
210 getRowValue(code) {
211 var value = this.bdcqz[code];
212 return value;
213 }, 117 },
214 /** 118 data () {
215 * @description: 获取受理申请下全部不动产权证 119 return {
216 * @author: miaofang 120 key: 0,
217 */ 121 noData: false,
218 getHeadTabBdcqz() { 122 imgSrc: require("@/image/bdcqz/bdcqzs2.jpg"),
219 console.log("formData", this.formData); 123 bdczmSrc: require("@/image/bdcqz/bdczm.jpg"),
220 this.loading = true; 124 loading: false,
221 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => { 125 //印刷序列号集合
222 if (res.code == 200) { 126 ysxlh: [],
223 this.noData = true; 127 //列名称对象
224 if (res.result && res.result.length > 0) { 128 columns: [],
225 console.log("res.resultttttttttttttttttttt", res.result); 129 //选择的不动产权证文件
226 this.bdcqz = res.result[0]; 130 bdcqz: "",
227 this.headTabBdcqz = res.result; 131 //证书打开类型 是否需要展示打印按钮
228 if (this.bdcqz.bdcqzlx == 1) { 132 isToPrint: false,
229 this.drawTextOnImage(); 133 //tab切换栏数组
230 } else { 134 tabslist: [],
231 this.drawTextzmImage(); 135 headTabBdcqz: [],
232 } 136 //tab选择绑定值
233 } 137 activeName: "zsyl",
234 } 138 //证书图片预览
235 this.loading = false; 139 previewImage: "",
236 }); 140 ruleForm: {
141 bsmBdcqz: "",
142 szmc: "不动产权证书",
143 bsmBdcqz: "",
144 szzh: "",
145 ysxlh: "",
146 },
147 formdata: {},
148 szxxtableData: {
149 total: 0,
150 columns: szxxdatas.columns(),
151 data: [],
152 },
153 tableDatas: {
154 total: 0,
155 columns: datas.columns().fzgrid,
156 data: [],
157 },
158 };
237 }, 159 },
238 /** 160 mounted () {
239 * @description: tab表头切换方法 161 this.queryClick();
240 * @param {*} e 162 this.query();
241 * @author: miaofang 163 if (this.formData.bdcqz) {
242 */ 164 //从缮证进入
243 handleClick(tab, event) { 165 this.bdcqz = this.formData.bdcqz;
244 console.log(tab, event);
245 this.bdcqz = this.headTabBdcqz[0];
246 if (this.bdcqz.bdcqzlx == 1) {
247 this.drawTextOnImage();
248 } else { 166 } else {
249 this.drawTextzmImage(); 167 //从按钮进入
168 this.getHeadTabBdcqz();
250 } 169 }
251 }, 170 },
252 /** 171 methods: {
253 * @description: 不动产证书 172 /**
254 * @author: miaofang 173 * @description: queryClick
255 */ 174 * @author: miaofang
256 drawTextOnImage() { 175 */
257 function getByteLen(val) { 176 queryClick () {
258 var len = 0; 177 this.formdata.bsmSlsq = this.formData.bsmSlsq;
259 if (!val) return len; 178 getCertificateList(this.formdata).then((res) => {
260 for (var i = 0; i < val.length; i++) { 179 if (res.code === 200) {
261 var length = val.charCodeAt(i); 180 this.tableDatas.data = res.result ? res.result : [];
262 if (length >= 0 && length <= 128) { 181 console.log("this.tableDatas", this.tableDatas);
263 len += 1;
264 } else {
265 len += 2;
266 } 182 }
267 } 183 });
268 return len; 184 },
269 } 185 /**
270 const canvas = this.$refs.zs; 186 * @description: query
271 const context = canvas.getContext("2d"); 187 * @author: miaofang
272 const image = new Image(); 188 */
273 image.onload = () => { 189 query () {
274 context.drawImage(image, 0, 0); 190 getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => {
275 context.font = "18px 楷体"; 191 if (res.code == 200) {
276 context.fillStyle = "#000000"; 192 this.szxxtableData.data = res.result;
277 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 60, 56); 193 this.key++;
278 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 113, 56); 194 }
279 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 180, 56); 195 });
280 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 370, 56); 196 },
281 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 129, 97); 197 /**
282 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136); 198 * @description: 获取证书内容
283 199 * @param {*} code
284 this.bdcdyh = 200 * @author: miaofang
285 this.bdcqz.bdcdyh.slice(0, 6) + 201 */
286 " " + 202 getRowValue (code) {
287 this.bdcqz.bdcdyh.slice(6, 12) + 203 var value = this.bdcqz[code];
288 " " + 204 return value;
289 this.bdcqz.bdcdyh.slice(12, 19) + 205 },
290 " " + 206 /**
291 this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); 207 * @description: 获取受理申请下全部不动产权证
292 context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223); 208 * @author: miaofang
293 209 */
294 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263); 210 getHeadTabBdcqz () {
295 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303); 211 console.log("formData", this.formData);
296 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346); 212 this.loading = true;
297 // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); 213 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => {
298 let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : []; 214 if (res.code == 200) {
299 if (getByteLen(this.bdcqz.mj) > 41) { 215 this.noData = true;
300 lines6.forEach((line, index) => { 216 if (res.result && res.result.length > 0) {
301 const y = 378 + index * 27; // 每行文本的垂直位置 217 console.log("res.resultttttttttttttttttttt", res.result);
302 let currentLine = ""; 218 this.bdcqz = res.result[0];
303 let arr = []; 219 this.headTabBdcqz = res.result;
304 for (let word of line) { 220 if (this.bdcqz.bdcqzlx == 1) {
305 const testLine = currentLine + word; 221 this.drawTextOnImage();
306 const lineWidth = context.measureText(testLine).width;
307 if (lineWidth <= 330) {
308 currentLine = testLine;
309 } else { 222 } else {
310 arr.push(currentLine); 223 this.drawTextzmImage();
311 currentLine = word;
312 } 224 }
313 } 225 }
314 arr.push(currentLine); 226 }
315 arr.forEach((line, index) => { 227 this.loading = false;
316 context.fillText(line, 129, y + index * 20); // 调整行高 228 });
317 }); 229 },
318 }); 230 /**
231 * @description: tab表头切换方法
232 * @param {*} e
233 * @author: miaofang
234 */
235 handleClick (tab, event) {
236 console.log(tab, event);
237 this.bdcqz = this.headTabBdcqz[0];
238 if (this.bdcqz.bdcqzlx == 1) {
239 this.drawTextOnImage();
319 } else { 240 } else {
320 lines6.forEach((line, index) => { 241 this.drawTextzmImage();
321 const y = 386 + index * 27; // 每行文本的垂直位置 242 }
322 let currentLine = ""; 243 },
323 let arr = []; 244 /**
324 for (let word of line) { 245 * @description: 不动产证书
325 const testLine = currentLine + word; 246 * @author: miaofang
326 const lineWidth = context.measureText(testLine).width; 247 */
327 if (lineWidth <= 330) { 248 drawTextOnImage () {
328 currentLine = testLine; 249 function getByteLen (val) {
329 } else { 250 var len = 0;
330 arr.push(currentLine); 251 if (!val) return len;
331 currentLine = word; 252 for (var i = 0; i < val.length; i++) {
332 } 253 var length = val.charCodeAt(i);
254 if (length >= 0 && length <= 128) {
255 len += 1;
256 } else {
257 len += 2;
333 } 258 }
334 arr.push(currentLine); 259 }
335 arr.forEach((line, index) => { 260 return len;
336 context.fillText(line, 129, y + index * 20); // 调整行高
337 });
338 });
339 } 261 }
340 // 权利其他状态 262 const canvas = this.$refs.zs;
341 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; 263 const context = canvas.getContext("2d");
342 for (let i = 0; i < lines.length; i++) { 264 const image = new Image();
343 let num = Math.ceil(getByteLen(lines[i]) / 38); 265 image.onload = () => {
344 if (getByteLen(lines[i]) > 38) { 266 context.drawImage(image, 0, 0);
345 let currentLine = ""; 267 context.font = "18px 楷体";
346 let arr = []; 268 context.fillStyle = "#000000";
347 for (let word of lines[i]) { 269 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 60, 56);
348 const testLine = currentLine + word; 270 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 113, 56);
349 const lineWidth = context.measureText(testLine).width; 271 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 180, 56);
350 if (lineWidth <= 323) { 272 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 370, 56);
351 currentLine = testLine; 273 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 129, 97);
352 } else { 274 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136);
353 arr.push(currentLine); 275
354 currentLine = word; 276 this.bdcdyh =
277 this.bdcqz.bdcdyh.slice(0, 6) +
278 " " +
279 this.bdcqz.bdcdyh.slice(6, 12) +
280 " " +
281 this.bdcqz.bdcdyh.slice(12, 19) +
282 " " +
283 this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
284 context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223);
285
286 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263);
287 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303);
288 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346);
289 // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
290 let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : [];
291 if (getByteLen(this.bdcqz.mj) > 41) {
292 lines6.forEach((line, index) => {
293 const y = 378 + index * 27; // 每行文本的垂直位置
294 let currentLine = "";
295 let arr = [];
296 for (let word of line) {
297 const testLine = currentLine + word;
298 const lineWidth = context.measureText(testLine).width;
299 if (lineWidth <= 330) {
300 currentLine = testLine;
301 } else {
302 arr.push(currentLine);
303 currentLine = word;
304 }
355 } 305 }
356 } 306 arr.push(currentLine);
357 arr.push(currentLine);
358 if (i > 0) {
359 arr.forEach((line, index) => { 307 arr.forEach((line, index) => {
360 context.fillText( 308 context.fillText(line, 129, y + index * 20); // 调整行高
361 line,
362 129,
363 490 + 26 * (i - 1) + 4 * num + index * 14
364 ); // 调整行高
365 }); 309 });
366 } else { 310 });
311 } else {
312 lines6.forEach((line, index) => {
313 const y = 386 + index * 27; // 每行文本的垂直位置
314 let currentLine = "";
315 let arr = [];
316 for (let word of line) {
317 const testLine = currentLine + word;
318 const lineWidth = context.measureText(testLine).width;
319 if (lineWidth <= 330) {
320 currentLine = testLine;
321 } else {
322 arr.push(currentLine);
323 currentLine = word;
324 }
325 }
326 arr.push(currentLine);
367 arr.forEach((line, index) => { 327 arr.forEach((line, index) => {
368 context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高 328 context.fillText(line, 129, y + index * 20); // 调整行高
369 }); 329 });
370 } 330 });
371 } else {
372 if (i > 0) {
373 context.fillText(
374 lines[i] ? lines[i] : "",
375 129,
376 500 + 4 * num + 24 * (i - 1)
377 );
378 } else {
379 context.fillText(
380 lines[i] ? lines[i] : "",
381 129,
382 505 + 24 * (i - 1)
383 );
384 }
385 } 331 }
386 } 332 // 权利其他状态
387 333 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
388 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; 334 for (let i = 0; i < lines.length; i++) {
389 lines1.forEach((line, index) => { 335 let num = Math.ceil(getByteLen(lines[i]) / 38);
390 const y = 100 + index * 30; // 每行文本的垂直位置 336 if (getByteLen(lines[i]) > 38) {
391 let currentLine = ""; 337 let currentLine = "";
392 let arr = []; 338 let arr = [];
393 for (let word of line) { 339 for (let word of lines[i]) {
394 const testLine = currentLine + word; 340 const testLine = currentLine + word;
395 const lineWidth = context.measureText(testLine).width; 341 const lineWidth = context.measureText(testLine).width;
396 if (lineWidth <= 395) { 342 if (lineWidth <= 323) {
397 currentLine = testLine; 343 currentLine = testLine;
398 } else { 344 } else {
345 arr.push(currentLine);
346 currentLine = word;
347 }
348 }
399 arr.push(currentLine); 349 arr.push(currentLine);
400 currentLine = word; 350 if (i > 0) {
401 } 351 arr.forEach((line, index) => {
402 } 352 context.fillText(
403 arr.push(currentLine); 353 line,
404 arr.forEach((line, index) => { 354 129,
405 context.fillText(line, 580, y + index * 30); // 调整行高 355 490 + 26 * (i - 1) + 4 * num + index * 14
406 }); 356 ); // 调整行高
407 }); 357 });
408 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(" ") : [];
409 if (getByteLen(this.bdcqz.syqx) > 41) {
410 lines3.forEach((line, index) => {
411 const y = 423 + index * 27; // 每行文本的垂直位置
412 let currentLine = "";
413 let arr = [];
414 for (let word of line) {
415 const testLine = currentLine + word;
416 const lineWidth = context.measureText(testLine).width;
417 if (lineWidth <= 330) {
418 currentLine = testLine;
419 } else { 358 } else {
420 arr.push(currentLine); 359 arr.forEach((line, index) => {
421 currentLine = word; 360 context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高
361 });
422 } 362 }
423 } 363 } else {
424 arr.push(currentLine); 364 if (i > 0) {
425 arr.forEach((line, index) => { 365 context.fillText(
426 context.fillText(line, 129, y + index * 20); // 调整行高 366 lines[i] ? lines[i] : "",
427 }); 367 129,
428 }); 368 500 + 4 * num + 24 * (i - 1)
429 } else { 369 );
430 lines3.forEach((line, index) => {
431 const y = 430 + index * 27; // 每行文本的垂直位置
432 let currentLine = "";
433 let arr = [];
434 for (let word of line) {
435 const testLine = currentLine + word;
436 const lineWidth = context.measureText(testLine).width;
437 if (lineWidth <= 315) {
438 currentLine = testLine;
439 } else { 370 } else {
440 arr.push(currentLine); 371 context.fillText(
441 currentLine = word; 372 lines[i] ? lines[i] : "",
373 129,
374 505 + 24 * (i - 1)
375 );
442 } 376 }
443 } 377 }
444 arr.push(currentLine); 378 }
445 arr.forEach((line, index) => {
446 context.fillText(line, 129, y + index * 20); // 调整行高
447 });
448 });
449 }
450 379
451 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : []; 380 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
452 if (getByteLen(this.bdcqz.zl) > 41) { 381 lines1.forEach((line, index) => {
453 lines2.forEach((line, index) => { 382 const y = 100 + index * 30; // 每行文本的垂直位置
454 const y = 170 + index * 20; // 每行文本的垂直位置
455 let currentLine = ""; 383 let currentLine = "";
456 let arr = []; 384 let arr = [];
457 for (let word of line) { 385 for (let word of line) {
458 const testLine = currentLine + word; 386 const testLine = currentLine + word;
459 const lineWidth = context.measureText(testLine).width; 387 const lineWidth = context.measureText(testLine).width;
460 if (lineWidth <= 336) { 388 if (lineWidth <= 395) {
461 currentLine = testLine; 389 currentLine = testLine;
462 } else { 390 } else {
463 arr.push(currentLine); 391 arr.push(currentLine);
...@@ -466,314 +394,378 @@ export default { ...@@ -466,314 +394,378 @@ export default {
466 } 394 }
467 arr.push(currentLine); 395 arr.push(currentLine);
468 arr.forEach((line, index) => { 396 arr.forEach((line, index) => {
469 context.fillText(line, 129, y + index * 20); // 调整行高 397 context.fillText(line, 580, y + index * 30); // 调整行高
470 }); 398 });
471 }); 399 });
472 } else { 400 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(" ") : [];
473 lines2.forEach((line, index) => { 401 if (getByteLen(this.bdcqz.syqx) > 41) {
474 const y = 180 + index * 20; // 每行文本的垂直位置 402 lines3.forEach((line, index) => {
475 let currentLine = ""; 403 const y = 423 + index * 27; // 每行文本的垂直位置
476 let arr = []; 404 let currentLine = "";
477 for (let word of line) { 405 let arr = [];
478 const testLine = currentLine + word; 406 for (let word of line) {
479 const lineWidth = context.measureText(testLine).width; 407 const testLine = currentLine + word;
480 if (lineWidth <= 336) { 408 const lineWidth = context.measureText(testLine).width;
481 currentLine = testLine; 409 if (lineWidth <= 330) {
482 } else { 410 currentLine = testLine;
483 arr.push(currentLine); 411 } else {
484 currentLine = word; 412 arr.push(currentLine);
413 currentLine = word;
414 }
485 } 415 }
486 } 416 arr.push(currentLine);
487 arr.push(currentLine); 417 arr.forEach((line, index) => {
488 arr.forEach((line, index) => { 418 context.fillText(line, 129, y + index * 20); // 调整行高
489 context.fillText(line, 129, y + index * 20); // 调整行高 419 });
490 }); 420 });
491 });
492 }
493 };
494 image.src = this.imgSrc;
495 },
496 /**
497 * @description: 不动产证明
498 * @author: miaofang
499 */
500 drawTextzmImage() {
501 function getByteLen(val) {
502 var len = 0;
503 if (!val) return len;
504 for (var i = 0; i < val.length; i++) {
505 var length = val.charCodeAt(i);
506 if (length >= 0 && length <= 128) {
507 len += 1;
508 } else { 421 } else {
509 len += 2; 422 lines3.forEach((line, index) => {
423 const y = 430 + index * 27; // 每行文本的垂直位置
424 let currentLine = "";
425 let arr = [];
426 for (let word of line) {
427 const testLine = currentLine + word;
428 const lineWidth = context.measureText(testLine).width;
429 if (lineWidth <= 315) {
430 currentLine = testLine;
431 } else {
432 arr.push(currentLine);
433 currentLine = word;
434 }
435 }
436 arr.push(currentLine);
437 arr.forEach((line, index) => {
438 context.fillText(line, 129, y + index * 20); // 调整行高
439 });
440 });
510 } 441 }
511 }
512 return len;
513 }
514 442
515 const canvas = this.$refs.zm; 443 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
516 const context = canvas.getContext("2d"); 444 if (getByteLen(this.bdcqz.zl) > 41) {
517 const image = new Image(); 445 lines2.forEach((line, index) => {
518 image.onload = () => { 446 const y = 170 + index * 20; // 每行文本的垂直位置
519 context.drawImage(image, 0, 0); 447 let currentLine = "";
520 context.font = "18px 楷体"; 448 let arr = [];
521 context.fillStyle = "#000000"; 449 for (let word of line) {
522 // ysxlh 450 const testLine = currentLine + word;
523 context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : "", 280, 712); 451 const lineWidth = context.measureText(testLine).width;
524 // djsj 452 if (lineWidth <= 336) {
525 if (this.bdcqz.djsj) { 453 currentLine = testLine;
526 let djsjList = this.bdcqz.djsj.split(" ")[0].split("/"); 454 } else {
527 context.fillText(djsjList[0] ? djsjList[0] : "", 327, 580); 455 arr.push(currentLine);
528 context.fillText(djsjList[1] ? djsjList[1] : "", 393, 580); 456 currentLine = word;
529 context.fillText(djsjList[2] ? djsjList[2] : "", 443, 580); 457 }
530 }
531 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 620, 125);
532 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 665, 125);
533 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 750, 125);
534 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 960, 123);
535 context.fillText(
536 this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : "",
537 775,
538 180
539 );
540 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 775, 228);
541 // 义务人
542 context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : "", 775, 275);
543 // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
544
545 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
546 if (getByteLen(this.bdcqz.zl) > 41) {
547 lines2.forEach((line, index) => {
548 const y = 315 + index * 20; // 每行文本的垂直位置
549 let currentLine = "";
550 let arr = [];
551 for (let word of line) {
552 const testLine = currentLine + word;
553 const lineWidth = context.measureText(testLine).width;
554 if (lineWidth <= 295) {
555 currentLine = testLine;
556 } else {
557 arr.push(currentLine);
558 currentLine = word;
559 } 458 }
560 } 459 arr.push(currentLine);
561 arr.push(currentLine); 460 arr.forEach((line, index) => {
562 arr.forEach((line, index) => { 461 context.fillText(line, 129, y + index * 20); // 调整行高
563 context.fillText(line, 775, y + index * 20); // 调整行高 462 });
564 }); 463 });
565 }); 464 } else {
566 } else { 465 lines2.forEach((line, index) => {
567 lines2.forEach((line, index) => { 466 const y = 180 + index * 20; // 每行文本的垂直位置
568 const y = 325 + index * 20; // 每行文本的垂直位置 467 let currentLine = "";
569 let currentLine = ""; 468 let arr = [];
570 let arr = []; 469 for (let word of line) {
571 for (let word of line) { 470 const testLine = currentLine + word;
572 const testLine = currentLine + word; 471 const lineWidth = context.measureText(testLine).width;
573 const lineWidth = context.measureText(testLine).width; 472 if (lineWidth <= 336) {
574 if (lineWidth <= 295) { 473 currentLine = testLine;
575 currentLine = testLine; 474 } else {
576 } else { 475 arr.push(currentLine);
577 arr.push(currentLine); 476 currentLine = word;
578 currentLine = word; 477 }
579 } 478 }
580 } 479 arr.push(currentLine);
581 arr.push(currentLine); 480 arr.forEach((line, index) => {
582 arr.forEach((line, index) => { 481 context.fillText(line, 129, y + index * 20); // 调整行高
583 context.fillText(line, 775, y + index * 20); // 调整行高 482 });
584 }); 483 });
585 }); 484 }
485 };
486 image.src = this.imgSrc;
487 },
488 /**
489 * @description: 不动产证明
490 * @author: miaofang
491 */
492 drawTextzmImage () {
493 function getByteLen (val) {
494 var len = 0;
495 if (!val) return len;
496 for (var i = 0; i < val.length; i++) {
497 var length = val.charCodeAt(i);
498 if (length >= 0 && length <= 128) {
499 len += 1;
500 } else {
501 len += 2;
502 }
503 }
504 return len;
586 } 505 }
587 506
588 // bdcdyh 507 const canvas = this.$refs.zm;
589 this.bdcdyh = 508 const context = canvas.getContext("2d");
590 this.bdcqz.bdcdyh.slice(0, 6) + 509 const image = new Image();
591 " " + 510 image.onload = () => {
592 this.bdcqz.bdcdyh.slice(6, 12) + 511 context.drawImage(image, 0, 0);
593 " " + 512 context.font = "18px 楷体";
594 this.bdcqz.bdcdyh.slice(12, 19) + 513 context.fillStyle = "#000000";
595 " " + 514 // ysxlh
596 this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); 515 context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : "", 280, 712);
597 context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373); 516 // djsj
598 // qlqtzk 517 if (this.bdcqz.djsj) {
599 const maxWidth = 295; // 最大宽度限制 518 let djsjList = this.bdcqz.djsj.split(" ")[0].split("/");
600 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; 519 context.fillText(djsjList[0] ? djsjList[0] : "", 327, 580);
601 for (let i = 0; i < lines.length; i++) { 520 context.fillText(djsjList[1] ? djsjList[1] : "", 393, 580);
602 let num = Math.ceil(getByteLen(lines[i]) / 37); 521 context.fillText(djsjList[2] ? djsjList[2] : "", 443, 580);
603 if (getByteLen(lines[i]) > 37) { 522 }
604 let currentLine = ""; 523 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 620, 125);
605 let arr = []; 524 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 665, 125);
606 for (let word of lines[i]) { 525 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 750, 125);
607 const testLine = currentLine + word; 526 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 960, 123);
608 const lineWidth = context.measureText(testLine).width; 527 context.fillText(
609 if (lineWidth <= maxWidth) { 528 this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : "",
610 currentLine = testLine; 529 775,
611 } else { 530 180
612 arr.push(currentLine); 531 );
613 currentLine = word; 532 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 775, 228);
533 // 义务人
534 context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : "", 775, 275);
535 // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
536
537 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
538 if (getByteLen(this.bdcqz.zl) > 41) {
539 lines2.forEach((line, index) => {
540 const y = 315 + index * 20; // 每行文本的垂直位置
541 let currentLine = "";
542 let arr = [];
543 for (let word of line) {
544 const testLine = currentLine + word;
545 const lineWidth = context.measureText(testLine).width;
546 if (lineWidth <= 295) {
547 currentLine = testLine;
548 } else {
549 arr.push(currentLine);
550 currentLine = word;
551 }
614 } 552 }
615 } 553 arr.push(currentLine);
616 arr.push(currentLine);
617 if (i > 0) {
618 arr.forEach((line, index) => { 554 arr.forEach((line, index) => {
619 context.fillText( 555 context.fillText(line, 775, y + index * 20); // 调整行高
620 line,
621 770,
622 428 + 25 * (i - 1) + 5 * num + index * 15
623 ); // 调整行高
624 }); 556 });
625 } else { 557 });
558 } else {
559 lines2.forEach((line, index) => {
560 const y = 325 + index * 20; // 每行文本的垂直位置
561 let currentLine = "";
562 let arr = [];
563 for (let word of line) {
564 const testLine = currentLine + word;
565 const lineWidth = context.measureText(testLine).width;
566 if (lineWidth <= 295) {
567 currentLine = testLine;
568 } else {
569 arr.push(currentLine);
570 currentLine = word;
571 }
572 }
573 arr.push(currentLine);
626 arr.forEach((line, index) => { 574 arr.forEach((line, index) => {
627 context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高 575 context.fillText(line, 775, y + index * 20); // 调整行高
628 }); 576 });
629 } 577 });
630 } else {
631 if (i > 0) {
632 context.fillText(
633 lines[i] ? lines[i] : "",
634 770,
635 440 + 5 * num + 24 * (i - 1)
636 );
637 } else {
638 context.fillText(
639 lines[i] ? lines[i] : "",
640 770,
641 440 + 24 * (i - 1)
642 );
643 }
644 } 578 }
645 } 579
646 // fj 580 // bdcdyh
647 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; 581 this.bdcdyh =
648 for (let i = 0; i < lines1.length; i++) { 582 this.bdcqz.bdcdyh.slice(0, 6) +
649 let num = Math.ceil(getByteLen(lines1[i]) / 37); 583 " " +
650 if (getByteLen(lines1[i]) > 37) { 584 this.bdcqz.bdcdyh.slice(6, 12) +
651 let currentLine = ""; 585 " " +
652 let arr = []; 586 this.bdcqz.bdcdyh.slice(12, 19) +
653 for (let word of lines1[i]) { 587 " " +
654 const testLine = currentLine + word; 588 this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
655 const lineWidth = context.measureText(testLine).width; 589 context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373);
656 if (lineWidth <= maxWidth) { 590 // qlqtzk
657 currentLine = testLine; 591 const maxWidth = 295; // 最大宽度限制
592 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
593 for (let i = 0; i < lines.length; i++) {
594 let num = Math.ceil(getByteLen(lines[i]) / 37);
595 if (getByteLen(lines[i]) > 37) {
596 let currentLine = "";
597 let arr = [];
598 for (let word of lines[i]) {
599 const testLine = currentLine + word;
600 const lineWidth = context.measureText(testLine).width;
601 if (lineWidth <= maxWidth) {
602 currentLine = testLine;
603 } else {
604 arr.push(currentLine);
605 currentLine = word;
606 }
607 }
608 arr.push(currentLine);
609 if (i > 0) {
610 arr.forEach((line, index) => {
611 context.fillText(
612 line,
613 770,
614 428 + 25 * (i - 1) + 5 * num + index * 15
615 ); // 调整行高
616 });
658 } else { 617 } else {
659 arr.push(currentLine); 618 arr.forEach((line, index) => {
660 currentLine = word; 619 context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高
620 });
661 } 621 }
662 } 622 } else {
663 arr.push(currentLine); 623 if (i > 0) {
664 if (i > 0) {
665 arr.forEach((line, index) => {
666 context.fillText( 624 context.fillText(
667 line, 625 lines[i] ? lines[i] : "",
668 770, 626 770,
669 610 + 25 * (i - 1) + 5 * num + index * 15 627 440 + 5 * num + 24 * (i - 1)
670 ); // 调整行高 628 );
671 }); 629 } else {
672 } else { 630 context.fillText(
673 arr.forEach((line, index) => { 631 lines[i] ? lines[i] : "",
674 context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高 632 770,
675 }); 633 440 + 24 * (i - 1)
634 );
635 }
676 } 636 }
677 } else { 637 }
678 if (i > 0) { 638 // fj
679 context.fillText( 639 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
680 lines1[i] ? lines1[i] : "", 640 for (let i = 0; i < lines1.length; i++) {
681 770, 641 let num = Math.ceil(getByteLen(lines1[i]) / 37);
682 610 + 5 * num + 23 * (i - 1) 642 if (getByteLen(lines1[i]) > 37) {
683 ); 643 let currentLine = "";
644 let arr = [];
645 for (let word of lines1[i]) {
646 const testLine = currentLine + word;
647 const lineWidth = context.measureText(testLine).width;
648 if (lineWidth <= maxWidth) {
649 currentLine = testLine;
650 } else {
651 arr.push(currentLine);
652 currentLine = word;
653 }
654 }
655 arr.push(currentLine);
656 if (i > 0) {
657 arr.forEach((line, index) => {
658 context.fillText(
659 line,
660 770,
661 610 + 25 * (i - 1) + 5 * num + index * 15
662 ); // 调整行高
663 });
664 } else {
665 arr.forEach((line, index) => {
666 context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高
667 });
668 }
684 } else { 669 } else {
685 context.fillText( 670 if (i > 0) {
686 lines1[i] ? lines1[i] : "", 671 context.fillText(
687 770, 672 lines1[i] ? lines1[i] : "",
688 610 + 23 * (i - 1) 673 770,
689 ); 674 610 + 5 * num + 23 * (i - 1)
675 );
676 } else {
677 context.fillText(
678 lines1[i] ? lines1[i] : "",
679 770,
680 610 + 23 * (i - 1)
681 );
682 }
690 } 683 }
691 } 684 }
692 } 685 };
693 };
694 686
695 image.src = this.bdczmSrc; 687 image.src = this.bdczmSrc;
688 },
696 }, 689 },
697 }, 690 computed: {
698 computed: { 691 hdiffHeight () {
699 hdiffHeight() { 692 return 0;
700 return 0; 693 // return this.headTabBdcqz.length > 1 ? 54 : 0
701 // return this.headTabBdcqz.length > 1 ? 54 : 0 694 },
702 }, 695 },
703 }, 696 };
704 };
705 </script> 697 </script>
706 <style scoped lang="scss"> 698 <style scoped lang="scss">
707 @import "~@/styles/mixin.scss"; 699 @import "~@/styles/mixin.scss";
708 700
709 .imgClass { 701 .imgClass {
710 display: inline-block; 702 display: inline-block;
711 height: auto; 703 height: auto;
712 max-width: 100%; 704 max-width: 100%;
713 } 705 }
714 706
715 .middle_padding { 707 .middle_padding {
716 padding-bottom: 10px; 708 padding-bottom: 10px;
717 } 709 }
718 710
719 .zsyl-button { 711 .zsyl-button {
720 text-align: center; 712 text-align: center;
721 margin-top: 20px; 713 margin-top: 20px;
722 714
723 .operation_button { 715 .operation_button {
724 width: 100px; 716 width: 100px;
725 border: 1px solid rgb(0, 121, 254); 717 border: 1px solid rgb(0, 121, 254);
726 } 718 }
727 719
728 .dy-button { 720 .dy-button {
729 color: white; 721 color: white;
730 background-color: rgb(0, 121, 254); 722 background-color: rgb(0, 121, 254);
723 }
731 } 724 }
732 }
733 725
734 .table-column { 726 .table-column {
735 border-spacing: 1px; 727 border-spacing: 1px;
736 width: 100%; 728 width: 100%;
737 729
738 tr td { 730 tr td {
739 border: 1px solid #ccc; 731 border: 1px solid #ccc;
740 text-align: center; 732 text-align: center;
741 height: 40px; 733 height: 40px;
742 padding: 4px; 734 padding: 4px;
743 font-size: 13px; 735 font-size: 13px;
744 background: rgb(251, 249, 229); 736 background: rgb(251, 249, 229);
737 }
745 } 738 }
746 }
747 739
748 .zsyl-title { 740 .zsyl-title {
749 background: #fafbe5; 741 background: #fafbe5;
750 text-align: center; 742 text-align: center;
751 padding: 5px 0px; 743 padding: 5px 0px;
752 font-size: 20px; 744 font-size: 20px;
753 } 745 }
754 746
755 .no-data { 747 .no-data {
756 font-size: 18px; 748 font-size: 18px;
757 display: flex; 749 display: flex;
758 text-align: center; 750 text-align: center;
759 justify-content: center; 751 justify-content: center;
760 } 752 }
761 .el-tab-pane { 753 .el-tab-pane {
762 width: 1190px; 754 width: 1190px;
763 height: 670px; 755 height: 670px;
764 overflow-y: auto; 756 overflow-y: auto;
765 } 757 }
766 .zsys { 758 .zsys {
767 width: 1180px; 759 width: 1180px;
768 height: 670px; 760 height: 670px;
769 } 761 }
770 /deep/.el-table { 762 /deep/.el-table {
771 height: 100px !important; 763 height: 100px !important;
772 } 764 }
773 /deep/.sz { 765 // /deep/.sz {
774 height: 340px !important; 766 // height: 340px !important;
775 } 767 // }
776 .el-form{ 768 .el-form {
777 margin-top: 20px; 769 margin-top: 20px;
778 } 770 }
779 </style> 771 </style>
......