<!--
* @Description:
* @Autor: miaofang
* @LastEditTime: 2023-10-23 16:16:24
-->
<template>
<div
class="from-clues loadingtext"
v-Loading="loading"
element-loading-text="拼命加载中..."
style="height: 720px; text-align: center">
<!-- 表单部分 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="证书预览" name="zsyl">
<el-empty
description="暂无数据"
v-if="headTabBdcqz.length == 0 && noData"></el-empty>
<div class="zsys">
<canvas
ref="zs"
width="1000"
v-show="this.bdcqz.bdcqzlx == 1"
height="700"></canvas>
<canvas
ref="zm"
width="1180"
v-show="this.bdcqz.bdcqzlx == 2"
height="780"></canvas>
</div>
</el-tab-pane>
<el-tab-pane label="证书详情" name="lcjl">
<div class="slxx_title title-block">
证书详情信息
<div class="triangle"></div>
</div>
<el-form :rules="rules" ref="ruleForm" label-width="120px">
<el-row>
<el-col :span="8">
<el-form-item label="权利人" prop="cyxm">
<el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="义务人" prop="jtgxdm">
<el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="坐落" prop="cbfdm">
<el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="不动产单元号" prop="cyxm">
<el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="印刷序列号" prop="jtgxdm">
<el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="不动产权证号" prop="cbfdm">
<el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="slxx_title title-block">
缮证记录信息
<div class="triangle"></div>
</div>
<lb-table
class="sz"
:column="szxxtableData.columns"
heightNumSetting
:pagination="false"
:key="key"
:data="szxxtableData.data">
</lb-table>
<div class="slxx_title title-block">
发证记录信息
<div class="triangle"></div>
</div>
<lb-table
border
:column="tableDatas.columns"
:heightNum="100"
:data="tableDatas.data"
:pagination="false">
</lb-table>
</el-tab-pane>
<el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane>
</el-tabs>
</div>
</template>
<script>
// import { zsyldatas } from "../../javascript/zsyl.js";
import { getSlsqBdcqzList } from "@/api/bdcqz.js";
import { getCertificateList } from "@/api/bdcqz.js";
import { getSzRecordList } from "@/api/bdcqz.js";
import { szxxdatas } from "../../javascript/szxxdatapart";
import { datas } from "../../javascript/fzxxdatapart";
export default {
name: "zsyl",
props: {
formData: {
type: Object,
default: {},
},
},
data () {
return {
key: 0,
noData: false,
imgSrc: require("@/image/bdcqz/bdcqzs2.jpg"),
bdczmSrc: require("@/image/bdcqz/bdczm.jpg"),
loading: false,
//印刷序列号集合
ysxlh: [],
//列名称对象
columns: [],
//选择的不动产权证文件
bdcqz: "",
//证书打开类型 是否需要展示打印按钮
isToPrint: false,
//tab切换栏数组
tabslist: [],
headTabBdcqz: [],
//tab选择绑定值
activeName: "zsyl",
//证书图片预览
previewImage: "",
ruleForm: {
bsmBdcqz: "",
szmc: "不动产权证书",
bsmBdcqz: "",
szzh: "",
ysxlh: "",
},
formdata: {},
szxxtableData: {
total: 0,
columns: szxxdatas.columns(),
data: [],
},
tableDatas: {
total: 0,
columns: datas.columns().fzgrid,
data: [],
},
};
},
mounted () {
this.queryClick();
this.query();
if (this.formData.bdcqz) {
//从缮证进入
this.bdcqz = this.formData.bdcqz;
} else {
//从按钮进入
this.getHeadTabBdcqz();
}
},
methods: {
/**
* @description: queryClick
* @author: miaofang
*/
queryClick () {
this.formdata.bsmSlsq = this.formData.bsmSlsq;
getCertificateList(this.formdata).then((res) => {
if (res.code === 200) {
this.tableDatas.data = res.result ? res.result : [];
}
})
},
/**
* @description: query
* @author: miaofang
*/
query () {
getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => {
if (res.code == 200) {
this.szxxtableData.data = res.result;
this.key++;
}
})
},
/**
* @description: 获取证书内容
* @param {*} code
* @author: miaofang
*/
getRowValue (code) {
var value = this.bdcqz[code];
return value;
},
/**
* @description: 获取受理申请下全部不动产权证
* @author: miaofang
*/
getHeadTabBdcqz () {
this.loading = true;
getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => {
if (res.code == 200) {
this.noData = true;
if (res.result && res.result.length > 0) {
this.bdcqz = res.result[0];
this.headTabBdcqz = res.result;
if (this.bdcqz.bdcqzlx == 1) {
this.drawTextOnImage();
} else {
this.drawTextzmImage();
}
}
}
this.loading = false;
});
},
/**
* @description: tab表头切换方法
* @param {*} e
* @author: miaofang
*/
handleClick (tab, event) {
console.log(tab, event);
this.bdcqz = this.headTabBdcqz[0];
if (this.bdcqz.bdcqzlx == 1) {
this.drawTextOnImage();
} else {
this.drawTextzmImage();
}
},
/**
* @description: 不动产证书
* @author: miaofang
*/
drawTextOnImage () {
function getByteLen (val) {
var len = 0;
if (!val) return len;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zs;
const context = canvas.getContext("2d");
const image = new Image();
image.onload = () => {
context.drawImage(image, 0, 0);
context.font = "18px 楷体";
context.fillStyle = "#000000";
context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 60, 56);
context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 113, 56);
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 180, 56);
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 370, 56);
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 129, 97);
context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136);
this.bdcdyh =
this.bdcqz.bdcdyh.slice(0, 6) +
" " +
this.bdcqz.bdcdyh.slice(6, 12) +
" " +
this.bdcqz.bdcdyh.slice(12, 19) +
" " +
this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223);
context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263);
context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303);
context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346);
// context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : [];
if (getByteLen(this.bdcqz.mj) > 41) {
lines6.forEach((line, index) => {
const y = 378 + index * 27; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
} else {
lines6.forEach((line, index) => {
const y = 386 + index * 27; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
}
// 权利其他状态
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
for (let i = 0; i < lines.length; i++) {
let num = Math.ceil(getByteLen(lines[i]) / 38);
if (getByteLen(lines[i]) > 38) {
let currentLine = "";
let arr = [];
for (let word of lines[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 323) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(
line,
129,
490 + 26 * (i - 1) + 4 * num + index * 14
); // 调整行高
});
} else {
arr.forEach((line, index) => {
context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高
});
}
} else {
if (i > 0) {
context.fillText(
lines[i] ? lines[i] : "",
129,
500 + 4 * num + 24 * (i - 1)
);
} else {
context.fillText(
lines[i] ? lines[i] : "",
129,
505 + 24 * (i - 1)
);
}
}
}
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
lines1.forEach((line, index) => {
const y = 100 + index * 30; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 395) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 580, y + index * 30); // 调整行高
});
});
let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(" ") : [];
if (getByteLen(this.bdcqz.syqx) > 41) {
lines3.forEach((line, index) => {
const y = 423 + index * 27; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
} else {
lines3.forEach((line, index) => {
const y = 430 + index * 27; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 315) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
}
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
if (getByteLen(this.bdcqz.zl) > 41) {
lines2.forEach((line, index) => {
const y = 170 + index * 20; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
} else {
lines2.forEach((line, index) => {
const y = 180 + index * 20; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + index * 20); // 调整行高
});
});
}
};
image.src = this.imgSrc;
},
/**
* @description: 不动产证明
* @author: miaofang
*/
drawTextzmImage () {
function getByteLen (val) {
var len = 0;
if (!val) return len;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zm;
const context = canvas.getContext("2d");
const image = new Image();
image.onload = () => {
context.drawImage(image, 0, 0);
context.font = "18px 楷体";
context.fillStyle = "#000000";
// ysxlh
context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : "", 280, 712);
// djsj
if (this.bdcqz.djsj) {
let djsjList = this.bdcqz.djsj.split(" ")[0].split("/");
context.fillText(djsjList[0] ? djsjList[0] : "", 327, 580);
context.fillText(djsjList[1] ? djsjList[1] : "", 393, 580);
context.fillText(djsjList[2] ? djsjList[2] : "", 443, 580);
}
context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : "", 620, 125);
context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : "", 665, 125);
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : "", 750, 125);
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : "", 960, 123);
context.fillText(
this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : "",
775,
180
);
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : "", 775, 228);
// 义务人
context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : "", 775, 275);
// context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
if (getByteLen(this.bdcqz.zl) > 41) {
lines2.forEach((line, index) => {
const y = 315 + index * 20; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 775, y + index * 20); // 调整行高
});
});
} else {
lines2.forEach((line, index) => {
const y = 325 + index * 20; // 每行文本的垂直位置
let currentLine = "";
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 775, y + index * 20); // 调整行高
});
});
}
// bdcdyh
this.bdcdyh =
this.bdcqz.bdcdyh.slice(0, 6) +
" " +
this.bdcqz.bdcdyh.slice(6, 12) +
" " +
this.bdcqz.bdcdyh.slice(12, 19) +
" " +
this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373);
// qlqtzk
const maxWidth = 295; // 最大宽度限制
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
for (let i = 0; i < lines.length; i++) {
let num = Math.ceil(getByteLen(lines[i]) / 37);
if (getByteLen(lines[i]) > 37) {
let currentLine = "";
let arr = [];
for (let word of lines[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(
line,
770,
428 + 25 * (i - 1) + 5 * num + index * 15
); // 调整行高
});
} else {
arr.forEach((line, index) => {
context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高
});
}
} else {
if (i > 0) {
context.fillText(
lines[i] ? lines[i] : "",
770,
440 + 5 * num + 24 * (i - 1)
);
} else {
context.fillText(
lines[i] ? lines[i] : "",
770,
440 + 24 * (i - 1)
);
}
}
}
// fj
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
for (let i = 0; i < lines1.length; i++) {
let num = Math.ceil(getByteLen(lines1[i]) / 37);
if (getByteLen(lines1[i]) > 37) {
let currentLine = "";
let arr = [];
for (let word of lines1[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(
line,
770,
610 + 25 * (i - 1) + 5 * num + index * 15
); // 调整行高
});
} else {
arr.forEach((line, index) => {
context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高
});
}
} else {
if (i > 0) {
context.fillText(
lines1[i] ? lines1[i] : "",
770,
610 + 5 * num + 23 * (i - 1)
);
} else {
context.fillText(
lines1[i] ? lines1[i] : "",
770,
610 + 23 * (i - 1)
);
}
}
}
};
image.src = this.bdczmSrc;
},
},
computed: {
hdiffHeight () {
return 0;
// return this.headTabBdcqz.length > 1 ? 54 : 0
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.imgClass {
display: inline-block;
height: auto;
max-width: 100%;
}
.middle_padding {
padding-bottom: 10px;
}
.zsyl-button {
text-align: center;
margin-top: 20px;
.operation_button {
width: 100px;
border: 1px solid rgb(0, 121, 254);
}
.dy-button {
color: white;
background-color: rgb(0, 121, 254);
}
}
.table-column {
border-spacing: 1px;
width: 100%;
tr td {
border: 1px solid #ccc;
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
background: rgb(251, 249, 229);
}
}
.zsyl-title {
background: #fafbe5;
text-align: center;
padding: 5px 0px;
font-size: 20px;
}
.no-data {
font-size: 18px;
display: flex;
text-align: center;
justify-content: center;
}
.el-tab-pane {
width: 1190px;
height: 670px;
overflow-y: auto;
}
.zsys {
width: 1180px;
height: 670px;
}
/deep/.el-table {
height: 100px !important;
}
// /deep/.sz {
// height: 340px !important;
// }
.el-form {
margin-top: 20px;
}
</style>