style:cavans换行

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-31 16:04:44
+ * @LastEditTime: 2023-06-20 15:51:11
 -->
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px">
     <!-- 表单部分 -->
-    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1">
-      <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz"
+    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
+      <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bdcqzlx"
         v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
     </el-tabs>
     <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
-    <!-- <img :src="previewImage" class="imgClass"> -->
-    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+    <canvas ref="zs" width="860" v-if="activeName==1" height="720"></canvas>
+    <canvas ref="zm" width="1460" v-else height="800"></canvas>
   </div>
 </template>
 
@@ -30,9 +30,7 @@
     data () {
       return {
         imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
-        canvasWidth: 1018,
-        canvasHeight: 720,
-
+        bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
         loading: false,
         //印刷序列号集合
         ysxlh: [],
@@ -79,10 +77,14 @@
         getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
           if (res.code == 200) {
             if (res.result && res.result.length > 0) {
-              this.activeName = res.result[0].bsmBdcqz
+              this.activeName = res.result[0].bdcqzlx
               this.bdcqz = res.result[0]
               this.headTabBdcqz = res.result
-              this.drawTextOnImage();
+              if (this.activeName == 1) {
+                this.drawTextOnImage()
+              } else {
+                this.drawTextzmImage()
+              }
             }
           }
           this.loading = false
@@ -91,21 +93,16 @@
       //tab表头切换方法
       handleClick (e) {
         this.bdcqz = this.headTabBdcqz[e.index - 0]
-        this.activeName = this.headTabBdcqz.bsmBdcqz
-        // this.getBdcqzPreview();
-        this.drawTextOnImage()
+        this.activeName = this.headTabBdcqz.bdcqzlx
+        if (this.activeName == 1) {
+          this.drawTextOnImage()
+        } else {
+          this.drawTextzmImage()
+        }
       },
-      // getBdcqzPreview () {
-      //   bdcqzPreview(this.bdcqz).then(res => {
-      //     this.loading = false
-      //     let blob = new Blob([res]);
-      //     let url = window.URL.createObjectURL(blob);
-      //     this.previewImage = url;
-      //     this.drawTextOnImage()
-      //   })
-      // },
+      // 不动产证书
       drawTextOnImage () {
-        const canvas = this.$refs.canvas;
+        const canvas = this.$refs.zs;
         const context = canvas.getContext('2d');
         const image = new Image();
         image.onload = () => {
@@ -128,7 +125,52 @@
           context.fillText(this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk : '', 138, 469);
           context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
         }
-        image.src = this.imgSrc;
+        image.src = this.imgSrc
+      },
+      // 不动产证明
+      drawTextzmImage () {
+        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';
+          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);
+          // bdcdyh
+          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 775, 373);
+          // qlqtzk
+          const maxWidth = 280; // 最大宽度限制
+          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
+          lines.forEach((line, index) => {
+            const y = 415 + (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, 775, y + (index * 20)); // 调整行高
+            });
+          });
+        };
+        image.src = this.bdczmSrc;
       }
     }
   }

 /*
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-05-18 15:01:31
+ * @LastEditTime: 2023-06-20 11:28:09
  */
 import { getWorkFlowImage } from "@/api/workflow/jsydsyqFlow.js";
 import { getPrintTemplateByCode } from "@/api/system";
@@ -106,7 +106,7 @@ export default {
           this.$popupDialog("证书预览", "workflow/components/dialog/zsyl", {
             bsmSlsq: this.bsmSlsq,
             entryType: '1'
-          }, '65%', true)
+          }, '1210px', true)
           break;
         case "B6":
           //根据编号获取对应信息