style:证书打印

 <!--
 <!--
  * @Description:
  * @Description:
  * @Autor: renchao
  * @Autor: renchao
- * @LastEditTime: 2023-11-08 13:27:03
+ * @LastEditTime: 2023-12-18 16:00:55
 -->
 -->
 <template>
 <template>
   <div>
   <div>
@@ -12,7 +12,7 @@
         label-width="120px">
         label-width="120px">
         <el-form-item label="印刷序列号：" prop="ysxlh">
         <el-form-item label="印刷序列号：" prop="ysxlh">
           <el-row>
           <el-row>
-            <el-col :span="22">
+            <el-col :span="18">
               <el-select v-model="ruleForm.ysxlh" @change="handleSelect" :disabled="disabled" placeholder="请选择">
               <el-select v-model="ruleForm.ysxlh" @change="handleSelect" :disabled="disabled" placeholder="请选择">
                 <el-option
                 <el-option
                   v-for="item in ysxlh"
                   v-for="item in ysxlh"
@@ -22,6 +22,12 @@
                 </el-option>
                 </el-option>
               </el-select>
               </el-select>
             </el-col>
             </el-col>
+            <el-col :span="4" v-if="this.formData.bdcqzlx==1">
+              <el-tabs v-model="activeTitle">
+                <el-tab-pane label="第一页" name="title1"></el-tab-pane>
+                <el-tab-pane label="第二页" name="title2"></el-tab-pane>
+              </el-tabs>
+            </el-col>
             <el-col :span="2" v-if="this.formData.ysxlh">
             <el-col :span="2" v-if="this.formData.ysxlh">
               <el-button type="primary" @click="handleZF" v-if="disabled">作废</el-button>
               <el-button type="primary" @click="handleZF" v-if="disabled">作废</el-button>
             </el-col>
             </el-col>
@@ -30,7 +36,8 @@
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>
       <div class="zs-content">
       <div class="zs-content">
-        <canvas ref="zs" width="1000" v-show="this.formData.bdcqzlx==1" height="700"></canvas>
+        <canvas ref="zs1" width="1000" v-show="this.formData.bdcqzlx==1 && activeTitle=='title1'" height="700"></canvas>
+        <canvas ref="zs" width="1000" v-show="this.formData.bdcqzlx==1 && activeTitle=='title2'" height="700"></canvas>
         <canvas ref="zm" width="1180" v-show="this.formData.bdcqzlx==2" height="780"></canvas>
         <canvas ref="zm" width="1180" v-show="this.formData.bdcqzlx==2" height="780"></canvas>
       </div>
       </div>
     </div>
     </div>
@@ -62,12 +69,12 @@
 </template>
 </template>
 
 
 <script>
 <script>
+  import QRCode from 'qrcode'
   import store from '@/store/index.js'
   import store from '@/store/index.js'
   import { datas } from "../../javascript/zsyl.js";
   import { datas } from "../../javascript/zsyl.js";
   import { getPrintTemplateByCode } from "@/api/print";
   import { getPrintTemplateByCode } from "@/api/print";
   import { getLodop } from "@/utils/LodopFuncs"
   import { getLodop } from "@/utils/LodopFuncs"
   import { readYsxlh, certificate, getBdcqzDetail, invalidCertificate } from "@/api/bdcqz.js";
   import { readYsxlh, certificate, getBdcqzDetail, invalidCertificate } from "@/api/bdcqz.js";
