Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev
Showing
4 changed files
with
95 additions
and
29 deletions
src/image/bdcqz/bdczm.jpg
0 → 100644
592 KB
This diff is collapsed.
Click to expand it.
| 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 16:09:31 |
| 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;text-align: center;"> |
| 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="1000" v-if="activeName==1" height="700"></canvas> |
| 15 | <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas> | 15 | <canvas ref="zm" width="1180" v-else height="780"></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,26 +93,21 @@ | ... | @@ -91,26 +93,21 @@ |
| 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 = () => { |
| 112 | context.drawImage(image, 0, 0); | 109 | context.drawImage(image, 0, 0); |
| 113 | context.font = '15px 楷体'; | 110 | context.font = '18px 楷体'; |
| 114 | context.fillStyle = '#000000'; | 111 | context.fillStyle = '#000000'; |
| 115 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); | 112 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); |
| 116 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); | 113 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); |
| ... | @@ -125,10 +122,79 @@ | ... | @@ -125,10 +122,79 @@ |
| 125 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); | 122 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); |
| 126 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); | 123 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); |
| 127 | context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); | 124 | context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); |
| 128 | context.fillText(this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk : '', 138, 469); | 125 | // qlqtzk |
| 126 | const maxWidth = 280; // 最大宽度限制 | ||
| 127 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; | ||
| 128 | lines.forEach((line, index) => { | ||
| 129 | const y = 469 + (index * 37); // 每行文本的垂直位置 | ||
| 130 | let currentLine = ''; | ||
| 131 | let arr = []; | ||
| 132 | for (let word of line) { | ||
| 133 | const testLine = currentLine + word; | ||
| 134 | const lineWidth = context.measureText(testLine).width; | ||
| 135 | if (lineWidth <= maxWidth) { | ||
| 136 | currentLine = testLine; | ||
| 137 | } else { | ||
| 138 | arr.push(currentLine); | ||
| 139 | currentLine = word; | ||
| 140 | } | ||
| 141 | } | ||
| 142 | arr.push(currentLine); | ||
| 143 | arr.forEach((line, index) => { | ||
| 144 | context.fillText(line, 138, y + (index * 20)); // 调整行高 | ||
| 145 | }) | ||
| 146 | }) | ||
| 129 | context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100); | 147 | context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100); |
| 130 | } | 148 | } |
| 131 | image.src = this.imgSrc; | 149 | image.src = this.imgSrc |
| 150 | }, | ||
| 151 | // 不动产证明 | ||
| 152 | drawTextzmImage () { | ||
| 153 | const canvas = this.$refs.zm; | ||
| 154 | const context = canvas.getContext('2d'); | ||
| 155 | const image = new Image(); | ||
| 156 | image.onload = () => { | ||
| 157 | context.drawImage(image, 0, 0); | ||
| 158 | context.font = '18px 楷体'; | ||
| 159 | context.fillStyle = '#000000'; | ||
| 160 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125); | ||
| 161 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125); | ||
| 162 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125); | ||
| 163 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); | ||
| 164 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); | ||
| 165 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | ||
| 166 | // 义务人 | ||
| 167 | context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | ||
| 168 | context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325); | ||
| 169 | // bdcdyh | ||
| 170 | context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 775, 373); | ||
| 171 | // qlqtzk | ||
| 172 | const maxWidth = 280; // 最大宽度限制 | ||
| 173 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; | ||
| 174 | lines.forEach((line, index) => { | ||
| 175 | const y = 415 + (index * 37); // 每行文本的垂直位置 | ||
| 176 | let currentLine = ''; | ||
| 177 | let arr = []; | ||
| 178 | for (let word of line) { | ||
| 179 | const testLine = currentLine + word; | ||
| 180 | const lineWidth = context.measureText(testLine).width; | ||
| 181 | if (lineWidth <= maxWidth) { | ||
| 182 | currentLine = testLine; | ||
| 183 | } else { | ||
| 184 | arr.push(currentLine); | ||
| 185 | currentLine = word; | ||
| 186 | } | ||
| 187 | } | ||
| 188 | arr.push(currentLine); | ||
| 189 | arr.forEach((line, index) => { | ||
| 190 | context.fillText(line, 775, y + (index * 20)); // 调整行高 | ||
| 191 | }); | ||
| 192 | }); | ||
| 193 | // fj | ||
| 194 | context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 775, 650); | ||
| 195 | }; | ||
| 196 | |||
| 197 | image.src = this.bdczmSrc; | ||
| 132 | } | 198 | } |
| 133 | } | 199 | } |
| 134 | } | 200 | } | ... | ... |
| 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 | //根据编号获取对应信息 | ... | ... |
-
Please register or sign in to post a comment