Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
9 changed files
with
929 additions
and
11 deletions
| ... | @@ -11,7 +11,7 @@ | ... | @@ -11,7 +11,7 @@ |
| 11 | import { mapGetters } from 'vuex' | 11 | import { mapGetters } from 'vuex' |
| 12 | import { getSzRecordList } from "@/api/bdcqz.js"; | 12 | import { getSzRecordList } from "@/api/bdcqz.js"; |
| 13 | import table from "@/utils/mixin/table"; | 13 | import table from "@/utils/mixin/table"; |
| 14 | import { datas } from "../../javascript/szxxdata"; | 14 | import { szxxdatas } from "../../javascript/szxxdata"; |
| 15 | export default { | 15 | export default { |
| 16 | components: { | 16 | components: { |
| 17 | 17 | ||
| ... | @@ -34,7 +34,7 @@ | ... | @@ -34,7 +34,7 @@ |
| 34 | details: {}, | 34 | details: {}, |
| 35 | tableData: { | 35 | tableData: { |
| 36 | total: 0, | 36 | total: 0, |
| 37 | columns: datas.columns(), | 37 | columns: szxxdatas.columns(), |
| 38 | data: [], | 38 | data: [], |
| 39 | }, | 39 | }, |
| 40 | } | 40 | } | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: miaofang | ||
| 4 | * @LastEditTime: 2023-09-19 14:04:13 | ||
| 5 | --> | ||
| 6 | <template> | ||
| 7 | <div | ||
| 8 | class="from-clues loadingtext" | ||
| 9 | v-Loading="loading" | ||
| 10 | element-loading-text="拼命加载中..." | ||
| 11 | style="height: 720px; text-align: center" | ||
| 12 | > | ||
| 13 | <!-- 表单部分 --> | ||
| 14 | <el-tabs v-model="activeName" @tab-click="handleClick"> | ||
| 15 | <el-tab-pane label="证书预览" name="zsyl"> | ||
| 16 | <el-empty | ||
| 17 | description="暂无数据" | ||
| 18 | v-if="headTabBdcqz.length == 0 && noData" | ||
| 19 | ></el-empty> | ||
| 20 | <div class="zsys"> | ||
| 21 | <canvas | ||
| 22 | ref="zs" | ||
| 23 | width="1000" | ||
| 24 | v-show="this.bdcqz.bdcqzlx == 1" | ||
| 25 | height="700" | ||
| 26 | ></canvas> | ||
| 27 | <canvas | ||
| 28 | ref="zm" | ||
| 29 | width="1180" | ||
| 30 | v-show="this.bdcqz.bdcqzlx == 2" | ||
| 31 | height="780" | ||
| 32 | ></canvas> | ||
| 33 | </div> | ||
| 34 | </el-tab-pane> | ||
| 35 | <el-tab-pane label="证书详情" name="lcjl"> | ||
| 36 | <div class="slxx_title title-block"> | ||
| 37 | 证书详情信息 | ||
| 38 | <div class="triangle"></div> | ||
| 39 | </div> | ||
| 40 | <el-form :rules="rules" ref="ruleForm" label-width="120px"> | ||
| 41 | <el-row> | ||
| 42 | <el-col :span="8"> | ||
| 43 | <el-form-item label="权利人" prop="cyxm"> | ||
| 44 | <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> | ||
| 45 | </el-form-item> | ||
| 46 | </el-col> | ||
| 47 | <el-col :span="8"> | ||
| 48 | <el-form-item label="义务人" prop="jtgxdm"> | ||
| 49 | <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input> | ||
| 50 | </el-form-item> | ||
| 51 | </el-col> | ||
| 52 | <el-col :span="8"> | ||
| 53 | <el-form-item label="坐落" prop="cbfdm"> | ||
| 54 | <el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input> | ||
| 55 | </el-form-item> | ||
| 56 | </el-col> | ||
| 57 | |||
| 58 | </el-row> | ||
| 59 | <el-row> | ||
| 60 | <el-col :span="8"> | ||
| 61 | <el-form-item label="不动产单元号" prop="cyxm"> | ||
| 62 | <el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input> | ||
| 63 | </el-form-item> | ||
| 64 | </el-col> | ||
| 65 | <el-col :span="8"> | ||
| 66 | <el-form-item label="印刷序列号" prop="jtgxdm"> | ||
| 67 | <el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input> | ||
| 68 | </el-form-item> | ||
| 69 | </el-col> | ||
| 70 | <el-col :span="8"> | ||
| 71 | <el-form-item label="不动产权证号" prop="cbfdm"> | ||
| 72 | <el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input> | ||
| 73 | </el-form-item> | ||
| 74 | </el-col> | ||
| 75 | |||
| 76 | </el-row> | ||
| 77 | </el-form> | ||
| 78 | <div class="slxx_title title-block"> | ||
| 79 | 缮证记录信息 | ||
| 80 | <div class="triangle"></div> | ||
| 81 | </div> | ||
| 82 | <div class="from-clues-content"> | ||
| 83 | <lb-table | ||
| 84 | class="sz" | ||
| 85 | :column="szxxtableData.columns" | ||
| 86 | heightNumSetting | ||
| 87 | :pagination="false" | ||
| 88 | :key="key" | ||
| 89 | :data="szxxtableData.data" | ||
| 90 | > | ||
| 91 | </lb-table> | ||
| 92 | </div> | ||
| 93 | <div class="slxx_title title-block"> | ||
| 94 | 发证记录信息 | ||
| 95 | <div class="triangle"></div> | ||
| 96 | </div> | ||
| 97 | <lb-table | ||
| 98 | border | ||
| 99 | :column="tableDatas.columns" | ||
| 100 | :heightNum="100" | ||
| 101 | :data="tableDatas.data" | ||
| 102 | :pagination="false" | ||
| 103 | > | ||
| 104 | </lb-table> | ||
| 105 | </el-tab-pane> | ||
| 106 | <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane> | ||
| 107 | </el-tabs> | ||
| 108 | </div> | ||
| 109 | </template> | ||
| 110 | |||
| 111 | <script> | ||
| 112 | // import { zsyldatas } from "../../javascript/zsyl.js"; | ||
| 113 | import { getSlsqBdcqzList } from "@/api/bdcqz.js"; | ||
| 114 | import { getCertificateList } from "@/api/bdcqz.js"; | ||
| 115 | import { getSzRecordList } from "@/api/bdcqz.js"; | ||
| 116 | import { szxxdatas } from "../../javascript/szxxdatapart"; | ||
| 117 | import { datas } from "../../javascript/fzxxdatapart"; | ||
| 118 | export default { | ||
| 119 | name: "zsyl", | ||
| 120 | props: { | ||
| 121 | formData: { | ||
| 122 | type: Object, | ||
| 123 | 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 | }, | ||
| 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 | }, | ||
| 214 | /** | ||
| 215 | * @description: 获取受理申请下全部不动产权证 | ||
| 216 | * @author: miaofang | ||
| 217 | */ | ||
| 218 | getHeadTabBdcqz() { | ||
| 219 | console.log("formData", this.formData); | ||
| 220 | this.loading = true; | ||
| 221 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => { | ||
| 222 | if (res.code == 200) { | ||
| 223 | this.noData = true; | ||
| 224 | if (res.result && res.result.length > 0) { | ||
| 225 | console.log("res.resultttttttttttttttttttt", res.result); | ||
| 226 | this.bdcqz = res.result[0]; | ||
| 227 | this.headTabBdcqz = res.result; | ||
| 228 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 229 | this.drawTextOnImage(); | ||
| 230 | } else { | ||
| 231 | this.drawTextzmImage(); | ||
| 232 | } | ||
| 233 | } | ||
| 234 | } | ||
| 235 | this.loading = false; | ||
| 236 | }); | ||
| 237 | }, | ||
| 238 | /** | ||
| 239 | * @description: tab表头切换方法 | ||
| 240 | * @param {*} e | ||
| 241 | * @author: miaofang | ||
| 242 | */ | ||
| 243 | handleClick(tab, event) { | ||
| 244 | console.log(tab, event); | ||
| 245 | this.bdcqz = this.headTabBdcqz[0]; | ||
| 246 | if (this.bdcqz.bdcqzlx == 1) { | ||
| 247 | this.drawTextOnImage(); | ||
| 248 | } else { | ||
| 249 | this.drawTextzmImage(); | ||
| 250 | } | ||
| 251 | }, | ||
| 252 | /** | ||
| 253 | * @description: 不动产证书 | ||
| 254 | * @author: miaofang | ||
| 255 | */ | ||
| 256 | drawTextOnImage() { | ||
| 257 | function getByteLen(val) { | ||
| 258 | var len = 0; | ||
| 259 | if (!val) return len; | ||
| 260 | for (var i = 0; i < val.length; i++) { | ||
| 261 | var length = val.charCodeAt(i); | ||
| 262 | if (length >= 0 && length <= 128) { | ||
| 263 | len += 1; | ||
| 264 | } else { | ||
| 265 | len += 2; | ||
| 266 | } | ||
| 267 | } | ||
| 268 | return len; | ||
| 269 | } | ||
| 270 | const canvas = this.$refs.zs; | ||
| 271 | const context = canvas.getContext("2d"); | ||
| 272 | const image = new Image(); | ||
| 273 | image.onload = () => { | ||
| 274 | context.drawImage(image, 0, 0); | ||
| 275 | context.font = "18px 楷体"; | ||
| 276 | context.fillStyle = "#000000"; | ||
| 277 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 60, 56); | ||
| 278 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 113, 56); | ||
| 279 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 180, 56); | ||
| 280 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 370, 56); | ||
| 281 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 129, 97); | ||
| 282 | context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136); | ||
| 283 | |||
| 284 | this.bdcdyh = | ||
| 285 | this.bdcqz.bdcdyh.slice(0, 6) + | ||
| 286 | " " + | ||
| 287 | this.bdcqz.bdcdyh.slice(6, 12) + | ||
| 288 | " " + | ||
| 289 | this.bdcqz.bdcdyh.slice(12, 19) + | ||
| 290 | " " + | ||
| 291 | this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); | ||
| 292 | context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223); | ||
| 293 | |||
| 294 | context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263); | ||
| 295 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303); | ||
| 296 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346); | ||
| 297 | // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386); | ||
| 298 | let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : []; | ||
| 299 | if (getByteLen(this.bdcqz.mj) > 41) { | ||
| 300 | lines6.forEach((line, index) => { | ||
| 301 | const y = 378 + index * 27; // 每行文本的垂直位置 | ||
| 302 | let currentLine = ""; | ||
| 303 | let arr = []; | ||
| 304 | for (let word of line) { | ||
| 305 | const testLine = currentLine + word; | ||
| 306 | const lineWidth = context.measureText(testLine).width; | ||
| 307 | if (lineWidth <= 330) { | ||
| 308 | currentLine = testLine; | ||
| 309 | } else { | ||
| 310 | arr.push(currentLine); | ||
| 311 | currentLine = word; | ||
| 312 | } | ||
| 313 | } | ||
| 314 | arr.push(currentLine); | ||
| 315 | arr.forEach((line, index) => { | ||
| 316 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 317 | }); | ||
| 318 | }); | ||
| 319 | } else { | ||
| 320 | lines6.forEach((line, index) => { | ||
| 321 | const y = 386 + index * 27; // 每行文本的垂直位置 | ||
| 322 | let currentLine = ""; | ||
| 323 | let arr = []; | ||
| 324 | for (let word of line) { | ||
| 325 | const testLine = currentLine + word; | ||
| 326 | const lineWidth = context.measureText(testLine).width; | ||
| 327 | if (lineWidth <= 330) { | ||
| 328 | currentLine = testLine; | ||
| 329 | } else { | ||
| 330 | arr.push(currentLine); | ||
| 331 | currentLine = word; | ||
| 332 | } | ||
| 333 | } | ||
| 334 | arr.push(currentLine); | ||
| 335 | arr.forEach((line, index) => { | ||
| 336 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 337 | }); | ||
| 338 | }); | ||
| 339 | } | ||
| 340 | // 权利其他状态 | ||
| 341 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; | ||
| 342 | for (let i = 0; i < lines.length; i++) { | ||
| 343 | let num = Math.ceil(getByteLen(lines[i]) / 38); | ||
| 344 | if (getByteLen(lines[i]) > 38) { | ||
| 345 | let currentLine = ""; | ||
| 346 | let arr = []; | ||
| 347 | for (let word of lines[i]) { | ||
| 348 | const testLine = currentLine + word; | ||
| 349 | const lineWidth = context.measureText(testLine).width; | ||
| 350 | if (lineWidth <= 323) { | ||
| 351 | currentLine = testLine; | ||
| 352 | } else { | ||
| 353 | arr.push(currentLine); | ||
| 354 | currentLine = word; | ||
| 355 | } | ||
| 356 | } | ||
| 357 | arr.push(currentLine); | ||
| 358 | if (i > 0) { | ||
| 359 | arr.forEach((line, index) => { | ||
| 360 | context.fillText( | ||
| 361 | line, | ||
| 362 | 129, | ||
| 363 | 490 + 26 * (i - 1) + 4 * num + index * 14 | ||
| 364 | ); // 调整行高 | ||
| 365 | }); | ||
| 366 | } else { | ||
| 367 | arr.forEach((line, index) => { | ||
| 368 | context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高 | ||
| 369 | }); | ||
| 370 | } | ||
| 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 | } | ||
| 386 | } | ||
| 387 | |||
| 388 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; | ||
| 389 | lines1.forEach((line, index) => { | ||
| 390 | const y = 100 + index * 30; // 每行文本的垂直位置 | ||
| 391 | let currentLine = ""; | ||
| 392 | let arr = []; | ||
| 393 | for (let word of line) { | ||
| 394 | const testLine = currentLine + word; | ||
| 395 | const lineWidth = context.measureText(testLine).width; | ||
| 396 | if (lineWidth <= 395) { | ||
| 397 | currentLine = testLine; | ||
| 398 | } else { | ||
| 399 | arr.push(currentLine); | ||
| 400 | currentLine = word; | ||
| 401 | } | ||
| 402 | } | ||
| 403 | arr.push(currentLine); | ||
| 404 | arr.forEach((line, index) => { | ||
| 405 | context.fillText(line, 580, y + index * 30); // 调整行高 | ||
| 406 | }); | ||
| 407 | }); | ||
| 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 { | ||
| 420 | arr.push(currentLine); | ||
| 421 | currentLine = word; | ||
| 422 | } | ||
| 423 | } | ||
| 424 | arr.push(currentLine); | ||
| 425 | arr.forEach((line, index) => { | ||
| 426 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 427 | }); | ||
| 428 | }); | ||
| 429 | } else { | ||
| 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 { | ||
| 440 | arr.push(currentLine); | ||
| 441 | currentLine = word; | ||
| 442 | } | ||
| 443 | } | ||
| 444 | arr.push(currentLine); | ||
| 445 | arr.forEach((line, index) => { | ||
| 446 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 447 | }); | ||
| 448 | }); | ||
| 449 | } | ||
| 450 | |||
| 451 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : []; | ||
| 452 | if (getByteLen(this.bdcqz.zl) > 41) { | ||
| 453 | lines2.forEach((line, index) => { | ||
| 454 | const y = 170 + index * 20; // 每行文本的垂直位置 | ||
| 455 | let currentLine = ""; | ||
| 456 | let arr = []; | ||
| 457 | for (let word of line) { | ||
| 458 | const testLine = currentLine + word; | ||
| 459 | const lineWidth = context.measureText(testLine).width; | ||
| 460 | if (lineWidth <= 336) { | ||
| 461 | currentLine = testLine; | ||
| 462 | } else { | ||
| 463 | arr.push(currentLine); | ||
| 464 | currentLine = word; | ||
| 465 | } | ||
| 466 | } | ||
| 467 | arr.push(currentLine); | ||
| 468 | arr.forEach((line, index) => { | ||
| 469 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 470 | }); | ||
| 471 | }); | ||
| 472 | } else { | ||
| 473 | lines2.forEach((line, index) => { | ||
| 474 | const y = 180 + index * 20; // 每行文本的垂直位置 | ||
| 475 | let currentLine = ""; | ||
| 476 | let arr = []; | ||
| 477 | for (let word of line) { | ||
| 478 | const testLine = currentLine + word; | ||
| 479 | const lineWidth = context.measureText(testLine).width; | ||
| 480 | if (lineWidth <= 336) { | ||
| 481 | currentLine = testLine; | ||
| 482 | } else { | ||
| 483 | arr.push(currentLine); | ||
| 484 | currentLine = word; | ||
| 485 | } | ||
| 486 | } | ||
| 487 | arr.push(currentLine); | ||
| 488 | arr.forEach((line, index) => { | ||
| 489 | context.fillText(line, 129, y + index * 20); // 调整行高 | ||
| 490 | }); | ||
| 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 { | ||
| 509 | len += 2; | ||
| 510 | } | ||
| 511 | } | ||
| 512 | return len; | ||
| 513 | } | ||
| 514 | |||
| 515 | const canvas = this.$refs.zm; | ||
| 516 | const context = canvas.getContext("2d"); | ||
| 517 | const image = new Image(); | ||
| 518 | image.onload = () => { | ||
| 519 | context.drawImage(image, 0, 0); | ||
| 520 | context.font = "18px 楷体"; | ||
| 521 | context.fillStyle = "#000000"; | ||
| 522 | // ysxlh | ||
| 523 | context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : "", 280, 712); | ||
| 524 | // djsj | ||
| 525 | if (this.bdcqz.djsj) { | ||
| 526 | let djsjList = this.bdcqz.djsj.split(" ")[0].split("/"); | ||
| 527 | context.fillText(djsjList[0] ? djsjList[0] : "", 327, 580); | ||
| 528 | context.fillText(djsjList[1] ? djsjList[1] : "", 393, 580); | ||
| 529 | context.fillText(djsjList[2] ? djsjList[2] : "", 443, 580); | ||
| 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 | } | ||
| 560 | } | ||
| 561 | arr.push(currentLine); | ||
| 562 | arr.forEach((line, index) => { | ||
| 563 | context.fillText(line, 775, y + index * 20); // 调整行高 | ||
| 564 | }); | ||
| 565 | }); | ||
| 566 | } else { | ||
| 567 | lines2.forEach((line, index) => { | ||
| 568 | const y = 325 + index * 20; // 每行文本的垂直位置 | ||
| 569 | let currentLine = ""; | ||
| 570 | let arr = []; | ||
| 571 | for (let word of line) { | ||
| 572 | const testLine = currentLine + word; | ||
| 573 | const lineWidth = context.measureText(testLine).width; | ||
| 574 | if (lineWidth <= 295) { | ||
| 575 | currentLine = testLine; | ||
| 576 | } else { | ||
| 577 | arr.push(currentLine); | ||
| 578 | currentLine = word; | ||
| 579 | } | ||
| 580 | } | ||
| 581 | arr.push(currentLine); | ||
| 582 | arr.forEach((line, index) => { | ||
| 583 | context.fillText(line, 775, y + index * 20); // 调整行高 | ||
| 584 | }); | ||
| 585 | }); | ||
| 586 | } | ||
| 587 | |||
| 588 | // bdcdyh | ||
| 589 | this.bdcdyh = | ||
| 590 | this.bdcqz.bdcdyh.slice(0, 6) + | ||
| 591 | " " + | ||
| 592 | this.bdcqz.bdcdyh.slice(6, 12) + | ||
| 593 | " " + | ||
| 594 | this.bdcqz.bdcdyh.slice(12, 19) + | ||
| 595 | " " + | ||
| 596 | this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length); | ||
| 597 | context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373); | ||
| 598 | // qlqtzk | ||
| 599 | const maxWidth = 295; // 最大宽度限制 | ||
| 600 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : []; | ||
| 601 | for (let i = 0; i < lines.length; i++) { | ||
| 602 | let num = Math.ceil(getByteLen(lines[i]) / 37); | ||
| 603 | if (getByteLen(lines[i]) > 37) { | ||
| 604 | let currentLine = ""; | ||
| 605 | let arr = []; | ||
| 606 | for (let word of lines[i]) { | ||
| 607 | const testLine = currentLine + word; | ||
| 608 | const lineWidth = context.measureText(testLine).width; | ||
| 609 | if (lineWidth <= maxWidth) { | ||
| 610 | currentLine = testLine; | ||
| 611 | } else { | ||
| 612 | arr.push(currentLine); | ||
| 613 | currentLine = word; | ||
| 614 | } | ||
| 615 | } | ||
| 616 | arr.push(currentLine); | ||
| 617 | if (i > 0) { | ||
| 618 | arr.forEach((line, index) => { | ||
| 619 | context.fillText( | ||
| 620 | line, | ||
| 621 | 770, | ||
| 622 | 428 + 25 * (i - 1) + 5 * num + index * 15 | ||
| 623 | ); // 调整行高 | ||
| 624 | }); | ||
| 625 | } else { | ||
| 626 | arr.forEach((line, index) => { | ||
| 627 | context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高 | ||
| 628 | }); | ||
| 629 | } | ||
| 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 | } | ||
| 645 | } | ||
| 646 | // fj | ||
| 647 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : []; | ||
| 648 | for (let i = 0; i < lines1.length; i++) { | ||
| 649 | let num = Math.ceil(getByteLen(lines1[i]) / 37); | ||
| 650 | if (getByteLen(lines1[i]) > 37) { | ||
| 651 | let currentLine = ""; | ||
| 652 | let arr = []; | ||
| 653 | for (let word of lines1[i]) { | ||
| 654 | const testLine = currentLine + word; | ||
| 655 | const lineWidth = context.measureText(testLine).width; | ||
| 656 | if (lineWidth <= maxWidth) { | ||
| 657 | currentLine = testLine; | ||
| 658 | } else { | ||
| 659 | arr.push(currentLine); | ||
| 660 | currentLine = word; | ||
| 661 | } | ||
| 662 | } | ||
| 663 | arr.push(currentLine); | ||
| 664 | if (i > 0) { | ||
| 665 | arr.forEach((line, index) => { | ||
| 666 | context.fillText( | ||
| 667 | line, | ||
| 668 | 770, | ||
| 669 | 610 + 25 * (i - 1) + 5 * num + index * 15 | ||
| 670 | ); // 调整行高 | ||
| 671 | }); | ||
| 672 | } else { | ||
| 673 | arr.forEach((line, index) => { | ||
| 674 | context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高 | ||
| 675 | }); | ||
| 676 | } | ||
| 677 | } else { | ||
| 678 | if (i > 0) { | ||
| 679 | context.fillText( | ||
| 680 | lines1[i] ? lines1[i] : "", | ||
| 681 | 770, | ||
| 682 | 610 + 5 * num + 23 * (i - 1) | ||
| 683 | ); | ||
| 684 | } else { | ||
| 685 | context.fillText( | ||
| 686 | lines1[i] ? lines1[i] : "", | ||
| 687 | 770, | ||
| 688 | 610 + 23 * (i - 1) | ||
| 689 | ); | ||
| 690 | } | ||
| 691 | } | ||
| 692 | } | ||
| 693 | }; | ||
| 694 | |||
| 695 | image.src = this.bdczmSrc; | ||
| 696 | }, | ||
| 697 | }, | ||
| 698 | computed: { | ||
| 699 | hdiffHeight() { | ||
| 700 | return 0; | ||
| 701 | // return this.headTabBdcqz.length > 1 ? 54 : 0 | ||
| 702 | }, | ||
| 703 | }, | ||
| 704 | }; | ||
| 705 | </script> | ||
| 706 | <style scoped lang="scss"> | ||
| 707 | @import "~@/styles/mixin.scss"; | ||
| 708 | |||
| 709 | .imgClass { | ||
| 710 | display: inline-block; | ||
| 711 | height: auto; | ||
| 712 | max-width: 100%; | ||
| 713 | } | ||
| 714 | |||
| 715 | .middle_padding { | ||
| 716 | padding-bottom: 10px; | ||
| 717 | } | ||
| 718 | |||
| 719 | .zsyl-button { | ||
| 720 | text-align: center; | ||
| 721 | margin-top: 20px; | ||
| 722 | |||
| 723 | .operation_button { | ||
| 724 | width: 100px; | ||
| 725 | border: 1px solid rgb(0, 121, 254); | ||
| 726 | } | ||
| 727 | |||
| 728 | .dy-button { | ||
| 729 | color: white; | ||
| 730 | background-color: rgb(0, 121, 254); | ||
| 731 | } | ||
| 732 | } | ||
| 733 | |||
| 734 | .table-column { | ||
| 735 | border-spacing: 1px; | ||
| 736 | width: 100%; | ||
| 737 | |||
| 738 | tr td { | ||
| 739 | border: 1px solid #ccc; | ||
| 740 | text-align: center; | ||
| 741 | height: 40px; | ||
| 742 | padding: 4px; | ||
| 743 | font-size: 13px; | ||
| 744 | background: rgb(251, 249, 229); | ||
| 745 | } | ||
| 746 | } | ||
| 747 | |||
| 748 | .zsyl-title { | ||
| 749 | background: #fafbe5; | ||
| 750 | text-align: center; | ||
| 751 | padding: 5px 0px; | ||
| 752 | font-size: 20px; | ||
| 753 | } | ||
| 754 | |||
| 755 | .no-data { | ||
| 756 | font-size: 18px; | ||
| 757 | display: flex; | ||
| 758 | text-align: center; | ||
| 759 | justify-content: center; | ||
| 760 | } | ||
| 761 | .el-tab-pane { | ||
| 762 | width: 1190px; | ||
| 763 | height: 670px; | ||
| 764 | overflow-y: auto; | ||
| 765 | } | ||
| 766 | .zsys { | ||
| 767 | width: 1180px; | ||
| 768 | height: 670px; | ||
| 769 | } | ||
| 770 | /deep/.el-table { | ||
| 771 | height: 100px !important; | ||
| 772 | } | ||
| 773 | /deep/.sz { | ||
| 774 | height: 340px !important; | ||
| 775 | } | ||
| 776 | .el-form{ | ||
| 777 | margin-top: 20px; | ||
| 778 | } | ||
| 779 | </style> |
| ... | @@ -102,9 +102,8 @@ export default { | ... | @@ -102,9 +102,8 @@ export default { |
| 102 | handler(val) { | 102 | handler(val) { |
| 103 | this.propsParam = this.$attrs; | 103 | this.propsParam = this.$attrs; |
| 104 | this.dataset() | 104 | this.dataset() |
| 105 | if(this.$parent.dqhj){ | ||
| 106 | this.getShList(); | 105 | this.getShList(); |
| 107 | } | 106 | |
| 108 | }, | 107 | }, |
| 109 | deep: true, | 108 | deep: true, |
| 110 | immediate: true, | 109 | immediate: true, | ... | ... |
| ... | @@ -104,7 +104,6 @@ export default { | ... | @@ -104,7 +104,6 @@ export default { |
| 104 | watch: { | 104 | watch: { |
| 105 | workFresh: { | 105 | workFresh: { |
| 106 | handler(newVal, oldVal) { | 106 | handler(newVal, oldVal) { |
| 107 | console.log(newVal, "newVal"); | ||
| 108 | if (newVal) this.list(); | 107 | if (newVal) this.list(); |
| 109 | }, | 108 | }, |
| 110 | }, | 109 | }, |
| ... | @@ -146,7 +145,7 @@ export default { | ... | @@ -146,7 +145,7 @@ export default { |
| 146 | "证书证明预览", | 145 | "证书证明预览", |
| 147 | "workflow/components/dialog/zsyl", | 146 | "workflow/components/dialog/zsyl", |
| 148 | { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, | 147 | { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, |
| 149 | "76%", | 148 | '1230px', |
| 150 | true | 149 | true |
| 151 | ); | 150 | ); |
| 152 | } else { | 151 | } else { | ... | ... |
| 1 | /* | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-08-29 12:55:07 | ||
| 5 | */ | ||
| 6 | import filter from '@/utils/filter.js' | ||
| 7 | let vm = null | ||
| 8 | |||
| 9 | const sendThis = (_this) => { | ||
| 10 | vm = _this | ||
| 11 | } | ||
| 12 | class data extends filter { | ||
| 13 | constructor() { | ||
| 14 | super() | ||
| 15 | } | ||
| 16 | columns () { | ||
| 17 | return { | ||
| 18 | //发证列表 | ||
| 19 | fzgrid: [ | ||
| 20 | { | ||
| 21 | label: '序号', | ||
| 22 | type: 'index', | ||
| 23 | width: '50' | ||
| 24 | }, | ||
| 25 | { | ||
| 26 | prop: "fzrmc", | ||
| 27 | label: "发证人" | ||
| 28 | }, | ||
| 29 | { | ||
| 30 | prop: "bdcqzlx", | ||
| 31 | label: "不动产权证类型", | ||
| 32 | width: '130', | ||
| 33 | render: (h, scope) => { | ||
| 34 | return ( | ||
| 35 | <div> | ||
| 36 | <span v-show={scope.row.bdcqzlx == '1'}>不动产权证书</span> | ||
| 37 | <span v-show={scope.row.bdcqzlx == '2'}>不动产登记证明</span> | ||
| 38 | </div> | ||
| 39 | ) | ||
| 40 | } | ||
| 41 | }, | ||
| 42 | { | ||
| 43 | label: "权利类型", | ||
| 44 | width: '100', | ||
| 45 | render: (h, scope) => { | ||
| 46 | return ( | ||
| 47 | <el-tooltip effect="dark" content={scope.row.qllx} placement="top" popper-class="tooltip-width "> | ||
| 48 | <span class="ellipsis-table"> {scope.row.qllx}</span> | ||
| 49 | </el-tooltip> | ||
| 50 | ) | ||
| 51 | } | ||
| 52 | }, | ||
| 53 | { | ||
| 54 | label: "面积(㎡)", | ||
| 55 | width: '100', | ||
| 56 | render: (h, scope) => { | ||
| 57 | return ( | ||
| 58 | <el-tooltip effect="dark" content={scope.row.mj} placement="top" popper-class="tooltip-width "> | ||
| 59 | <span class="ellipsis-table"> {scope.row.mj}</span> | ||
| 60 | </el-tooltip> | ||
| 61 | ) | ||
| 62 | } | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "fzsj", | ||
| 66 | label: "发证时间", | ||
| 67 | width: '140', | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "lzrxm", | ||
| 71 | label: "领证人姓名" | ||
| 72 | }, | ||
| 73 | ], | ||
| 74 | } | ||
| 75 | } | ||
| 76 | } | ||
| 77 | let datas = new data() | ||
| 78 | export { | ||
| 79 | datas, | ||
| 80 | sendThis | ||
| 81 | } |
| ... | @@ -16,6 +16,7 @@ class data extends filter { | ... | @@ -16,6 +16,7 @@ class data extends filter { |
| 16 | columns () { | 16 | columns () { |
| 17 | return [ | 17 | return [ |
| 18 | { | 18 | { |
| 19 | width:"50px", | ||
| 19 | label: '序号', | 20 | label: '序号', |
| 20 | type: 'index', | 21 | type: 'index', |
| 21 | render: (h, scope) => { | 22 | render: (h, scope) => { |
| ... | @@ -59,8 +60,8 @@ class data extends filter { | ... | @@ -59,8 +60,8 @@ class data extends filter { |
| 59 | ] | 60 | ] |
| 60 | } | 61 | } |
| 61 | } | 62 | } |
| 62 | let datas = new data() | 63 | let szxxdatas = new data() |
| 63 | export { | 64 | export { |
| 64 | datas, | 65 | szxxdatas, |
| 65 | sendThis | 66 | sendThis |
| 66 | } | 67 | } | ... | ... |
| 1 | /* | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-05-17 10:39:03 | ||
| 5 | */ | ||
| 6 | import filter from '@/utils/filter.js' | ||
| 7 | let vm = null | ||
| 8 | |||
| 9 | const sendThis = (_this) => { | ||
| 10 | vm = _this | ||
| 11 | } | ||
| 12 | class data extends filter { | ||
| 13 | constructor() { | ||
| 14 | super() | ||
| 15 | } | ||
| 16 | columns () { | ||
| 17 | return [ | ||
| 18 | { | ||
| 19 | width:"50px", | ||
| 20 | label: '序号', | ||
| 21 | type: 'index', | ||
| 22 | render: (h, scope) => { | ||
| 23 | return ( | ||
| 24 | <div> | ||
| 25 | {scope.$index + 1} | ||
| 26 | </div> | ||
| 27 | ) | ||
| 28 | } | ||
| 29 | }, | ||
| 30 | { | ||
| 31 | prop: "szry", | ||
| 32 | label: "缮证人员", | ||
| 33 | }, | ||
| 34 | { | ||
| 35 | prop: "szsj", | ||
| 36 | label: "缮证时间", | ||
| 37 | }, | ||
| 38 | { | ||
| 39 | label: "是否作废", | ||
| 40 | render: (h, scope) => { | ||
| 41 | if (scope.row.sfzf == '0') { | ||
| 42 | return <div>否</div> | ||
| 43 | } else { | ||
| 44 | return <div>已作废</div> | ||
| 45 | } | ||
| 46 | } | ||
| 47 | }, | ||
| 48 | { | ||
| 49 | prop: "bz", | ||
| 50 | label: "备注信息", | ||
| 51 | }, | ||
| 52 | ] | ||
| 53 | } | ||
| 54 | } | ||
| 55 | let szxxdatas = new data() | ||
| 56 | export { | ||
| 57 | szxxdatas, | ||
| 58 | sendThis | ||
| 59 | } |
| ... | @@ -126,7 +126,7 @@ export default { | ... | @@ -126,7 +126,7 @@ export default { |
| 126 | this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { | 126 | this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { |
| 127 | bsmSlsq: this.bsmSlsq, | 127 | bsmSlsq: this.bsmSlsq, |
| 128 | entryType: '1' | 128 | entryType: '1' |
| 129 | }, '1210px', true) | 129 | }, '1230px', true) |
| 130 | break; | 130 | break; |
| 131 | case "B6": | 131 | case "B6": |
| 132 | //根据编号获取对应信息 | 132 | //根据编号获取对应信息 | ... | ... |
| ... | @@ -104,10 +104,10 @@ | ... | @@ -104,10 +104,10 @@ |
| 104 | */ | 104 | */ |
| 105 | openDialog (item) { | 105 | openDialog (item) { |
| 106 | bdcqzPreview(item).then(res => { | 106 | bdcqzPreview(item).then(res => { |
| 107 | this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", { | 107 | this.$popupDialog("证书证明预览", "workflow/components/dialog/zsylxq", { |
| 108 | bsmSlsq: item.bsmSlsq, | 108 | bsmSlsq: item.bsmSlsq, |
| 109 | bsmBdcqz: item.bsmBdcqz | 109 | bsmBdcqz: item.bsmBdcqz |
| 110 | }, '1210px', true) | 110 | }, '1230px', true) |
| 111 | }) | 111 | }) |
| 112 | }, | 112 | }, |
| 113 | /** | 113 | /** | ... | ... |
-
Please register or sign in to post a comment