style:证书打印预览

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-17 10:40:09
+ * @LastEditTime: 2023-06-25 11:13:07
 -->
 <template>
   <div>
-    <div class="zsdy-content loadingtext">
+    <div class="zsdy-content" v-Loading="loading">
       <el-form
         :model="ruleForm"
         :rules="rules"
@@ -22,7 +22,9 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <img :src="previewImage" style="width: 100%">
+      <div class="zs-content">
+        <canvas ref="zs" width="1000" class="zsyl" height="700"></canvas>
+      </div>
     </div>
     <div class="text-center pt-10">
       <el-button @click="$popupCacel">取消</el-button>
@@ -34,7 +36,7 @@
 <script>
   import store from '@/store/index.js'
   import { datas } from "../../javascript/zsyl.js";
-  import { readYsxlh, certificate, bdcqzPreview } from "@/api/bdcqz.js";
+  import { readYsxlh, certificate, getSlsqBdcqzList } from "@/api/bdcqz.js";
   export default {
     props: {
       formData: {
@@ -46,10 +48,12 @@
     },
     data () {
       return {
+        // 不动产证书图片地址
+        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
+        loading: false,
+        bdcqz: [],
         //印刷序列号集合
         ysxlh: [],
-        //证书预览图片
-        previewImage: '',
         //列名称对象
         columns: [],
         ruleForm: {
@@ -70,7 +74,7 @@
       store.dispatch('user/refreshPage', false)
       this.columns = datas.columns()
       this.ysxlhList()
-      this.getBdcqzPreview()
+      this.getHeadTabBdcqz()
     },
     methods: {
       //获取印刷序列号列表
@@ -81,22 +85,69 @@
           }
         })
       },
-      handleSubmit () {
-        this.savePrintRecord()
-      },
-      //获取证书内容
-      getRowValue (code) {
-        var value = this.bdcqz[code];
-        return value;
+      //获取受理申请下全部不动产权证
+      getHeadTabBdcqz () {
+        this.loading = true
+        getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
+          if (res.code == 200) {
+            if (res.result && res.result.length > 0) {
+              this.bdcqz = res.result[0]
+              this.drawTextOnImage()
+            }
+          }
+          this.loading = false
+        })
       },
-      getBdcqzPreview () {
-        this.$startLoading()
-        bdcqzPreview(this.formData.bdcqz).then(res => {
-          this.$endLoading()
-          let blob = new Blob([res]);
-          let url = window.URL.createObjectURL(blob);
-          this.previewImage = url;
+      // 不动产证书
+      drawTextOnImage () {
+        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 : '', 138, 97);
+          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
+          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
+          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 138, 223);
+          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
+          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
+          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
+          context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
+          context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
+          // qlqtzk
+          const maxWidth = 280; // 最大宽度限制
+          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
+          lines.forEach((line, index) => {
+            const y = 469 + (index * 37); // 每行文本的垂直位置
+            let currentLine = '';
+            let arr = [];
+            for (let word of line) {
+              const testLine = currentLine + word;
+              const lineWidth = context.measureText(testLine).width;
+              if (lineWidth <= maxWidth) {
+                currentLine = testLine;
+              } else {
+                arr.push(currentLine);
+                currentLine = word;
+              }
+            }
+            arr.push(currentLine);
+            arr.forEach((line, index) => {
+              context.fillText(line, 138, y + (index * 20)); // 调整行高
+            })
           })
+          context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
+        }
+        image.src = this.imgSrc
+      },
+      handleSubmit () {
+        this.savePrintRecord()
       },
       //保存打印记录
       savePrintRecord () {
@@ -108,14 +159,14 @@
             this.$popupCacel()
             this.$message.success("提交成功")
             //刷新列表
-            store.dispatch('user/refreshPage', true);
+            store.dispatch('user/refreshPage', true)
           } else {
             this.$message.error(res.message)
           }
-        });
-      },
-    },
-  };
+        })
+      }
+    }
+  }
 </script>
 <style scoped lang="scss">
   @import "~@/styles/mixin.scss";
@@ -123,125 +174,7 @@
     height: 80vh;
     overflow-y: scroll;
   }