-  import { log } from 'bpmn-js-token-simulation';
   export default {
   export default {
     props: {
     props: {
       formData: {
       formData: {
@@ -79,11 +86,13 @@
     },
     },
     data () {
     data () {
       return {
       return {
+        activeTitle: 'title1',
         // 详细信息
         // 详细信息
         bdcqz: {},
         bdcqz: {},
         key: 0,
         key: 0,
         disabled: false,
         disabled: false,
         // 不动产证书图片地址
         // 不动产证书图片地址
+        imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'),
         imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
         imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
         bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
         bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
         loading: false,
         loading: false,
@@ -202,7 +211,42 @@
        * @description: 不动产证书
        * @description: 不动产证书
        * @author: renchao
        * @author: renchao
        */
        */
+      drawTextOnImage1 () {
+        const canvas = this.$refs.zs1;
+        const context = canvas.getContext('2d');
+        const image = new Image();
+        image.onload = () => {
+          context.drawImage(image, 0, 0);
+          context.font = '18px 楷体';
+          context.fillStyle = '#000000';
+          let date = this.bdcqz.djsj.split(' ')[0].split('/');
+          let nian = date[0]
+          let yue = date[1]
+          let ri = date[2]
+          this.bdcqz.nian = nian
+          this.bdcqz.yue = yue
+          this.bdcqz.ri = ri
+          context.fillText(nian ? nian : '', 780, 499);
+          context.fillText(yue ? yue : '', 840, 499);
+          context.fillText(ri ? ri : '', 885, 499);
+          QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 })
+            .then(url => {
+              const qrImage = new Image();
+              this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中
+              qrImage.onload = () => {
+                context.drawImage(qrImage, 670, 400, 100, 100);
+              };
+              qrImage.src = url;
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          context.fillText(this.bdcqz.bdcqzbm ? this.bdcqz.bdcqzbm : '', 745, 633);
+        };
+        image.src = this.imgSrc1;
+      },
       drawTextOnImage () {
       drawTextOnImage () {
+        this.drawTextOnImage1()
         function getByteLen (val) {
         function getByteLen (val) {
           var len = 0;
           var len = 0;
           if (!val) return len;
           if (!val) return len;
@@ -595,33 +639,53 @@
        * @author: renchao
        * @author: renchao
        */
        */
       handlePrint () {
       handlePrint () {
+        let that = this
         if (this.ruleForm.ysxlh == '') {
         if (this.ruleForm.ysxlh == '') {
           this.$message.error('请选择印刷序列号');
           this.$message.error('请选择印刷序列号');
           return;
           return;
         }
         }
         store.dispatch('user/reWorkFresh', false)
         store.dispatch('user/reWorkFresh', false)
-        let that = this
         if (this.bdcqz.bdcqzlx == 1) {
         if (this.bdcqz.bdcqzlx == 1) {
-          getPrintTemplateByCode({ tmpno: 'zsdy' }).then(resInfo => {
-            if (resInfo.code == 200) {
-              //打开模板设计
-              let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
-              LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板
+          if (this.activeTitle == 'title1') {
+            getPrintTemplateByCode({ tmpno: 'zsdy1' }).then(resInfo => {
+              if (resInfo.code == 200) {
+                //打开模板设计
+                let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
+                LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板
+                console.log(that.bdcqz);
+                for (let key in that.bdcqz) {
+                  LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]);
+                }
+                LODOP.PREVIEW();
+              } else {
+                that.$message.error(resInfo.message)
+              }
+              that.$popupCacel()
+              //刷新列表
+              store.dispatch('user/reWorkFresh', true)
+            })
+          } else {
+            getPrintTemplateByCode({ tmpno: 'zsdy' }).then(resInfo => {
+              if (resInfo.code == 200) {
+                //打开模板设计
+                let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
+                LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板
 
 
-              this.bdcqz.bdcdyh1 = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
-                this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
-              //todo 调取后端接口获取数据 循环set
-              for (let key in this.bdcqz) {
-                LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]);
+                that.bdcqz.bdcdyh1 = that.bdcqz.bdcdyh.slice(0, 6) + ' ' + that.bdcqz.bdcdyh.slice(6, 12) + ' ' +
+                  that.bdcqz.bdcdyh.slice(12, 19) + ' ' + that.bdcqz.bdcdyh.slice(19, that.bdcqz.bdcdyh.length)
+                //todo 调取后端接口获取数据 循环set
+                for (let key in that.bdcqz) {
+                  LODOP.SET_PRINT_STYLEA(key, "CONTENT", that.bdcqz[key]);
+                }
+                LODOP.PREVIEW();
+              } else {
+                that.$message.error(resInfo.message)
               }
               }
-              LODOP.PREVIEW();
-            } else {
-              this.$message.error(resInfo.message)
-            }
-            that.$popupCacel()
-            //刷新列表
-            store.dispatch('user/reWorkFresh', true)
-          })
+              that.$popupCacel()
+              //刷新列表
+              store.dispatch('user/reWorkFresh', true)
+            })
+          }
         } else {
         } else {
           getPrintTemplateByCode({ tmpno: 'zmdy' }).then(resInfo => {
           getPrintTemplateByCode({ tmpno: 'zmdy' }).then(resInfo => {
             if (resInfo.code == 200) {
             if (resInfo.code == 200) {
@@ -679,6 +743,15 @@
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">
   @import "~@/styles/mixin.scss";
   @import "~@/styles/mixin.scss";
+  /deep/.el-tabs__nav-wrap::after {
+    display: none;
+  }
+  /deep/.el-tabs__header {
+    margin: 0;
+  }
+  /deep/.el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
   .zsdy-content {
   .zsdy-content {
     height: 80vh;
     height: 80vh;
     overflow-y: scroll;
     overflow-y: scroll;