Skip to content

bdc / bdcdj-web

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

style:证书打印预览

1 parent 8a1d878a
Inline Side-by-side
Showing 3 changed files with 86 additions and 153 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-17 10:40:09 4 * @LastEditTime: 2023-06-25 11:13:07
5 --> 5 -->
6 <template> 6 <template>
7 <div> 7 <div>
8 <div class="zsdy-content loadingtext"> 8 <div class="zsdy-content" v-Loading="loading">
9 <el-form 9 <el-form
10 :model="ruleForm" 10 :model="ruleForm"
11 :rules="rules" 11 :rules="rules"
...@@ -22,7 +22,9 @@ ...@@ -22,7 +22,9 @@
22 </el-select> 22 </el-select>
23 </el-form-item> 23 </el-form-item>
24 </el-form> 24 </el-form>
25 <img :src="previewImage" style="width: 100%"> 25 <div class="zs-content">
26 <canvas ref="zs" width="1000" class="zsyl" height="700"></canvas>
27 </div>
26 </div> 28 </div>
27 <div class="text-center pt-10"> 29 <div class="text-center pt-10">
28 <el-button @click="$popupCacel">取消</el-button> 30 <el-button @click="$popupCacel">取消</el-button>
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
34 <script> 36 <script>
35 import store from '@/store/index.js' 37 import store from '@/store/index.js'
36 import { datas } from "../../javascript/zsyl.js"; 38 import { datas } from "../../javascript/zsyl.js";
37 import { readYsxlh, certificate, bdcqzPreview } from "@/api/bdcqz.js"; 39 import { readYsxlh, certificate, getSlsqBdcqzList } from "@/api/bdcqz.js";
38 export default { 40 export default {
39 props: { 41 props: {
40 formData: { 42 formData: {
...@@ -46,10 +48,12 @@ ...@@ -46,10 +48,12 @@
46 }, 48 },
47 data () { 49 data () {
48 return { 50 return {
51 // 不动产证书图片地址
52 imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
53 loading: false,
54 bdcqz: [],
49 //印刷序列号集合 55 //印刷序列号集合
50 ysxlh: [], 56 ysxlh: [],
51 //证书预览图片
52 previewImage: '',
53 //列名称对象 57 //列名称对象
54 columns: [], 58 columns: [],
55 ruleForm: { 59 ruleForm: {
...@@ -70,7 +74,7 @@ ...@@ -70,7 +74,7 @@
70 store.dispatch('user/refreshPage', false) 74 store.dispatch('user/refreshPage', false)
71 this.columns = datas.columns() 75 this.columns = datas.columns()
72 this.ysxlhList() 76 this.ysxlhList()
73 this.getBdcqzPreview() 77 this.getHeadTabBdcqz()
74 }, 78 },
75 methods: { 79 methods: {
76 //获取印刷序列号列表 80 //获取印刷序列号列表
...@@ -81,22 +85,69 @@ ...@@ -81,22 +85,69 @@
81 } 85 }
82 }) 86 })
83 }, 87 },
84 handleSubmit () { 88 //获取受理申请下全部不动产权证
85 this.savePrintRecord() 89 getHeadTabBdcqz () {
90 this.loading = true
91 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
92 if (res.code == 200) {
93 if (res.result && res.result.length > 0) {
94 this.bdcqz = res.result[0]
95 this.drawTextOnImage()
96 }
97 }
98 this.loading = false
99 })
86 }, 100 },
87 //获取证书内容 101 // 不动产证书
88 getRowValue (code) { 102 drawTextOnImage () {
89 var value = this.bdcqz[code]; 103 const canvas = this.$refs.zs;
90 return value; 104 const context = canvas.getContext('2d');
105 const image = new Image();
106 image.onload = () => {
107 context.drawImage(image, 0, 0);
108 context.font = '18px 楷体';
109 context.fillStyle = '#000000';
110 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
111 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
112 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
113 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
114 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97);
115 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
116 context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
117 context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 138, 223);
118 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
119 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
120 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
121 context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
122 context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
123 // qlqtzk
124 const maxWidth = 280; // 最大宽度限制
125 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
126 lines.forEach((line, index) => {
127 const y = 469 + (index * 37); // 每行文本的垂直位置
128 let currentLine = '';
129 let arr = [];
130 for (let word of line) {
131 const testLine = currentLine + word;
132 const lineWidth = context.measureText(testLine).width;
133 if (lineWidth <= maxWidth) {
134 currentLine = testLine;
135 } else {
136 arr.push(currentLine);
137 currentLine = word;
138 }
139 }
140 arr.push(currentLine);
141 arr.forEach((line, index) => {
142 context.fillText(line, 138, y + (index * 20)); // 调整行高
143 })
144 })
145 context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
146 }
147 image.src = this.imgSrc
91 }, 148 },
92 getBdcqzPreview () { 149 handleSubmit () {
93 this.$startLoading() 150 this.savePrintRecord()
94 bdcqzPreview(this.formData.bdcqz).then(res => {
95 this.$endLoading()
96 let blob = new Blob([res]);
97 let url = window.URL.createObjectURL(blob);
98 this.previewImage = url;
99 })
100 }, 151 },
101 //保存打印记录 152 //保存打印记录
102 savePrintRecord () { 153 savePrintRecord () {
...@@ -108,14 +159,14 @@ ...@@ -108,14 +159,14 @@
108 this.$popupCacel() 159 this.$popupCacel()
109 this.$message.success("提交成功") 160 this.$message.success("提交成功")
110 //刷新列表 161 //刷新列表
111 store.dispatch('user/refreshPage', true); 162 store.dispatch('user/refreshPage', true)
112 } else { 163 } else {
113 this.$message.error(res.message) 164 this.$message.error(res.message)
114 } 165 }
115 }); 166 })
116 }, 167 }
117 }, 168 }
118 }; 169 }
119 </script> 170 </script>
120 <style scoped lang="scss"> 171 <style scoped lang="scss">
121 @import "~@/styles/mixin.scss"; 172 @import "~@/styles/mixin.scss";
...@@ -123,125 +174,7 @@ ...@@ -123,125 +174,7 @@
123 height: 80vh; 174 height: 80vh;
124 overflow-y: scroll; 175 overflow-y: scroll;
125 } 176 }
126 .aaaa { 177 .zs-content {
127 width: 1024px;
128 height: 739px;
129 font-family: KaiTi;
130 font-weight: 700;
131 }
132 .bdcdjzm {
133 width: 1123px;
134 height: 794px;
135 font-family: KaiTi;
136 font-weight: 700;
137 }
138 .zmyl-box {
139 //position: relative;
140 position: absolute;
141 height: 600px;
142 width: 280px;
143 margin-left: 775px;
144 font-size: 16px;
145 justify-content: space-between;
146 }
147 .bdcqzh {
148 height: 70px;
149 left: 0;
150 bottom: 0;
151 font-size: 18px;
152 }
153 .zsyl-box {
154 display: flex;
155 justify-content: space-between;
156 // padding: 20px;
157 font-size: 16px;
158 height: 100%;
159 $left: 131px;
160
161 .zsyl-left {
162 width: 460px;
163 position: relative;
164 .qlr {
165 position: absolute;
166 top: 40px;
167 left: $left;
168 }
169 .gyqk {
170 position: absolute;
171 top: 80px;
172 left: $left;
173 }
174 .zl {
175 position: absolute;
176 top: 120px;
177 left: $left;
178 }
179 .bdcdyh {
180 position: absolute;
181 top: 160px;
182 left: $left;
183 }
184 .qllx {
185 position: absolute;
186 top: 205px;
187 left: $left;
188 }
189 .qlxz {
190 position: absolute;
191 top: 250px;
192 left: $left;
193 }
194 .yt {
195 position: absolute;
196 top: 290px;
197 left: $left;
198 }
199 .mj {
200 position: absolute;
201 top: 330px;
202 left: $left;
203 }
204 .syqx {
205 position: absolute;
206 top: 370px;
207 left: $left;
208 }
209 .qt {
210 position: absolute;
211 top: 420px;
212 left: $left;
213 }
214 }
215 .zsyl-right {
216 flex: 1;
217 text-align: left;
218 position: relative;
219 .fj {
220 position: absolute;
221 left: 115px;
222 top: 5px;
223 }
224 }
225 .zsyl-title {
226 margin-bottom: 12px;
227 }
228 /deep/.el-table__row {
229 background: #fafbe5 !important;
230 }
231 }
232 .middle_padding {
233 padding-bottom: 10px;
234 }
235 .zsyl-button {
236 text-align: center; 178 text-align: center;
237 margin-top: 20px;
238 .operation_button {
239 width: 100px;
240 border: 1px solid rgb(0, 121, 254);
241 }
242 .dy-button {
243 color: white;
244 background-color: rgb(0, 121, 254);
245 }
246 } 179 }
247 </style> 180 </style>
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-20 16:09:31 4 * @LastEditTime: 2023-06-25 10:33:16
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;"> 7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
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 <canvas ref="zs" width="1000" v-if="activeName==1" height="700"></canvas> 14 <canvas ref="zs" width="1000" v-show="activeName=='1'" height="700"></canvas>
15 <canvas ref="zm" width="1180" v-else height="780"></canvas> 15 <canvas ref="zm" width="1180" v-show="activeName!='1'" height="780"></canvas>
16 </div> 16 </div>
17 </template> 17 </template>
18 18
19 <script> 19 <script>
20 import { datas } from "../../javascript/zsyl.js"; 20 import { datas } from "../../javascript/zsyl.js";
21 import { getSlsqBdcqzList, bdcqzPreview } from "@/api/bdcqz.js" 21 import { getSlsqBdcqzList } from "@/api/bdcqz.js"
22 export default { 22 export default {
23 name: "zsyl", 23 name: "zsyl",
24 props: { 24 props: {
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
94 handleClick (e) { 94 handleClick (e) {
95 this.bdcqz = this.headTabBdcqz[e.index - 0] 95 this.bdcqz = this.headTabBdcqz[e.index - 0]
96 this.activeName = this.headTabBdcqz.bdcqzlx 96 this.activeName = this.headTabBdcqz.bdcqzlx
97 if (this.activeName == 1) { 97 if (this.activeName == '1') {
98 this.drawTextOnImage() 98 this.drawTextOnImage()
99 } else { 99 } else {
100 this.drawTextzmImage() 100 this.drawTextzmImage()
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-17 10:41:49 4 * @LastEditTime: 2023-06-25 11:15:01
5 --> 5 -->
6 <template> 6 <template>
7 <div class="szxx"> 7 <div class="szxx">
...@@ -119,9 +119,9 @@ ...@@ -119,9 +119,9 @@
119 openZsylDialog (item, type) { 119 openZsylDialog (item, type) {
120 if (type == 1) { 120 if (type == 1) {
121 //证书预览 121 //证书预览
122 this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { bdcqz: item }, "70%", true); 122 this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "70%", true);
123 } else { 123 } else {
124 this.$popupDialog("不动产权证书", "workflow/components/dialog/zsdy", { bdcqz: item }, "70%", true); 124 this.$popupDialog("不动产权证书", "workflow/components/dialog/zsdy", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "70%", true);
125 } 125 }
126 }, 126 },
127 //再次打印 127 //再次打印
......