-  .aaaa {
-    width: 1024px;
-    height: 739px;
-    font-family: KaiTi;
-    font-weight: 700;
-  }
-  .bdcdjzm {
-    width: 1123px;
-    height: 794px;
-    font-family: KaiTi;
-    font-weight: 700;
-  }
-  .zmyl-box {
-    //position: relative;
-    position: absolute;
-    height: 600px;
-    width: 280px;
-    margin-left: 775px;
-    font-size: 16px;
-    justify-content: space-between;
-  }
-  .bdcqzh {
-    height: 70px;
-    left: 0;
-    bottom: 0;
-    font-size: 18px;
-  }
-  .zsyl-box {
-    display: flex;
-    justify-content: space-between;
-    // padding: 20px;
-    font-size: 16px;
-    height: 100%;
-    $left: 131px;
-
-    .zsyl-left {
-      width: 460px;
-      position: relative;
-      .qlr {
-        position: absolute;
-        top: 40px;
-        left: $left;
-      }
-      .gyqk {
-        position: absolute;
-        top: 80px;
-        left: $left;
-      }
-      .zl {
-        position: absolute;
-        top: 120px;
-        left: $left;
-      }
-      .bdcdyh {
-        position: absolute;
-        top: 160px;
-        left: $left;
-      }
-      .qllx {
-        position: absolute;
-        top: 205px;
-        left: $left;
-      }
-      .qlxz {
-        position: absolute;
-        top: 250px;
-        left: $left;
-      }
-      .yt {
-        position: absolute;
-        top: 290px;
-        left: $left;
-      }
-      .mj {
-        position: absolute;
-        top: 330px;
-        left: $left;
-      }
-      .syqx {
-        position: absolute;
-        top: 370px;
-        left: $left;
-      }
-      .qt {
-        position: absolute;
-        top: 420px;
-        left: $left;
-      }
-    }
-    .zsyl-right {
-      flex: 1;
-      text-align: left;
-      position: relative;
-      .fj {
-        position: absolute;
-        left: 115px;
-        top: 5px;
-      }
-    }
-    .zsyl-title {
-      margin-bottom: 12px;
-    }
-    /deep/.el-table__row {
-      background: #fafbe5 !important;
-    }
-  }
-  .middle_padding {
-    padding-bottom: 10px;
-  }
-  .zsyl-button {
+  .zs-content {
     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);
-    }
   }
 </style>

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-06-20 16:09:31
+ * @LastEditTime: 2023-06-25 10:33:16
 -->
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
@@ -11,14 +11,14 @@
         v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
     </el-tabs>
     <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
-    <canvas ref="zs" width="1000" v-if="activeName==1" height="700"></canvas>
-    <canvas ref="zm" width="1180" v-else height="780"></canvas>
+    <canvas ref="zs" width="1000" v-show="activeName=='1'" height="700"></canvas>
+    <canvas ref="zm" width="1180" v-show="activeName!='1'" height="780"></canvas>
   </div>
 </template>
 
 <script>
   import { datas } from "../../javascript/zsyl.js";
-  import { getSlsqBdcqzList, bdcqzPreview } from "@/api/bdcqz.js"
+  import { getSlsqBdcqzList } from "@/api/bdcqz.js"
   export default {
     name: "zsyl",
     props: {
@@ -94,7 +94,7 @@
       handleClick (e) {
         this.bdcqz = this.headTabBdcqz[e.index - 0]
         this.activeName = this.headTabBdcqz.bdcqzlx
-        if (this.activeName == 1) {
+        if (this.activeName == '1') {
           this.drawTextOnImage()
         } else {
           this.drawTextzmImage()

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-17 10:41:49
+ * @LastEditTime: 2023-06-25 11:15:01
 -->
 <template>
   <div class="szxx">
@@ -119,9 +119,9 @@
       openZsylDialog (item, type) {
         if (type == 1) {
           //证书预览
-          this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { bdcqz: item }, "70%", true);
+          this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "70%", true);
         } else {
-          this.$popupDialog("不动产权证书", "workflow/components/dialog/zsdy", { bdcqz: item }, "70%", true);
+          this.$popupDialog("不动产权证书", "workflow/components/dialog/zsdy", { bdcqz: item, bsmSlsq: this.$route.query.bsmSlsq }, "70%", true);
         }
       },
       //再次打印