出门证优化

src/utils/chapter.js

@@ -9,7 +9,7 @@ let chapter = (text, companyName) => {
         // 绘制印章边框
         let width = canvas.width / 2
         let height = canvas.height / 2
-        context.lineWidth = 1 // 边框宽度
+        context.lineWidth = 4 // 边框宽度
         context.strokeStyle = '#f00'
         context.beginPath()
         context.arc(width, height, 90, 0, Math.PI * 2) //宽、高、半径
@@ -19,17 +19,17 @@ let chapter = (text, companyName) => {
         create5star(context, width, height, 30, '#f00', 0)
 
         // 绘制印章名称
-        context.font = '16px 宋体'
+        context.font = 'bold 16px 宋体'
         context.textBaseline = 'middle' //设置文本的垂直对齐方式
         context.textAlign = 'center' //设置文本的水平对对齐方式
-        context.lineWidth = 1
+        context.lineWidth = 4
         // context.strokeStyle = '#f00'
         context.fillStyle = '#f00'
         context.fillText(text, width, height + 45)
 
         // 绘制印章单位
         context.translate(width, height) // 平移到此位置,
-        context.font = '16px 宋体'
+        context.font = 'bold 16px 宋体'
         let count = companyName.length // 字数
         let angle = (4 * Math.PI) / (3 * (count - 1)) // 字间角度
         let chars = companyName.split('')
@@ -43,7 +43,7 @@ let chapter = (text, companyName) => {
             }
 
             context.save()
-            context.translate(80, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
+            context.translate(76, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
             context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
             context.fillText(c, 0, 0) // 此点为字的中心点
             context.restore()

src/views/material/lease/clerkConfirmation/index.vue

@@ -77,7 +77,7 @@
       ></el-table-column>
 
       <el-table-column
-        label="申请数量"
+        label="发布数量"
         align="center"
         prop="preCountNum"
         width="80px"
@@ -418,10 +418,10 @@
         </el-form-item>
       </el-form>
       <div>
-        <!-- <vue-easy-print tableShow ref="remarksPrintRefPass" style="padding: 0 20px; font-size: 18px"> -->
+        <vue-easy-print tableShow ref="remarksPrintRefPass" style="padding: 0 20px; font-size: 18px">
         <div id="passId" style="padding: 0 20px; font-size: 18px">
-          <div class="title" style="text-align: center; font-weight: 600; font-size: 22px; margin-bottom: 20px">
+          <div style="text-align: center; font-weight: 600; font-size: 36px; margin-bottom: 40px">
-            出 门 证
+            出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           </div>
           <div style="text-align: end">{{ passCode }}</div>
           <div style="line-height: 1.96">
@@ -439,11 +439,14 @@
           <div style="margin: 60px 0 15px; text-align: end">（公章）</div>
           <div style="text-align: end">{{ passTime }}</div>
           <div>此证盖章有效</div>
-          <div v-if="showPass" style="position: absolute; top: 48%; left: 69%">
+          <div v-if="showPass" style="position: absolute; top: 120px; left: 590px">
             <canvas id="canvas" width="200" height="200"></canvas>
           </div>
+          <div v-if="showImg" style="position: absolute; top: 110px; left: 590px">
+            <img :src="canvasImgUrl" width="200" height="200" />
+          </div>
         </div>
-        <!-- </vue-easy-print> -->
+        </vue-easy-print>
       </div>
       <div slot="footer" class="dialog-footer" style="text-align: center">
         <el-button type="primary" @click="printPass">打 印</el-button>
@@ -539,6 +542,8 @@ export default {
       showView: false,
       getListViewInfo: [],
       showPass: false,
+      showImg: false,
+      canvasImgUrl: '',
       passForm: {
         carNumber: '' // 车牌号
       },
@@ -703,20 +708,28 @@ export default {
         chapter('出门证专用章', '安徽送变电工程有限公司机具（物流）分公司')
       }, 500)
       this.showPass = true
+      this.showImg = false
       const passArray = row.maTypeNames.split(',')
       this.passContent = passArray.slice(0, 3).join(',')
       const date = new Date(row.confirmTime || Date.now())
       this.passTime = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
     },
     printPass() {
-      //   this.$refs.remarksPrintRefPass.print()
+      this.showImg = true
-      // /passId
+      const canvas = document.getElementById('canvas')
-      printJS({
+      this.canvasImgUrl = canvas.toDataURL('image/png') // base64 图像
-        printable: 'passId',
+      this.$nextTick(() => {
-        type: 'html',
+        this.$refs.remarksPrintRefPass.print()
-        targetStyles: ['*'],
+        this.showImg = false
-        maxWidth: '900'
       })
+      // /passId
+      // printJS({
+      //   printable: 'passId',
+      //   type: 'html',
+      //   targetStyles: ['*'],
+      //   scanStyles: true
+      // })
+      
     },
     handleDialogClose() {
       this.showPass = false

src/views/material/lease/materialConfirm/index.vue

@@ -75,7 +75,7 @@
       </el-table-column>
 
       <el-table-column
-        label="申请数量"
+        label="发布数量"
         align="center"
         prop="preCountNum"
         width="80px"