style:cavans换行

renchao@pashanhoo.com
Showing 4 changed files with 75 additions and 34 deletions
src/image/bdcqz/bdczm.jpg
src/views/system/dymbgl/dymbgl.vue
src/views/workflow/components/dialog/zsyl.vue
src/views/workflow/mixin/index.js
--- a/src/image/bdcqz/bdczm.jpg 0 → 100644
View file @ec0daf5
+++ b/src/image/bdcqz/bdczm.jpg 0 → 100644
View file @ec0daf5
--- a/src/views/system/dymbgl/dymbgl.vue
View file @ec0daf5
+++ b/src/views/system/dymbgl/dymbgl.vue
View file @ec0daf5
@@ -5,7 +5,6 @@
        <el-row>
          <el-col :span="24" class="btnColRight">
            <el-form-item>
-              {{ isRefresh }}
              <el-button type="primary" @click="fetchData">查询</el-button>
              <el-button type="primary" @click="openAddDialog">新增</el-button>
            </el-form-item>
@@ -25,12 +24,12 @@
  </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex'
-import { getLodop } from "@/utils/LodopFuncs"
+  import { getLodop } from "@/utils/LodopFuncs"
-import table from "@/utils/mixin/table"
+  import table from "@/utils/mixin/table"
-import { datas, sendThis } from "./dymbgl"
+  import { datas, sendThis } from "./dymbgl"
-import { selectPrintTemplateList, delPrintTemplate } from "@/api/system.js"
+  import { selectPrintTemplateList, delPrintTemplate } from "@/api/system.js"
-export default {
+  export default {
    name: "dymbgl",
    mixins: [table],
    data () {
@@ -167,8 +166,8 @@ export default {
        LODOP.PRINT_DESIGN(); //打印设计或者打印维护需要放到最后
      },
    },
-};
+  };
 </script>
 <style scoped lang="scss">
-@import "~@/styles/public.scss";
+  @import "~@/styles/public.scss";
 </style>
--- a/src/views/workflow/components/dialog/zsyl.vue
View file @ec0daf5
+++ b/src/views/workflow/components/dialog/zsyl.vue
View file @ec0daf5
 <!--
 * @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-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
-      <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz"
+      <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="zs" width="860" v-if="activeName==1" height="720"></canvas>
-    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></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,
+        bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
-        canvasHeight: 720,
        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.activeName = this.headTabBdcqz.bdcqzlx
-        // this.getBdcqzPreview();
+        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;
      }
    }
  }
--- a/src/views/workflow/mixin/index.js
View file @ec0daf5
+++ b/src/views/workflow/mixin/index.js
View file @ec0daf5
 /*
 * @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":
          //根据编号获取对应信息