han

hanfei / VueSharedPrinting

Browse code han master
1 parent a7951d7 commit 217bd0683a82b94535478dbe47fe2c1750f3f116 hanfei authored on 17 Feb

Patch

Showing 4 changed files

Ignore Space Show notes View src/views/complete.vue
<template> <!--打印完成--> <div class="complete"> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-margin-right': isVertical }]"> <img src="../assets/complete.png" alt="" /> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请从出纸口取走您的文件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt="" /> <span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/Thank4UseWelComeback.mp3" />--> <!-- </audio>--> </div> </template> <script> export default { name: 'complete', data() { return { num: 0, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, mounted() { // this.play() this.num = 0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if (n == -1) { return } else if (n < 10) { this.num = n + 1 setTimeout(() => { this.load() }, 1000) } else { // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, play() { this.$refs.audio.play() } } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .vertical-box { height: 90rem !important; width: 90%; justify-content: space-around; flex-direction: column; } .vertical-margin-right { margin-right: 0 !important; } </style> <template> <!--打印完成--> <div class="complete"> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-margin-right': isVertical }]"> <img src="../assets/complete.png" alt="" /> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请从出纸口取走您的文件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt="" /> <span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/Thank4UseWelComeback.mp3" />--> <!-- </audio>--> </div> </template> <script> export default { name: 'complete', data() { return { num: 0, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if (n == -1) { return } else if (n < 10) { this.num = n + 1 setTimeout(() => { this.load() }, 1000) } else { // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, play() { this.$refs.audio.play() } } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .vertical-box { height: 90rem !important; width: 90%; justify-content: space-around; flex-direction: column; } .vertical-margin-right { margin-right: 0 !important; } </style>

Ignore Space Show notes View

src/views/complete.vue

<template>
  
  <div class="complete">
    <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]">
      <div :class="['left', { 'vertical-margin-right': isVertical }]">
        <img src="../assets/complete.png" alt="" />
        <div>打印完成</div>
        <div>感谢您使用天章自助打印服务</div>
      </div>
      <div class="right">
        <div class="title flex-center">温馨提示</div>
        <div class="content">请从出纸口取走您的文件，并带齐您的资料和所有随身物品。</div>
        <div class="tip" v-show="false">
          <div>本次打印您将获得：</div>
          <div class="flex-center">
            <img src="../assets/points.png" alt="" />
            <span>28积分</span>
          </div>
        </div>
        <div class="btn flex-center" @click="skip('device')">回到首页</div>
      </div>
    </div>



  </div>
</template>

Ignore Space Show notes View src/views/expense.vue
<template> <!-- 费用支付--> <div class="expense"> <navbar :name="name" /> <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]"> <div :class="['left', { 'vertical-box': isVertical }]"> <div class="title">温馨提示</div> <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div> </div> <div :class="['right', { 'vertical-box': isVertical }]"> <div class="code"> <VueQr v-if="appSrc != ''" :logo-src="require('@/assets/logo.png')" :logoScale="0.2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" ></VueQr> </div> <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/Remind2Pay.mp3" autoplay />--> <!-- </audio>--> </div> </template> <script> import navbar from '@/components/nav' // import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import { downloadPDF, getPrintTask } from '../api/resultApi' import VueQr from 'vue-qr' import bdRequest from '../utils/bdRequest' import alert from "@/utils/alert"; import {bdPlayAudio} from "../api/bdResultApi"; export default { name: 'expense', components: { navbar, VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { code: '20240104231724631239-0', copies: 1, printFileId: 112, printFileType: 'PDF', printingColor: 'BW', printingFaces: 'SINGLE' }, isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id, name) { downloadPDF({ id: id }) .then(res => { const fileName = name const blob = new Blob([res], { type: 'application/octet-stream' }) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(error => {alert(error,this)}) }, async dayin() { let _this = this let { listData, selectedFile } = _this let i = '', deta = '' selectedFile.forEach((item, index) => { if (listData.printFileId == item.id) { i = index deta = item } }) await this.downloadPDF(listData.printFileId, listData.printFileName) console.log('打印', deta, listData.copies) setTimeout(() => { _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { PrinterName: 'EPSON WF-C5890 Series', // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, SourceFile: 'C:\\datasource\\' + listData.printFileName, FileType: 'pdf', PrintColor: listData.printingColor \|\| '', DblPrt: listData.printingFaces \|\| '' } }) console.log(res) setTimeout(() => { if (_this.selectedFile.length > 0) { _this.getPrintTask() } else { _this.cite.orderId = '' _this.skip('complete', _this.name) } }, 1000) }, 2000) }, async getPrintTask() { let _this = this if (_this.cite.orderId) { let res = await getPrintTask({ orderId: _this.cite.orderId }) console.log(res, 'getPrintTask数据') if (res) { _this.listData = res _this.dayin() } else { setTimeout(() => { _this.getPrintTask() }, 1000) } } }, load() { let _this = this setTimeout(() => { _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) }, 800) // getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => { // // console.log(res.data.qrCode) // if(res.qrCode) { // // _this.appSrc = res.qrCode // // _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) // // 循环查询是否需要调打印 // // setTimeout(() =>{ // // // _this.dayin() // // _this.getPrintTask() // // },1000) // } // }) }, countDown() { if (this.$route.name == 'expense') { let num = this.num if (num == 0) { this.quit() return } else if (num > 0) { setTimeout(() => { this.num = num - 1 this.countDown() }, 1000) } } }, play() { // this.$refs.audio.play() bdPlayAudio({fileName: 'Remind2Pay'}).then(res => { console.log('音频触发', res) }) } }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, created() { this.isVertical = this.cite.isVertical }, mounted() { // this.play() this.num = 120 this.countDown() this.load() } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #ffffff; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } .vertical-box { width: 80% !important; height: 35rem !important; } .vertical-box-colum { height: 90rem; flex-direction: column-reverse; justify-content: space-around; align-items: center; } </style> <template> <!-- 费用支付--> <div class="expense"> <navbar :name="name" /> <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]"> <div :class="['left', { 'vertical-box': isVertical }]"> <div class="title">温馨提示</div> <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div> </div> <div :class="['right', { 'vertical-box': isVertical }]"> <div class="code"> <VueQr v-if="appSrc != ''" :logo-src="require('@/assets/logo.png')" :logoScale="0.2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" ></VueQr> </div> <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/Remind2Pay.mp3" autoplay />--> <!-- </audio>--> </div> </template> <script> import navbar from '@/components/nav' // import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import { downloadPDF, getPrintTask } from '../api/resultApi' import VueQr from 'vue-qr' import bdRequest from '../utils/bdRequest' import alert from "@/utils/alert"; import {bdPlayAudio} from "../api/bdResultApi"; export default { name: 'expense', components: { navbar, VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { code: '20240104231724631239-0', copies: 1, printFileId: 112, printFileType: 'PDF', printingColor: 'BW', printingFaces: 'SINGLE' }, isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id, name) { downloadPDF({ id: id }) .then(res => { const fileName = name const blob = new Blob([res], { type: 'application/octet-stream' }) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(error => {alert(error,this)}) }, async dayin() { let _this = this let { listData, selectedFile } = _this let i = '', deta = '' selectedFile.forEach((item, index) => { if (listData.printFileId == item.id) { i = index deta = item } }) await this.downloadPDF(listData.printFileId, listData.printFileName) console.log('打印', deta, listData.copies) setTimeout(() => { _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { PrinterName: 'EPSON WF-C5890 Series', // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, SourceFile: 'C:\\datasource\\' + listData.printFileName, FileType: 'pdf', PrintColor: listData.printingColor \|\| '', DblPrt: listData.printingFaces \|\| '' } }) console.log(res) setTimeout(() => { if (_this.selectedFile.length > 0) { _this.getPrintTask() } else { _this.cite.orderId = '' _this.skip('complete', _this.name) } }, 1000) }, 2000) }, async getPrintTask() { let _this = this if (_this.cite.orderId) { let res = await getPrintTask({ orderId: _this.cite.orderId }) console.log(res, 'getPrintTask数据') if (res) { _this.listData = res _this.dayin() } else { setTimeout(() => { _this.getPrintTask() }, 1000) } } }, load() { let _this = this setTimeout(() => { _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) }, 800) // getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => { // // console.log(res.data.qrCode) // if(res.qrCode) { // // _this.appSrc = res.qrCode // // _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) // // 循环查询是否需要调打印 // // setTimeout(() =>{ // // // _this.dayin() // // _this.getPrintTask() // // },1000) // } // }) }, countDown() { if (this.$route.name == 'expense') { let num = this.num if (num == 0) { this.quit() return } else if (num > 0) { setTimeout(() => { this.num = num - 1 this.countDown() }, 1000) } } }, play() { // this.$refs.audio.play() bdPlayAudio({fileName: 'Remind2Pay'}).then(res => { console.log('音频触发', res) }) } }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 120 this.countDown() this.load() } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #ffffff; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } .vertical-box { width: 80% !important; height: 35rem !important; } .vertical-box-colum { height: 90rem; flex-direction: column-reverse; justify-content: space-around; align-items: center; } </style>

Ignore Space Show notes View

src/views/expense.vue

<template>
  
  <div class="expense">
    <navbar :name="name" />
    <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]">
      <div :class="['left', { 'vertical-box': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div>
      </div>
      <div :class="['right', { 'vertical-box': isVertical }]">
        <div class="code">
          <VueQr
            v-if="appSrc != ''"
            :logo-src="require('@/assets/logo.png')"
            :logoScale="0.2"
            :logoMargin="0"
            logoBackgroundColor="white"
            :size="300"
            :margin="0"
            :auto-color="true"
            :dot-scale="1"
            :text="appSrc"
          ></VueQr>
        </div>
        <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div>
      </div>
    </div>



  </div>
</template>

export default {
  name: 'expense',
  components: {
    navbar,
    VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      appSrc: '',
      client: '',
      num: 120,

selectedFile: this.cite.selectedFile,
      listData: {
        code: '20240104231724631239-0',
        copies: 1,
        printFileId: 112,
        printFileType: 'PDF',
        printingColor: 'BW',
        printingFaces: 'SINGLE'
      },
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id, name) {
      downloadPDF({ id: id })
        .then(res => {
          const fileName = name
          const blob = new Blob([res], { type: 'application/octet-stream' })
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            let link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          }
        }).catch(error => {alert(error,this)})
    },
    async dayin() {
      let _this = this
      let { listData, selectedFile } = _this
      let i = '',
        deta = ''
      selectedFile.forEach((item, index) => {
        if (listData.printFileId == item.id) {
          i = index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId, listData.printFileName)
      console.log('打印', deta, listData.copies)
      setTimeout(() => {
        _this.selectedFile.splice(i, 1)
        // 按份数循环打印
        // for(let i=0;i<listData.copies;i++) {
        // }

let res = bdRequest({
          method: 'post',
          url: '/api/Printer/Print',
          post: '8080',
          data: {
            PrinterName: 'EPSON WF-C5890 Series',
            // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
            SourceFile: 'C:\\datasource\\' + listData.printFileName,
            FileType: 'pdf',
            PrintColor: listData.printingColor || '',
            DblPrt: listData.printingFaces || ''
          }
        })
        console.log(res)

setTimeout(() => {
          if (_this.selectedFile.length > 0) {
            _this.getPrintTask()
          } else {
            _this.cite.orderId = ''
            _this.skip('complete', _this.name)
          }
        }, 1000)
      }, 2000)
    },
    async getPrintTask() {
      let _this = this
      if (_this.cite.orderId) {
        let res = await getPrintTask({ orderId: _this.cite.orderId })
        console.log(res, 'getPrintTask数据')
        if (res) {
          _this.listData = res
          _this.dayin()
        } else {
          setTimeout(() => {
            _this.getPrintTask()
          }, 1000)
        }
      }
    },
    load() {
      let _this = this

setTimeout(() => {
        _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      }, 800)

// getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => {
      //   // console.log(res.data.qrCode)
      //   if(res.qrCode) {
      //     // _this.appSrc = res.qrCode
      //
      //     _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      //     // 循环查询是否需要调打印
      //     // setTimeout(() =>{
      //     //   // _this.dayin()
      //     //   _this.getPrintTask()
      //     // },1000)
      //   }
      // })
    },
    countDown() {
      if (this.$route.name == 'expense') {
        let num = this.num
        if (num == 0) {
          this.quit()
          return
        } else if (num > 0) {
          setTimeout(() => {
            this.num = num - 1
            this.countDown()
          }, 1000)
        }
      }
    },
    play() {
      // this.$refs.audio.play()
      bdPlayAudio({fileName: 'Remind2Pay'}).then(res => {
        console.log('音频触发', res)
      })
    }
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
    this.num = -1
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    // this.play()
    this.num = 120
    this.countDown()
    this.load()
  }
}
</script>

setTimeout(() => {
        _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      }, 800)

// getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => {
      //   // console.log(res.data.qrCode)
      //   if(res.qrCode) {
      //     // _this.appSrc = res.qrCode
      //
      //     _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      //     // 循环查询是否需要调打印
      //     // setTimeout(() =>{
      //     //   // _this.dayin()
      //     //   _this.getPrintTask()
      //     // },1000)
      //   }
      // })
    },
    countDown() {
      if (this.$route.name == 'expense') {
        let num = this.num
        if (num == 0) {
          this.quit()
          return
        } else if (num > 0) {
          setTimeout(() => {
            this.num = num - 1
            this.countDown()
          }, 1000)
        }
      }
    },
    play() {
      // this.$refs.audio.play()
      bdPlayAudio({fileName: 'Remind2Pay'}).then(res => {
        console.log('音频触发', res)
      })
    }
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
    this.num = -1
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    this.play()
    this.num = 120
    this.countDown()
    this.load()
  }
}
</script>

Ignore Space Show notes View src/views/operationGuide.vue
<template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name" /> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div class="picture" v-show="name == 'U盘打印'"> <img class="icon" src="../assets/typeUp.png" /> <div class="flex-between name"> <div>U盘</div> <div>USB接口</div> </div> </div> <div class="picture" v-show="name == '扫描打印'"> <img src="../assets/typeSMFY.png" :class="[{ 'vertical-img-margin': isVertical }]" /> </div> <div class="picture" v-show="name == '身份证打印'"> <img src="../assets/typeSFZ.png" :class="[{ 'vertical-img-margin': isVertical }]" /> </div> <div :class="['tip', { 'vertical-bottom-btn': isVertical }]"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile', name)">{{ btnName }}</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/IdCardReaderGuide.mp3" autoplay />--> <!-- </audio>--> </div> </template> <script> import navbar from '@/components/nav' import {bdPlayAudio} from "../api/bdResultApi"; export default { name: 'operationGuide', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, content: '', btnName: '', isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, play(addr) { console.log(addr) let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() }, playYp(name) { if(true) { return false } bdPlayAudio({fileName: name}).then(res => { console.log('音频触发', res) }) }, }, created() { this.isVertical = this.cite.isVertical }, mounted() { let name = this.cite.modeName if (name == 'U盘打印') { this.content = '如图所示，请先将存放打印资料的U盘插入打印终端机器上标记有"USB"字样的接口中，确认正确插入后，请按下面的“选取文件”按钮开始选取需要打印的资料。' this.btnName = '选取文件' this.playYp('Remind4PluginUSB') } else if (name == '扫描打印') { this.content = '如左图所示，请先把需要扫码的资料页面展开，将需要的版面朝上放置在机器的“扫描复印”口中，并保持页面纸张靠格口右上角紧贴放好，这时您可以在实时预览小窗中查看并确认是否是自己需要的版面。确认无误后，请按下面的“开始扫描”按钮开始资料的扫描。' this.btnName = '开始扫描' } else if (name == '身份证打印') { this.content = '身份证件信息已读取成功。请您核对个人信息确认无误后，按“信息无读，继续提按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。' this.btnName = '开始读卡' this.playYp('ldCardReaderGuide') // this.$refs.audio.play() // this.speackFont('您好，请先将身份证水平放置在机器的“身份证”读卡窗口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。') } } } </script> <style scoped lang="less"> .operationGuide { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .picture { margin-left: 4.75rem; img { width: 29.06rem; margin-left: 11.81rem; } .icon { margin-left: 0; width: 56rem; margin-bottom: 2.69rem; } .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; div { width: 30%; text-align: center; } } } .tip { margin-right: 7.81rem; width: 40rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 3.69rem; text-align: center; } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } } } .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-img-margin { margin-left: 0 !important; } </style> <template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name" /> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div class="picture" v-show="name == 'U盘打印'"> <img class="icon" src="../assets/typeUp.png" /> <div class="flex-between name"> <div>U盘</div> <div>USB接口</div> </div> </div> <div class="picture" v-show="name == '扫描打印'"> <img src="../assets/typeSMFY.png" :class="[{ 'vertical-img-margin': isVertical }]" /> </div> <div class="picture" v-show="name == '身份证打印'"> <img src="../assets/typeSFZ.png" :class="[{ 'vertical-img-margin': isVertical }]" /> </div> <div :class="['tip', { 'vertical-bottom-btn': isVertical }]"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile', name)">{{ btnName }}</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/IdCardReaderGuide.mp3" autoplay />--> <!-- </audio>--> </div> </template> <script> import navbar from '@/components/nav' import {bdPlayAudio} from "../api/bdResultApi"; export default { name: 'operationGuide', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, content: '', btnName: '', isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, play(addr) { console.log(addr) let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() }, playYp(name) { bdPlayAudio({fileName: name}).then(res => { console.log('音频触发', res) }) }, }, created() { this.isVertical = this.cite.isVertical }, mounted() { let name = this.cite.modeName if (name == 'U盘打印') { this.content = '如图所示，请先将存放打印资料的U盘插入打印终端机器上标记有"USB"字样的接口中，确认正确插入后，请按下面的“选取文件”按钮开始选取需要打印的资料。' this.btnName = '选取文件' this.playYp('Remind4PluginUSB') } else if (name == '扫描打印') { this.content = '如左图所示，请先把需要扫码的资料页面展开，将需要的版面朝上放置在机器的“扫描复印”口中，并保持页面纸张靠格口右上角紧贴放好，这时您可以在实时预览小窗中查看并确认是否是自己需要的版面。确认无误后，请按下面的“开始扫描”按钮开始资料的扫描。' this.btnName = '开始扫描' } else if (name == '身份证打印') { this.content = '身份证件信息已读取成功。请您核对个人信息确认无误后，按“信息无读，继续提按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。' this.btnName = '开始读卡' this.playYp('ldCardReaderGuide') // this.$refs.audio.play() // this.speackFont('您好，请先将身份证水平放置在机器的“身份证”读卡窗口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。') } } } </script> <style scoped lang="less"> .operationGuide { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .picture { margin-left: 4.75rem; img { width: 29.06rem; margin-left: 11.81rem; } .icon { margin-left: 0; width: 56rem; margin-bottom: 2.69rem; } .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; div { width: 30%; text-align: center; } } } .tip { margin-right: 7.81rem; width: 40rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 3.69rem; text-align: center; } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } } } .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-img-margin { margin-left: 0 !important; } </style>

Ignore Space Show notes View

src/views/operationGuide.vue

<template>
  
  <div class="operationGuide">
    <navbar :name="name" />
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div class="picture" v-show="name == 'U盘打印'">
        <img class="icon" src="../assets/typeUp.png" />
        <div class="flex-between name">
          <div>U盘</div>
          <div>USB接口</div>
        </div>
      </div>
      <div class="picture" v-show="name == '扫描打印'">
        <img src="../assets/typeSMFY.png" :class="[{ 'vertical-img-margin': isVertical }]" />
      </div>
      <div class="picture" v-show="name == '身份证打印'">
        <img src="../assets/typeSFZ.png" :class="[{ 'vertical-img-margin': isVertical }]" />
      </div>
      <div :class="['tip', { 'vertical-bottom-btn': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile', name)">{{ btnName }}</div>
      </div>
    </div>



  </div>
</template>

this.playYp('ldCardReaderGuide')
      // this.$refs.audio.play()
      // this.speackFont('您好，请先将身份证水平放置在机器的“身份证”读卡窗口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。')
    }
  }
}
</script>

Ignore Space Show notes View src/views/selectFile.vue
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'"> <div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem"> <div class="title">温馨提示</div> <div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div> </div> <div :class="['file', { 'vertical-margin-left': isVertical }]"> <div class="main" style="width: 50rem"> <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start"> <input type="checkbox" v-model="item.sta" /> <div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'"> <div :class="['file2', { 'vertical-margin-right': isVertical }]"> <div class="title flex-between"> 已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span> </div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" /> <img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对，不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'"> <div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem"> <div class="title">请核对您的信息</div> <div class="card" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq }}-{{ cardInfo.expireDate \| joinRq }}</div> </div> </div> </div> <div> <div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq }}-{{ cardInfo.expireDate \| joinRq }}</div> </div> </div> </div> </div> </div> <!-- <canvas id="sfzCanvas" width="640" height="900" ref="sfzCanvas" style="position: fixed;left: 100%;top: 100%;"></canvas>--> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/FileformatTransforming.mp3" /> </audio> <div v-if="dialogVisible && name === 'U盘打印'"> <div class="mask" style="width: 100%; height: 100%" @click="dialogVisible = false"> <div class="content" style="background-color: #fff; width: 70%; height: 35rem"> <div class="content-header">预览</div> <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%;resize: none;"></iframe> </div> </div> </div> <div v-if="IsPreviewImg && name === '扫描打印'"> <div class="previewImg" style="width: 100%; height: 100%; background-color: black" @click="IsPreviewImg = false"> <img :src="previewImgs" alt="" style="width: 39rem; height: 53.9rem" /> </div> </div> <div class="dyzTip" v-if="dyzTip"> <div class="curtain"></div> <div class="content"> <div class="flex-center">高拍仪检测异常信息提示</div> <div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;"> 尊敬的用户您好，抱歉地通知您，系统检测到高拍仪提供的扫描打印服务状态异常，我们准备随机重启计算机来恢复扫描打印功能，请您稍后等计算机重启后重新尝试扫描打印功能，谢谢！ </div> <div class="flex-between" style="margin: 4rem 2rem 0;"> <div class="btn flex-center" @click="tikChange(0)">返回首页</div> <div class="btn flex-center" @click="tikChange(1)">立即重启</div> </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import JsPDF from 'jspdf' import {changeIdPhotoBgc, images2Pdf, upload2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard, readFile2, shutdown} from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' import html2Canvas from "html2canvas"; import alert from "@/utils/alert"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if (val.substring(4, 5) == 0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if (val.substring(6, 7) == 0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4) + '.' + val.substring(4, 6) + '.' + val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '', usbNum: 0, isVertical: false, dialogVisible: false, pdfUrl: '', IsPreviewImg: false, previewImgs: '', canvasData: '', dyzTip: false, cftjSta: false, //重复提交状态 } }, created() { this.isVertical = this.cite.isVertical }, methods: { getPdf(title,id){ let _this = this html2Canvas(document.querySelector(`#${id}`), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } // 删除本地存储的base64字段 let pdfData = PDF.output('datauristring')//获取base64Pdf // console.log('pdfData', pdfData) let file = _this.dataURLtoFile(pdfData,'zjz.pdf') // console.log('222',file) _this.uploadImg([file],false) // return pdfData // 导出PDF文件 // PDF.save(title + '.pdf') }) }, // 导出pdf async exportPDF() { let _this = this _this.getPdf('证件照', 'captureArea'); }, async uploadImg(data, sta) { let _this = this _this.cite.loadingSta = { sta: true, name: '正在转码，请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) let forData = new FormData() let j = data.length _this.usbNum = j for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if (this.cite.modeName == '身份证打印') { // let res = await image2Pdf(formData) let res = await upload2Pdf(formData).catch(error => {alert(error,this)}) // console.log(res) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) if (_this.usbNum == i + 1) { // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } } else { forData.append('images', file) // let res = await upload2Pdf(formData) // _this.cite.selectedFile.push(res) // if(_this.usbNum == i+1) { // // 转码结束 // _this.cite.loadingSta = { // sta: false, // } // _this.$router.push({ // name: 'argument', // }) // } // console.log('打印文件', this.cite.selectedFile, res) } } if (this.name == '扫描打印') { let res = await images2Pdf(forData).catch(error => {alert(error,this)}) _this.cite.selectedFile.push(res) // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } }, async readPDF(url) { // 请求接口 //将文件转为pdf const res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) if (res.data.previewPath) { this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0' this.dialogVisible = true } // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf' }, // 预览图片 previewImg(url) { this.previewImgs = url this.IsPreviewImg = true }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) console.log('u盘') await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { if(this.cftjSta) { this.cite.state = { name: '请勿重复提交！', sta: true } return }else if (this.photo) { this.cftjSta = true setTimeout(()=>{ this.cftjSta = false },3000) // 保存身份证图片 await this.exportPDF() } else { this.cite.state = { name: '正在加载，请稍后！', sta: true } return } // await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印！', sta: true } return } console.log(href, name) // this.$router.push({ // name: href, // params: { // name: name // } // }) }, async captureAndDownload() { // const captureArea = this.$refs.sfzCanvas const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 1 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) console.log(canvas) // 将 canvas 转为图片 URL canvas.toBlob((blob) => { // blob将base64编码的src 以二进制的形式存进了 Blob对象 const a = document.createElement("a"); a.download = "证书.png"; a.href = window.URL.createObjectURL(blob); a.click(); console.log(blob); }, "image/png"); const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) console.log(file) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error this.socket.onclose = this.onljgb // 连接关闭时触发 // 监听socket消息 this.socket.onmessage = this.getMessage } }, onljgb: function () { console.log('连接关闭') // this.init() }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') // this.dyzTip = true }, getMessage: function (msg) { // console.log(msg,msg.data) if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s \|\| '2' == s) { //如果是双摄像头那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@\|\|') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result document.getElementById('myCanvas').src = url } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, tikChange(i) { if(i==1) { shutdown().catch(error => {alert(error,this)}) }else{ this.quit() } }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, dwhs(n) { return n }, canvasSfz() { let _this = this let {cardInfo} = _this const canvas = document.getElementById('sfzCanvas') // const canvas = this.$refs.sfzCanvas; const ctx = canvas.getContext('2d'); // 在 Canvas 上进行绘图操作 ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 在Canvas画布添加图片 let img = new Image() img.src = require('@/assets/card2.png') img.onload = () => { ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(24)+"px OCR" // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式 ctx.textBaseline = 'middle' ctx.fontWeight = '100' ctx.fillStyle = "#333" ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120)) ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120)) let name = cardInfo.address let num = 11 let w = ctx.measureText(cardInfo.address).width if(w>_this.dwhs(500)) { ctx.fillText(name, _this.dwhs(20), _this.dwhs(345)) }else{ let t1 = name.substring(0, num); let t2 = name.substring(num); ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220)) ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255)) } ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65)) ctx.font = _this.dwhs(26)+"px OCR" ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170)) if (cardInfo.birthday.substring(4, 5) == 0) { ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170)) } if (cardInfo.birthday.substring(6, 7) == 0) { ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170)) } let img2 = new Image() // img2.src = _this.photo img2.src = require('@/assets/card1.png') img2.onload = () => { ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238)) let img3 = new Image() img3.src = require('@/assets/card1.png') img3.onload = () => { ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797)) ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850)) ctx.fillText('-', _this.dwhs(405), _this.dwhs(848)) ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850)) canvas.style.letterSpacing = "2px"; ctx.font = _this.dwhs(32)+"px STHeiti" ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345)) // canvas.toBlob(function (blob) { // // 图片ajax上传 // _this.uploadImg([blob], false) // },'image/png'); } } } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { address: '地址', birthday: '日期1', effectDate: '日期2', expireDate: '日期3', gender: '1', idNum: '身份证', issueOrg: '寻乌县公安局', name: '名字', nation: '01', photo: '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' } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if (this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let _this = this let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then(res => { console.log(res) _this.photo = res.previewPath // this.canvasSfz() }).catch(error => {alert(error,this)}) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then(res => { // console.log(res) if (res) { if (this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re => { this.usbList.push({ name: re.name \|\| re, size: re.size, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }).catch(error => {alert(error,this)}) }, // 处理选中文件 async dealFile() { let { usbList } = this // 判断有没有选中u盘文件 let selectUsb = usbList.some(item => { return item.sta === true }) // 没有选中中断后续操作并提示 if (!selectUsb) { this.cite.state = { name: '请选中文件再点击确认资料', sta: true } return } this.cite.loadingSta = { sta: true, name: '正在转码，请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) await usbList.forEach((re, i) => { if (re.sta) { this.usbNum = i this.readFile(re.name, i, re.size) } }) }, async readFile(url, i, num) { if(parseFloat(num)>5000000) { let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) }else{ let res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) } if (this.usbNum == i) { // 转码结束 this.cite.loadingSta = { sta: false } this.$router.push({ name: 'argument' }) } }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, destroyed() { // 销毁监听 if (this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == '扫描打印') { this.init() } else if (this.cite.modeName == '身份证打印') { this.cftjSta = false this.sfzCard() // const addr = require('../assets/audio/IdCardReaderGuide.mp3') // this.play(addr) } else if (this.cite.modeName == 'U盘打印') { this.readUsb() // const addr = require('../assets/audio/Remind4PluginUSB.mp3') // this.play(addr) } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti'; //自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址 } @font-face { font-family: 'OCR'; //自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: 0.9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: 0.8rem; left: 8rem; letter-spacing: 0.2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.9rem 0 0.8rem; font-size: 0.85rem; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 9px; text-align: center; width: 1.25rem; margin-left: 0.5625rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 20px; left: 8.125rem; bottom: 1.25rem; font-size: 0.8rem; font-family: 'STHeiti'; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } .dyImg { position: fixed; top: 100%; left: 100%; margin: 0; //width: 40rem; //height: 70.8rem; width: 640px; height: 900px; padding: 300px 450px 0; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; right: 0; height: 100%; text-align: left; left: 7.5rem; font-size: 1.5rem; .name { font-family: 'STHeiti'; font-size: 28px; margin: 50px 0 20px; } .gender { div { margin-left: 100px; } } .birth { margin: 24px 0 22px; font-size: 26px; span { margin-right: 6px; } div { margin-left: 18px; width: 40px; text-align: center; } } .addr { width: 280px; line-height: 36px; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 92px; font-size: 32px; letter-spacing: 2px; bottom: 46px; } .avatar { position: absolute; right: 40px; width: 192px; top: 60px; } } .diamond2 { height: auto; top: auto; left: 260px; bottom: 36px; font-size: 28px; font-weight: 400; font-family: 'STHeiti'; .sign { margin-bottom: 25px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99; .content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); .content-header { margin-top: 1rem; } } } // 预览图片 .previewImg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; > img { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } } // 竖屏 .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; justify-content: space-around; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-margin-right { margin-right: 0 !important; } .vertical-margin-left { margin-left: 0 !important; } .vertical-tip-width { width: 32rem !important; } .vertical-tip-font { text-align: left !important; } .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -12rem; width: 38.56rem; height: 24rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 16rem; height: 3rem; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; cursor: pointer; } } } </style> <template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'"> <div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem"> <div class="title">温馨提示</div> <div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div> </div> <div :class="['file', { 'vertical-margin-left': isVertical }]"> <div class="main" style="width: 50rem"> <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start"> <input type="checkbox" v-model="item.sta" /> <div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'"> <div :class="['file2', { 'vertical-margin-right': isVertical }]"> <div class="title flex-between"> 已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span> </div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" /> <img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对，不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'"> <div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem"> <div class="title">请核对您的信息</div> <div class="card" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq }}-{{ cardInfo.expireDate \| joinRq }}</div> </div> </div> </div> <div> <div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday \| joinYear }}</span> <div>{{ cardInfo.birthday \| joinMonth }}</div> <div>{{ cardInfo.birthday \| joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate \| joinRq }}-{{ cardInfo.expireDate \| joinRq }}</div> </div> </div> </div> </div> </div> <!-- <canvas id="sfzCanvas" width="640" height="900" ref="sfzCanvas" style="position: fixed;left: 100%;top: 100%;"></canvas>--> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div> </div> </div> <!-- <audio ref="audio" class="aud">--> <!-- <source src="../assets/audio/FileformatTransforming.mp3" />--> <!-- </audio>--> <div v-if="dialogVisible && name === 'U盘打印'"> <div class="mask" style="width: 100%; height: 100%" @click="dialogVisible = false"> <div class="content" style="background-color: #fff; width: 70%; height: 35rem"> <div class="content-header">预览</div> <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%;resize: none;"></iframe> </div> </div> </div> <div v-if="IsPreviewImg && name === '扫描打印'"> <div class="previewImg" style="width: 100%; height: 100%; background-color: black" @click="IsPreviewImg = false"> <img :src="previewImgs" alt="" style="width: 39rem; height: 53.9rem" /> </div> </div> <div class="dyzTip" v-if="dyzTip"> <div class="curtain"></div> <div class="content"> <div class="flex-center">高拍仪检测异常信息提示</div> <div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;"> 尊敬的用户您好，抱歉地通知您，系统检测到高拍仪提供的扫描打印服务状态异常，我们准备随机重启计算机来恢复扫描打印功能，请您稍后等计算机重启后重新尝试扫描打印功能，谢谢！ </div> <div class="flex-between" style="margin: 4rem 2rem 0;"> <div class="btn flex-center" @click="tikChange(0)">返回首页</div> <div class="btn flex-center" @click="tikChange(1)">立即重启</div> </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import JsPDF from 'jspdf' import {changeIdPhotoBgc, images2Pdf, upload2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard, readFile2, shutdown} from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' import html2Canvas from "html2canvas"; import alert from "@/utils/alert"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if (val.substring(4, 5) == 0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if (val.substring(6, 7) == 0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4) + '.' + val.substring(4, 6) + '.' + val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '', usbNum: 0, isVertical: false, dialogVisible: false, pdfUrl: '', IsPreviewImg: false, previewImgs: '', canvasData: '', dyzTip: false, cftjSta: false, //重复提交状态 } }, created() { this.isVertical = this.cite.isVertical }, methods: { getPdf(title,id){ let _this = this html2Canvas(document.querySelector(`#${id}`), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } // 删除本地存储的base64字段 let pdfData = PDF.output('datauristring')//获取base64Pdf // console.log('pdfData', pdfData) let file = _this.dataURLtoFile(pdfData,'zjz.pdf') // console.log('222',file) _this.uploadImg([file],false) // return pdfData // 导出PDF文件 // PDF.save(title + '.pdf') }) }, // 导出pdf async exportPDF() { let _this = this _this.getPdf('证件照', 'captureArea'); }, async uploadImg(data, sta) { let _this = this _this.cite.loadingSta = { sta: true, name: '正在转码，请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) let forData = new FormData() let j = data.length _this.usbNum = j for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if (this.cite.modeName == '身份证打印') { // let res = await image2Pdf(formData) let res = await upload2Pdf(formData).catch(error => {alert(error,this)}) // console.log(res) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) if (_this.usbNum == i + 1) { // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } } else { forData.append('images', file) // let res = await upload2Pdf(formData) // _this.cite.selectedFile.push(res) // if(_this.usbNum == i+1) { // // 转码结束 // _this.cite.loadingSta = { // sta: false, // } // _this.$router.push({ // name: 'argument', // }) // } // console.log('打印文件', this.cite.selectedFile, res) } } if (this.name == '扫描打印') { let res = await images2Pdf(forData).catch(error => {alert(error,this)}) _this.cite.selectedFile.push(res) // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } }, async readPDF(url) { // 请求接口 //将文件转为pdf const res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) if (res.data.previewPath) { this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0' this.dialogVisible = true } // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf' }, // 预览图片 previewImg(url) { this.previewImgs = url this.IsPreviewImg = true }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) console.log('u盘') await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { if(this.cftjSta) { this.cite.state = { name: '请勿重复提交！', sta: true } return }else if (this.photo) { this.cftjSta = true setTimeout(()=>{ this.cftjSta = false },3000) // 保存身份证图片 await this.exportPDF() } else { this.cite.state = { name: '正在加载，请稍后！', sta: true } return } // await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印！', sta: true } return } console.log(href, name) // this.$router.push({ // name: href, // params: { // name: name // } // }) }, async captureAndDownload() { // const captureArea = this.$refs.sfzCanvas const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 1 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) console.log(canvas) // 将 canvas 转为图片 URL canvas.toBlob((blob) => { // blob将base64编码的src 以二进制的形式存进了 Blob对象 const a = document.createElement("a"); a.download = "证书.png"; a.href = window.URL.createObjectURL(blob); a.click(); console.log(blob); }, "image/png"); const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) console.log(file) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error this.socket.onclose = this.onljgb // 连接关闭时触发 // 监听socket消息 this.socket.onmessage = this.getMessage } }, onljgb: function () { console.log('连接关闭') // this.init() }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') // this.dyzTip = true }, getMessage: function (msg) { // console.log(msg,msg.data) if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s \|\| '2' == s) { //如果是双摄像头那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@\|\|') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result document.getElementById('myCanvas').src = url } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, tikChange(i) { if(i==1) { shutdown().catch(error => {alert(error,this)}) }else{ this.quit() } }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, dwhs(n) { return n }, canvasSfz() { let _this = this let {cardInfo} = _this const canvas = document.getElementById('sfzCanvas') // const canvas = this.$refs.sfzCanvas; const ctx = canvas.getContext('2d'); // 在 Canvas 上进行绘图操作 ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 在Canvas画布添加图片 let img = new Image() img.src = require('@/assets/card2.png') img.onload = () => { ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(24)+"px OCR" // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式 ctx.textBaseline = 'middle' ctx.fontWeight = '100' ctx.fillStyle = "#333" ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120)) ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120)) let name = cardInfo.address let num = 11 let w = ctx.measureText(cardInfo.address).width if(w>_this.dwhs(500)) { ctx.fillText(name, _this.dwhs(20), _this.dwhs(345)) }else{ let t1 = name.substring(0, num); let t2 = name.substring(num); ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220)) ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255)) } ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65)) ctx.font = _this.dwhs(26)+"px OCR" ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170)) if (cardInfo.birthday.substring(4, 5) == 0) { ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170)) } if (cardInfo.birthday.substring(6, 7) == 0) { ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170)) } let img2 = new Image() // img2.src = _this.photo img2.src = require('@/assets/card1.png') img2.onload = () => { ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238)) let img3 = new Image() img3.src = require('@/assets/card1.png') img3.onload = () => { ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797)) ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850)) ctx.fillText('-', _this.dwhs(405), _this.dwhs(848)) ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850)) canvas.style.letterSpacing = "2px"; ctx.font = _this.dwhs(32)+"px STHeiti" ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345)) // canvas.toBlob(function (blob) { // // 图片ajax上传 // _this.uploadImg([blob], false) // },'image/png'); } } } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { address: '江西省赣州市寻乌县长宁镇镇山路14号402室', birthday: '19960515', effectDate: '20231010', expireDate: '20431010', gender: '1', idNum: '360734199605150074', issueOrg: '寻乌县公安局', name: '韩菲', nation: '01', photo: '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' } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if (this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let _this = this let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then(res => { console.log(res) _this.photo = res.previewPath // this.canvasSfz() }).catch(error => {alert(error,this)}) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then(res => { // console.log(res) if (res) { if (this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re => { this.usbList.push({ name: re.name \|\| re, size: re.size, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }).catch(error => {alert(error,this)}) }, // 处理选中文件 async dealFile() { let { usbList } = this // 判断有没有选中u盘文件 let selectUsb = usbList.some(item => { return item.sta === true }) // 没有选中中断后续操作并提示 if (!selectUsb) { this.cite.state = { name: '请选中文件再点击确认资料', sta: true } return } this.cite.loadingSta = { sta: true, name: '正在转码，请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) await usbList.forEach((re, i) => { if (re.sta) { this.usbNum = i this.readFile(re.name, i, re.size) } }) }, async readFile(url, i, num) { if(parseFloat(num)>5000000) { let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) }else{ let res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) } if (this.usbNum == i) { // 转码结束 this.cite.loadingSta = { sta: false } this.$router.push({ name: 'argument' }) } }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, destroyed() { // 销毁监听 if (this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == '扫描打印') { this.init() } else if (this.cite.modeName == '身份证打印') { this.cftjSta = false const addr = require('../assets/audio/IdCardReaderGuide.mp3') this.play(addr) this.sfzCard() } else if (this.cite.modeName == 'U盘打印') { this.readUsb() const addr = require('../assets/audio/Remind4PluginUSB.mp3') this.play(addr) } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti'; //自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址 } @font-face { font-family: 'OCR'; //自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: 0.9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: 0.8rem; left: 8rem; letter-spacing: 0.2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.9rem 0 0.8rem; font-size: 0.85rem; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 9px; text-align: center; width: 1.25rem; margin-left: 0.5625rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 20px; left: 8.125rem; bottom: 1.25rem; font-size: 0.8rem; font-family: 'STHeiti'; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } .dyImg { position: fixed; top: 100%; left: 100%; margin: 0; //width: 40rem; //height: 70.8rem; width: 640px; height: 900px; padding: 300px 450px 0; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; right: 0; height: 100%; text-align: left; left: 7.5rem; font-size: 1.5rem; .name { font-family: 'STHeiti'; font-size: 28px; margin: 50px 0 20px; } .gender { div { margin-left: 100px; } } .birth { margin: 24px 0 22px; font-size: 26px; span { margin-right: 6px; } div { margin-left: 18px; width: 40px; text-align: center; } } .addr { width: 280px; line-height: 36px; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 92px; font-size: 32px; letter-spacing: 2px; bottom: 46px; } .avatar { position: absolute; right: 40px; width: 192px; top: 60px; } } .diamond2 { height: auto; top: auto; left: 260px; bottom: 36px; font-size: 28px; font-weight: 400; font-family: 'STHeiti'; .sign { margin-bottom: 25px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99; .content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); .content-header { margin-top: 1rem; } } } // 预览图片 .previewImg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; > img { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } } // 竖屏 .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; justify-content: space-around; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-margin-right { margin-right: 0 !important; } .vertical-margin-left { margin-left: 0 !important; } .vertical-tip-width { width: 32rem !important; } .vertical-tip-font { text-align: left !important; } .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -12rem; width: 38.56rem; height: 24rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 16rem; height: 3rem; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; cursor: pointer; } } } </style>

Ignore Space Show notes View

src/views/selectFile.vue

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'">
      <div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem">
        <div class="title">温馨提示</div>
        <div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div>
      </div>
      <div :class="['file', { 'vertical-margin-left': isVertical }]">
        <div class="main" style="width: 50rem">
          <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start">
            <input type="checkbox" v-model="item.sta" />
            <div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div>
          </div>
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="skip('argument', name)">确认资料</div>
        </div>
      </div>
    </div>
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'">
      <div :class="['file2', { 'vertical-margin-right': isVertical }]">
        <div class="title flex-between">
          已完成扫描的版面
          <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span>
        </div>
        <div class="main flex-between">
          <div class="smfyData">
            <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')">
              <div class="name">{{ index + 1 }}</div>
              <span @click="onCancel(index, 'imgList')">删除</span>
            </div>
          </div>
          <img v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" />
          <img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对，
          不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div>
          <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div>
        </div>
      </div>
    </div>
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'">
      <div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem">
        <div class="title">请核对您的信息</div>
        <div class="card" v-if="cardInfo != ''">
          <div class="card-box2">
            <img src="../assets/card2.png" alt="身份证正面" />
            <div class="diamond">
              <div class="name">{{ cardInfo.name }}</div>
              <div class="gender flex-start">
                {{ cardInfo.xbmc }}
                <div>{{ cardInfo.mzmc }}</div>
              </div>
              <div class="birth flex-start">
                <span>{{ cardInfo.birthday | joinYear }}</span>
                <div>{{ cardInfo.birthday | joinMonth }}</div>
                <div>{{ cardInfo.birthday | joinDay }}</div>
              </div>
              <div class="addr">{{ cardInfo.address }}</div>
              <div class="idNum">{{ cardInfo.idNum }}</div>
              <div class="avatar"><img :src="photo" alt="" /></div>
            </div>
          </div>
          <div class="card-box2">
            <img src="../assets/card1.png" alt="身份证反面" />
            <div class="diamond diamond2">
              <div class="sign">{{ cardInfo.issueOrg }}</div>
              <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
            </div>
          </div>
        </div>
        <div>
          <div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''">
            <div class="card-box2">
              <img src="../assets/card2.png" alt="身份证正面" />
              <div class="diamond">
                <div class="name">{{ cardInfo.name }}</div>
                <div class="gender flex-start">
                  {{ cardInfo.xbmc }}
                  <div>{{ cardInfo.mzmc }}</div>
                </div>
                <div class="birth flex-start">
                  <span>{{ cardInfo.birthday | joinYear }}</span>
                  <div>{{ cardInfo.birthday | joinMonth }}</div>
                  <div>{{ cardInfo.birthday | joinDay }}</div>
                </div>
                <div class="addr">{{ cardInfo.address }}</div>
                <div class="idNum">{{ cardInfo.idNum }}</div>
                <div class="avatar"><img :src="photo" alt="" /></div>
              </div>
            </div>
            <div class="card-box2">
              <img src="../assets/card1.png" alt="身份证反面" />
              <div class="diamond diamond2">
                <div class="sign">{{ cardInfo.issueOrg }}</div>
                <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div>
        <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/FileformatTransforming.mp3" />
    </audio>

<div class="dyzTip" v-if="dyzTip">
      <div class="curtain"></div>
      <div class="content">
        <div class="flex-center">高拍仪检测异常信息提示</div>
        <div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;">
          尊敬的用户您好，抱歉地通知您，系统检测到高拍仪提供的扫描打印服务状态异常，我们准备随机重启计算机来恢复扫描打印功能，请您稍后等计算机重启后重新尝试扫描打印功能，谢谢！
        </div>

UpFile: [],

cardInfo: '',

usbList: [],
      usbTime: '',
      usbNum: 0,
      isVertical: false,
      dialogVisible: false,
      pdfUrl: '',
      IsPreviewImg: false,
      previewImgs: '',

canvasData: '',

dyzTip: false,

cftjSta: false, //重复提交状态
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  methods: {
    getPdf(title,id){
      let _this = this
      html2Canvas(document.querySelector(`#${id}`), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        // 删除本地存储的base64字段
        let pdfData = PDF.output('datauristring')//获取base64Pdf
        // console.log('pdfData', pdfData)
        let file = _this.dataURLtoFile(pdfData,'zjz.pdf')
        // console.log('222',file)
        _this.uploadImg([file],false)
        // return pdfData

// 导出PDF文件
        // PDF.save(title + '.pdf')
      })
    },
    // 导出pdf
    async exportPDF() {
      let _this = this
      _this.getPdf('证件照', 'captureArea');
    },
    async uploadImg(data, sta) {
      let _this = this
      _this.cite.loadingSta = {
        sta: true,
        name: '正在转码，请稍后'
      }
      const addr = require('../assets/audio/FileformatTransforming.mp3')
      this.play(addr)
      let forData = new FormData()
      let j = data.length
      _this.usbNum = j
      for (let i = 0; i < data.length; i++) {
        let formData = new FormData()
        let file = data[i]
        if (sta) {
          // let dataURL = file.toDataURL('image/png')
          let name = i + '.png'
          file = _this.dataURLtoFile(file, name)
        }
        formData.append('file', file) // 使用数组语法添加多个文件
        if (this.cite.modeName == '身份证打印') {
          // let res = await image2Pdf(formData)
          let res = await upload2Pdf(formData).catch(error => {alert(error,this)})
          // console.log(res)
          _this.cite.selectedFile.push(res)
          // console.log('打印文件', this.cite.selectedFile, res)
          if (_this.usbNum == i + 1) {
            // 转码结束
            _this.cite.loadingSta = {
              sta: false
            }
            _this.$router.push({
              name: 'argument'
            })
          }
        } else {
          forData.append('images', file)
          // let res = await upload2Pdf(formData)
          // _this.cite.selectedFile.push(res)
          // if(_this.usbNum == i+1) {
          //   // 转码结束
          //   _this.cite.loadingSta = {
          //     sta: false,
          //   }
          //   _this.$router.push({
          //     name: 'argument',
          //   })
          // }
          // console.log('打印文件', this.cite.selectedFile, res)
        }
      }

if (this.name == '扫描打印') {
        let res = await images2Pdf(forData).catch(error => {alert(error,this)})
        _this.cite.selectedFile.push(res)
        // 转码结束
        _this.cite.loadingSta = {
          sta: false
        }
        _this.$router.push({
          name: 'argument'
        })
      }
    },
    async readPDF(url) {
      // 请求接口
      //将文件转为pdf
      const res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
      if (res.data.previewPath) {
        this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0'
        this.dialogVisible = true
      }
      // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf'
    },
    // 预览图片
    previewImg(url) {
      this.previewImgs = url
      this.IsPreviewImg = true
    },
    async skip(href, name) {
      if (this.usbList.length > 0) {
        // 保存选中的U盘文件
        // await this.uploadImg(this.UpFile, false)
        console.log('u盘')
        await this.dealFile()
      } else if (this.imgList.length > 0) {
        // 保存高拍仪图片
        await this.uploadImg(this.imgList, true)
      } else if (this.cardInfo) {
        if(this.cftjSta) {
          this.cite.state = {
            name: '请勿重复提交！',
            sta: true
          }
          return
        }else if (this.photo) {
          this.cftjSta = true
          setTimeout(()=>{
            this.cftjSta = false
          },3000)
          // 保存身份证图片
          await this.exportPDF()
        } else {
          this.cite.state = {
            name: '正在加载，请稍后！',
            sta: true
          }
          return
        }
        // await this.captureAndDownload()
      } else {
        this.cite.state = {
          name: '请选择文件打印！',
          sta: true
        }
        return
      }
      console.log(href, name)
      // this.$router.push({
      //   name: href,
      //   params: {
      //     name: name
      //   }
      // })
    },
    async captureAndDownload() {
      // const captureArea = this.$refs.sfzCanvas
      const captureArea = this.$refs.captureArea

// 使用 html2canvas 将区域内容生成为图片
      console.log('html2canvas', window.devicePixelRatio)
      let sca = 1
      // if (window.devicePixelRatio >= 1) {
      //   sca = 0.7
      // }
      const canvas = await html2canvas(captureArea, { scale: sca })
      console.log(canvas)
      // 将 canvas 转为图片 URL
      canvas.toBlob((blob) => {
        // blob将base64编码的src 以二进制的形式存进了 Blob对象
        const a = document.createElement("a");
        a.download = "证书.png";
        a.href = window.URL.createObjectURL(blob);
        a.click();
        console.log(blob);
      }, "image/png");
      const dataURL = canvas.toDataURL('image/png')
      const name = 'sfz.png'
      const file = this.dataURLtoFile(dataURL, name)
      console.log(file)
      this.uploadImg([file], false)
    },
    dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    onChange(index, name, sta) {
      if (name == 'usbList') {
        this[name][index].sta = sta
      } else {
        this[name] = index
      }
    },
    onCancel(index, name) {
      if (name == 'imgList') {
        this.smfyIndex = -1
      }
      this[name].splice(index, 1)
    },
    paiz() {
      this.socket.send('Capture@2')
    },
    init: function () {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        this.socket.onclose = this.onljgb // 连接关闭时触发
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    onljgb: function () {
      console.log('连接关闭')
      // this.init()
    },
    open: function () {
      // console.log("socket连接成功")
      this.socket.send('OpenIdCardEx@0')
      this.socket.send('OpenDevice@1')
      this.socket.send('SetResolution@2@2592@1944')
      this.socket.send('OpenVideo')
      this.socket.send('RotateRight')
      this.socket.send('Deskew')
    },
    error: function () {
      console.log('连接错误')
      // this.dyzTip = true
    },
    getMessage: function (msg) {
      // console.log(msg,msg.data)
      if (typeof msg.data == 'string') {
        if (msg.data.indexOf('GetDevCount') == 0) {
          let s = msg.data.substring(12)
          if ('1' == s || '2' == s) {
            //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备
            alert('检测到已经连接上摄像头')
          }
        } else if (msg.data.indexOf('Capture') == 0) {
          let s = msg.data.substring(8)
          if (s) {
            this.imgList.push('data:image/jpeg;base64,' + s)
          }
        } else if (msg.data.indexOf('MoveDetectEvent') == 0) {
          this.socket.send('Capture@2')
        } else if (msg.data.indexOf('IdCardEvent') == 0) {
          this.socket.send('UnFaceDetect')
        } else if (msg.data.indexOf('ReadIdCard') == 0) {
          let s = msg.data.substring(11)
          if ('1' == s) {
            this.socket.send('GetIdCardResult@||')
            this.socket.send('GetIdCardImage@2')
          }
        } else if (msg.data.indexOf('GetIdCardResult') == 0) {
          let s = msg.data.substring(16)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetBarcode') == 0) {
          // alert(msg.data);
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetIdCardImage') == 0) {
          let s = msg.data.substring(15)
          let arr = s.split('#')
          let faceImg = arr[0]

let myimg = document.getElementById('myCanvas3')
          myimg.src = 'data:image/jpeg;base64,' + faceImg
        } else if (msg.data.indexOf('GetBase64') == 0) {
          let s = msg.data.substring(10)

let myimg = document.getElementById('myCanvas2')
          myimg.src = 'data:image/jpeg;base64,' + s
          alert(s)
        } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) {
          let s = msg.data.substring(27)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetOcrFromFileName') == 0) {
          let s = msg.data.substring(19)

let info = document.getElementById('info')
          info.value = s
        } else if (msg.data.indexOf('GetDogSN') == 0) {
          let s = msg.data.substring(11)

let info = document.getElementById('info')
          info.value = s
        }
      } else {
        let reader = new FileReader()

reader.onload = function (msg) {
          if (msg.target.readyState == FileReader.DONE) {
            let url = msg.target.result
            document.getElementById('myCanvas').src = url
          }
        }

reader.readAsDataURL(msg.data)
      }
    },
    close: function () {
      // console.log("socket已经关闭")
      this.socket.close()
      this.socket = ''
    },
    tikChange(i) {
      if(i==1) {
        shutdown().catch(error => {alert(error,this)})
      }else{
        this.quit()
      }
    },

handleFileChange(event) {
      let file = event.target.files[0]
      if (file) {
        this.UpFile.push(file)
      }
    },
    dwhs(n) {
      return n
    },
    canvasSfz() {
      let _this = this
      let {cardInfo} = _this
      const canvas = document.getElementById('sfzCanvas')
      // const canvas = this.$refs.sfzCanvas;
      const ctx = canvas.getContext('2d');
      // 在 Canvas 上进行绘图操作
      ctx.fillStyle = 'transparent';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

// 在Canvas画布 添加图片
      let img = new Image()
      img.src = require('@/assets/card2.png')
      img.onload = () => {
        ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405))

ctx.font = _this.dwhs(24)+"px OCR"
        // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
        ctx.textBaseline = 'middle'
        ctx.fontWeight = '100'
        ctx.fillStyle = "#333"
        ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120))
        ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120))

let name = cardInfo.address
        let num = 11
        let w = ctx.measureText(cardInfo.address).width
        if(w>_this.dwhs(500)) {
          ctx.fillText(name, _this.dwhs(20), _this.dwhs(345))
        }else{
          let t1 = name.substring(0, num);
          let t2 = name.substring(num);
          ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220))
          ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255))
        }

ctx.font = _this.dwhs(28)+"px STHeiti"
        ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65))

ctx.font = _this.dwhs(26)+"px OCR"
        ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170))
        if (cardInfo.birthday.substring(4, 5) == 0) {
          ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170))
        }else{
          ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170))
        }
        if (cardInfo.birthday.substring(6, 7) == 0) {
          ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170))
        }else{
          ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170))
        }

let img2 = new Image()
        // img2.src = _this.photo
        img2.src = require('@/assets/card1.png')
        img2.onload = () => {
          ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238))

let img3 = new Image()
          img3.src = require('@/assets/card1.png')
          img3.onload = () => {
            ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405))

ctx.font = _this.dwhs(28)+"px STHeiti"
            ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797))
            ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850))
            ctx.fillText('-', _this.dwhs(405), _this.dwhs(848))
            ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850))

canvas.style.letterSpacing = "2px";
            ctx.font = _this.dwhs(32)+"px STHeiti"
            ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345))

// canvas.toBlob(function (blob) {
            //   // 图片ajax上传
            //   _this.uploadImg([blob], false)
            // },'image/png');

}
        }
      }
    },
    sfzCard2() {
      let _this = this
      let res = {
        errorMsg: 'OK',
        resultContent: {
          address: '地址',
          birthday: '日期1',
          effectDate: '日期2',
          expireDate: '日期3',
          gender: '1',
          idNum: '身份证',
          issueOrg: '寻乌县公安局',
          name: '名字',
          nation: '01',
          photo:
            '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAQECAQEBAgICAgICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/wAARCAB+AGYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD++6SRU3FvU/1/wpkcqyZA7DNOljEmQT3P04JxTYohHnHU9T/SnHdepyz+FkjMFBLHA75qNjCitMxjREVmeRiqqqqMszMeFAA5J6Ypl1LbwW8s13NDb28SM8s9xIkUMSKCTJJJIwCKBkkkgcV/KZ/wWm/4LiW/7LGu3PwL+DWrWk/iufS9Xhv9e0a/ll+x3lrM1p5cd1YSSxHdHcxtlhn5eOKym3dahG9l2sj+jH4qftWfAf4N6Rea149+Ifh/SLWzYJOn9raS14GIb7trNfozn5D261+Bnx1/4Obf2W/hf4i+JXhXQNH1fWbnwfq9pY6FrFzaPe6X4osb3SLfVI9RspdEuiLSNftMcTxuWdZEcE5BA/gA/aC/bX/aG/aJubm5+IfxH8Q6vFcTGWe0ubyK4hlbfv8AmP2ZSeQfzNfH1/f6lfwJa7C0SKUQbjjGWPQj1NYSmo6p6lH+g14c/wCDs/4O3ngjVb698Bg+Mor6ePTdNGleJTpc0AsreSyaW9M2U8y+NwknHyIgbktx+h37G3/Bwn+y5+0/420r4f6tdr4Q8SeIb7RrHSFurK5sNM+1X8FjBeR3Go6rfKkEUeq3TxozZ3RpvPev8tPT9P1a2tisUDBVK9SQMfN045q1ovinxV4S8R2OsaPf3Okanp9xHc2V/aSAT208EySwyxl0IDrLGjDjqoojNNasEraH+4t4f8V+FvFlmmoeGfEGieILKUBku9G1Oy1O3YMCVxPZTOuSAcc844roR8vA4+hr/Mi/4I1/8FnPjB8EPjJ4V+GPxb+IWsf8KOtNC169126mvxNNGdG0mabTPs2nCOJLm5e72RhPMB2zMRkiv9G74DftB/DD9ozwRp/jr4Y+JbLxBpF7BBKzQT2rXELTo7os8FvcyeSxWNjgnOOaqM1Kagnr/wAMF7dbHtrSherH8CT/AJ6ULKH+6xP5+/8AhTCjHOcHOe5/IU2OMoxPAGeOc9c/412ODVra3Fzr+b+v6/rQsZPqfzNFJRS5Zdg51/N/X9f1oK3U/U/zprZ2tjrg4+uKc3U/U/zqGeeK3jaWZgiDqT/L68VzJtNDP5mf+DgT/gpprn7LPwzt/hJ8K/ET6L8Q/E9lFcX01vd/ZdQtbFr6406dowA+6B4JFdCyYcjg4Ga/zufEt58Qfjx4yudc8S6zrHjjxjr90zCa4QXd9JcXRjjyVtIs+WZPL3MUwvH4/rD/AMHBHxr8RfFf/gp9+0ToM9ydRtfh14sfwD4ejeZnj0/SNC0vS44rKADhEF4bqRl5KyTuvGMD33/gkR+xdpnijR5vjJ4v0xo9csb/AE+PQpltll82wu7Tz5mEz7WjP2i3XgAjjrXj5rjJ4alOSlZLr8kfSZFlVPHVKcJrm5rfofDnwF/4JDfHb4oxWl7r1nbaFbTGPzUl1K3huF8wZ4gvrZScDNfdw/4IW6x4etmub2/S9hiI3SLJpk0+cMfljhxnoelf0/8AhnwZbxTRTPGVcEH7pyOpOfnz+OMV7L/YEE1s6quXJHGOoGR1z718gs9xMknCV7+Z+gPg/A0171P70n/XY/jYX/gkt4zl1S/0/SNBa8tPtO21ub1Bao0QUYJdYyq8k9+1eEfFv/gkl8YNAuLqS18K6dL5e/Btr4TbiM9PKgPORX9ziaPNaWrQLHkA7cdASoIJ6YB5NcBrPhie9L74gAc/3s859OvWk89xNO3tJWS8wXCGBqfBD7oryP8ANf8Ai18AvHvwk1WbSdf0i50m4hMgMkUM7KpibYx8xoQOp74r+in/AIN5/wDgoN8SPgd8T9M+D/iDxf4fs/hnrEb+cPEniCWyU3MNpb2VkIrK2tnMl7i5l8oEhN+AzAc1+o37Xv7G3gX4teHvEL6j4Ys5ddngumh1M2zSXazeTLgIWlCkmTYeQcFR7V/FP8U/h54j/Zj+PGp6fLLdWc3hfxAJtMnIEcqjTprW5jZUCDYPPA6A4xX0eVZrTxMY3nes2fI8QcP08vpznCFkvTof7SHhnxBpXinRNO17Rb1dQ0zU7dbm0u0MZE0LMyhv3TEDlG7npW9X4C/8G937aUf7WP7HQXVddu9T8S/DO48O+FdZW/8AlaG9vtOvdTMdu8hBnjKFSWCjk4xX79V9Sqj5Vd6r1PhabUop21/r/IKKKK155dyuSPYcw5z6jP0z2rNv7NL2JrZ+Ff58+hGRn8zWjIyqFJOOAMevWolO59w6BSB+JB659q5UrtLuXJJNpH+UT/wV08BPYf8ABYb9rPRkt/KTWfjhql9bRlSoli1KDQ7i4n2tz+9nu3k9D5xI4Ir+nT9gLwAPBfwL8LaX5flKthYrt2FTtQXIxz3G6vzv/wCCiX7P+m/FL/gtd8bJbq186VPEukXzgwiQ+TH4L8B3Yk5PAMQDKcYIYHoa/VTVPEVz8KfDdv4V8G2st3qtnJBb2lqyTQwGCN2WQmWENtILr0Hf2r4/PZ+0lOg3d/8ADI/TeD6PLCliGvht+h9v6ZbQxqDx8uMEKBjIOcfN1P1rrdPdTcLGhO3J7YBI4Bxnpgn86+CvCXxe+PUzxJd/DbQ7y14zNJqWqhhnPOFtQOmfyr7S+H2s3ut2sU2v6Ra6FqB2Zs7SWSaPkEt886q3BA7d6+cw+C9nbTlS/rrrc/RK9f2l0ne52+ooI9zA5z69e/v7/pXIXEwJIJ3Zzjnd68kE+v0Nega5FBbW01yUkeNMkiNN5yQSMKOTwDXyb45+Onh7wvcyae/hnxLdXC78XVh4d1W7I2Eg4e3Qqckj8qurgfat6cyf/AIpYh0nvt5/gdT4tsDcWtw4DHhh9SQ3T07/AJ1/GZ/wWk+Df9ifFVvGrW5iXXYNTvmn2Y3SSXkUSHdnkkx4/Cv6rof2jNC1O7isru28S6fHPIIz/aWh39kNzsI13i4C7Tlvwr8uv+CrnwPk+Mvwr1LxLpNob+TwzEUtH2kgWYkur2ZwQDtx5ROOfrW2VUlg8ZTUo2i2lp3uj5zieP1rA1JvW9/xPpL/AIM/9FM/7PX7SN+LmCd4vi14KEiwpdrJaufBszCK4a5t0RpMDOYWlTH8QPFf2pV/JD/waQeBtS8Mfso/tFajd2/k2+s/F/wslqx4Lvp3giFrjIA+6F1C2weQST/dr+t8jGPcZ+me1fpd33PxaVF0rq1l/X+YZPqfzNFJRXTyy7GfOv5v6/r+tBJAhGXCjGRnpgcf/XqhfahZaZY3d9cyrHaWVpPd3D5B2wwRNLM55GcIjn8KsTrkAY7kEdc/jmuB+J1r5vw/8WRwqHln8P6tC4BIzFJp91HLnHUeWzYFctaShSlUirWOzDU1ia2Fot+9OpBS/wALaTf/AAGfymfFG28IfEX/AIKofEf4l+Gpxe6fqnhxri+vhGnz3tnoVp4YsLbcJG3BNM8L2DfeBX7RjBAUn2r4h2mqabLJ4k0PSIdb1i2L/Z7CaQxRzl8uU81WG1iUUDJA+bkgc15x4U+GVl4H+KVzremxES6pJdPdN5YQ/vVhhfkE7iUHt3r7WsdES4ukkQZXngcn5u5+b2r4jGSVWu6t9dT97wOXYTB0I0cNpFW7H583n7Un7WGn3+h6Lof7OZure9Mcd9caNqU11daYWuVhMl5El7tMKROXkki81ERcls8V90fDPxB4y10favFdjDpmrWTpDdwx3E0sTyuDIzW8syr9ojA2jcoxnjrXt1toKwwmQxEqBjnIwSDg/erlrsg6xb25yfKDogycbd4JwM8cmuY6fYP+ZG74l8US2lrMAZWXnhAXbgN0VSSa/P8A+LH7ZWgfBjWY28R+FfiXrdjcXUelQ/8ACLeDL7xCg1LUJ1tdPSeC1nWaOEzuN84jMMS5aWRBzX3/AH1jaAs052jJ7KT34+9mubj8F2F9qH9qIu9VR0LbFGBJjjOT2U1XtKi+DV/cc1Sm9U1r+Z8FRfGX4afGW8XTNW8MeOtE8RR3Efm22qeD76C1W4DCXA1AzPDMASmGjkdeTySDXpfxN+H1jqXwT8faBaKDczeFdckt4mCKXki0TUiiD5jli5AAAzzivqXWPBekPIkwXNxAGWIBOMEljyp4Oa8x8ZWU1vomsQRKPtE2mahbQ53grJPaTxI4I/jDMpHuK5o+0eIhOpootPvs0zlxVD22HdK17/5nuX/BBj4W2fwg/Ye8LIl1pE138QZ7LxteR6df2t5NFe3GmQ6O1vqCW0jG1mWPSImVXCuwmJxjFft5G0pHzjoBjP0PHX1r8RP+CTHge/8Ahj4Zu/BoiI0e7kt721gkDRpp6WVjJHHBbIPvRl3Y5Jzk8cV+4J5r73BV3iKak3fY/Hc7oLDYp0krP/hgooor1/aLseB7N9wfof8AdH/oIrnvEVp9t0jULPAP2vTb234HJM9tJFjBP+2K6F84OOoAH5YB/lUUkYkBJHIzjtx+f0rjqQdXDyppa3/A6aFZYfGQrN2S/wA/+GP5zvibor+FfivrOjbfL/sy/mttvHyhBE5GOMcMemORg16x4VuS7RnOc8g59z1APvXuf7aPwQvdH1a5+KenQW/2XUtShOqXHmIji6vbhI41CjJfMURyeOgGK+bvBt/FuiTeOCoyT17YwT618XjqPsKvJ01/Q/Z8mzL61h41ee7dtb+n9foesa9rF/ZWM4gRmUdBHvZzgN/CoP8Ak14RffEzw5p2r6XDqFp4gOpPbyNciDQry4QSCUDHmIOeMdq981HVdHsrSSW7vIbWVBkyTyRwxKMNndLJKADkD8BXzJ4l+K/hDStfEsuom8mXzP3uniO9i4bnE8EhHUetebGpebj0/wCGPscFhsTjLKnDmv8A8A7fWfip4UuWW2+x+JYppZFSOW48P3sFvvclVDTuAFySO9eheB9SklstQguCdi3ES23JOY/KbJ5+6Nx968Nm+OHgHxJbrpV9qF3EWmimzcW2yMNCxIDSTTADmvWvCeq6DdrEdMu4bmElTvgeN177cGKRh0zzmtOdRklezY8bl2Kw7bq0+Xl/4B0uqYgkJC4Kkn0AAyDg5rxjxjfI7zBn4UsMZySfmxwT6ivZPEs8f7zYc8tjnnBz714c2hal4v8AFFj4d0tElnvrlAY5JBGGiadEf5uegcZyP0relB1qqj3/AOGPExNenhqEqs5W5T9Ff2IdHkl8Oy606kBHt4LZ8dYZ7dt5znuR9K/RQjHsCAR9D2r59+AXwz1H4a+EYdCu4YYmTyMLFIHQeUrqcsoHHzD9etfQR9PTjjue5r6/A0FQpxha2qPxvP8AFU8XjJVYu/Zrr6/O4lFFFev7PzPnfaeQxycdep5/WoizYxjPJ74xycc+9LMWBQdEJ5OcHv8AlUNxcw20bSzSpHErqhZ2CqpY4XLMcAc1jRdpO7srGNdNvfY8m+N3glPiP4B1fwpcQowmiN1YlsFDqVpFPJp7SM2BHELopuc/dHPavwG8La9eaTqdzpGphoNW0+dba5t2yDFPhWIIbkHDr1Hev2a/ak/bi/Zq/ZD0jQNW+PXj628OaP4qfVrPT5dPtZdemDaVZx3d617ZaUZJ7e2EEoAkMZj3sFZlzX893jX9pT4M/Hbx5rXxd/Zw8QSeJvAfiq/n1Kw1z7DNpsN+rmOGOa2SclmQPbTq24KVaMqRxXy2f0uX2la9rN6/cfovB9e8IYZ7St89vyPtbWdLsPGWlT2uqwfaEnA8yGQBlPDjJAI9f1rxk/AXR7BD/Y+jW6xDOLZY5EibrgcMdpHT8a53wX8a4oZIrXW5riKcgFmRGeLgDJMvA796+tfDPxE8PaiIzBeeYTjHCDqeM4kPfFfJ4Sp7Vprdo/W8LmWIy2zpy5HD5dj5hm+BtvqUbRXnhiytw6ndLGJmdeGHBYfN16HpXtfw48A6d4I0yOwtEMQUx4+TaBsDAYAOe/J969sv/FuiRI7zXO1lyCcLznJJ5fk14Z4z+KWiWCytaXbvPGGKRooLkndgbVcnqBWuIfI7vS3/AADorZxisx/iyupeZ1fijWLO3aSOWXa5zngDoT0ywr0z9kPwxB4z+Ln9uNGJ9F0K11C3upyFzHqLww3NnGAMjBCk9QeOhr83fFfxH1rWRPcwiUDLMBN5kTAHc3Rl9jX2F+xX+3/+xR8FLPV/hx8V/jl4K8B/E7WdSs7zU9J8TTXGkKLmCySEhtRvoUhdSs8JDh9mJAd+Onp5KnVrwb1X/DHwvFFZ0cBVjfftv+Pa9/kfvvuyOAAPUdSPf1pK+cPAX7Xn7MvxS8T2fgr4dfHf4S+MvFeorO2n6D4d+Ing7W9UvvssL3E6WenaXrks91IsCO5WONiEjZjhQSPoBpLtZ1UopjbPKk4/l7191KDgz8aU/aa3uX6KKKXPP+YLLsflj+2x/wAFYf2cv2OIbzQdb1WTxB8QIYZpYdGsLN9R0dDb7kni1DUtPus2U3mmLarLkqxPav4iv+Cnv/Bf79pX9rOeP4cfD6Wb4LfDWwn1CS+HgLxRrkD+MD5tpLp8msR3SDCxJHdRhI5PLZbxw6txj8/f2g/j/wCKfjh8RtQfXdTGo654u1YKz312FjkvLyWG0jRp3AHzSPGOR36V9W/CT/gln4e1fSNL174n+NL1dSvIEnk8LaZpWm3GmabuLCS0OoS3xe9wyghwkPEhGzjNYzqqD80ey8vpVF7mt/K5+TnjH4+fFb4geEtB0XxZ8WPHXifS9C0vUIdB8P6/4h1DWNI8PfbghmsPD9jf3UkehWEj2luWgtEhhLRhyhbJP9P/APwSr+Hmrw/sb/C6eW1Lzz6O+oSOeSZdV1fW9TlUkqMqj3TKD1IQE8k183H/AIJzfs86Yj2kHhjT71n3RJezacoltnYMq3KKl0QZULBgDkZQZ4r9hP2LdE0P4W/D/SvhNZ6pc3thocdrp+km4ihike0gjfd+6jbC/PO2QK8DNqnt8POm3o/1dj6nIcL9Uq05Wso2/QfrXhLVLiKaBppdOd/lFxb7XljG0g7d64z/AIVw72vxT8GJv8NeIp9SWH/Vi+vILRmxnG5Y4iRwO3Sv0M13wbFdTMiqDnPBj4PJ5+971yp+EthcMTcxA56/uCfXp89fI0aE6KSinpa3yPvp4qlUvzu9/L0PhW28c/tD+IbpYNUmgsbCXJlu7TVzcTpk8bI5LfDcE/lXu3hbw/I1sk+qapdarqYK4mu0iEh4YsSY8Z+bHavoq3+E+mww7LaLpwMw4yQD/wBNPeug0X4YW0dxG80IGPvHZjPOcgk81pOFSpfni3cdKvRjbklt/wAD+vvPB5fCl1fSt50J8iRWVnAJIDccA+2a/j1/4LF+AtT8JftfT6zY2V1F4b8Q2NqLy7igkWOTU9PNpoG2Uqu3abKwsJAxbl7mRRwor+6rXdCt9OtpY7dTlcgDbjoGHGOlfzo/8FOf2dPGfx88d6D4a8Hpo8N49le6hPdeIbq8sNLjmsNRWZYnu7OxuHMrBgVHl8kHJr1spbw9WPR/lseFxBS+s4arpzX+fQ/Av9nX4yeIv2Y/ir8P/jF8NdXuPDXjTwH4m07W9N8QWMptr5Ahe01G1EpVwkNzpVxe20pwT5V0+MNgj/Sq/wCCdf8AwVK+G37YPwx8JXOvX1novxG1HTba41HTbeZn05Zj5j3EY1G7uA0km0RhQVDNu6Gv82f4nfsh/H74V666+M/CtvqnhSKVra71Tww+o63pouJHCW48wabEYgRvI8wRtgE7cc19rf8ABMX4leLPhV8ebrwJLqV1pmi6rHqOs+G3t5B5+lLpdnbxW1stu6gW4N05bDksOCMivsvrMZ7tv+l/XyPzFZd7NWsf6m8cwlRZI5FdHG5XUqysD3BHWivyQ/Y//bg06+8JX/hn4qeIZf7e0H7MllqV+VZtTskRRcXE00rRolx9ouIwEQcqhbsaKrnXYf1WXZfc/wDI/iK+H/8AwTc+HelXekat4l1zxN4q17SNR0/UYtV1yS2cTXNjdJdqyadYCCGIGWKPmVZ5FK5SQA7a/TkSLpiNG7FAAOPlGMHjjPoDX5++Iv2pvGHwg+K1r8K7ywg8bWbJdyS+Idau54NWCWMkUTbLe0VYizLKx5IGVHOK9/t/j14f8fpq8OiaTq9vq2mJcRSxarBZQaY1wLZ51aKe01KeUxj5OTErZzx0zyYj4p/L9D6LD0YxaS6H1dYx/arCG5HIuAJIjnG5cMM9fUVt+GdU1Dw14htNTiBT7OGw27B++G9Dj7tfAUH7UnxG8FaTbDWfB/grUdP05BD5trrGuyX+z5nPlxTWEUZz83VxzivRPA37WXhr4jajpmnXeieIdLv9VjMttDa22nS6aqeZsYXE0us+ajByMBY3GM5IPFeLiv8Al58v0Pdwuz9P1P6EPhd4t07xxoFnqX2nz9TEaLeqfm2Tyb22lg+T8oHUCvYU0SSckOmTnkYJ9ecZ6V+Vnwp8e6r4AkeLS40liuJ1mkjkkeJS0a7FzsBzxXrGk/8ABTX4U23xFf4R694V+JaeNIJ5LWa90nSfDFx4a86FolkMV7eeNIrpoiZ48E2ak4bIGBnzzrP0asfDYQA7SAOPlX69s1qXVjZWseC+2V3RFUgcs5IAzuGPmNfD/wAYf2/vhp8D7Vb3xZpPxLv4JUaWKLw5pPhi7YorvGfNGpeLrMBtynoxGD1zxX4nftDf8HCPneMtM+HPwO+CuqxX3iDxJpeg2ni/4javZWE+mPqep2+nR6hHoPhy5vUeSI3ayiN7uRC0O1iyscZ1Oge0lTtbqf0IfGDxFp/hXTrwT39vDqibtkBuYg5wH3fKzg/e29BX5N/EDxVqHiHVzqM/zoryMXLknO4OpyevQ1Qj8R/EXxVDeXXxS8XN4y8V2kohvdXS0hsLSWVw0krWdlDGotYWIT5QOoJrJ1D/AJBc31f/ANFtWuE/jL0/yDEVJzw0rvTT9DB1u70HVrOVtXtoL8vG0TwTgmN1kVgwYrIDjB/Wvl3wh8Gvh3ZfGTT/ABVoXhnTdO1Zre9eM20TrtikaDzSHaZjwIxXql/MYSWKiQdCjE4PWur8OaFBpPhzU/HcMryaqAFsVdQq6dBcW8nm29tIpyYy8St8wJzX0dPqfI1vh/ryPU7z4h+ELPUr/S7/AFm1g1DTpFju7eSe2WSIuGKEo84IQlHAOACUIHQ0V+Pt5q11qH7Q/iNNbb+2j4q8Hal4mne9Y5tJtJ8QaPp1paQ+XjfCqaxfuGb5gZ2HQ8Fdhyn/2Q=='
        }
      }
      if (res.errorMsg == 'OK') {
        // console.log(res.resultContent)
        _this.imgDeals(res.resultContent.photo)
        _this.cardInfo = parseCardWzxx(res.resultContent)
      }
    },
    // 获取身份证信息
    async sfzCard() {
      let _this = this
      let res = await readCard()
      if (res.errorMsg == 'OK') {
        // console.log(res.resultContent)
        _this.imgDeals(res.resultContent.photo)
        _this.cardInfo = parseCardWzxx(res.resultContent)
      } else {
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.sfzCard()
          }, 1000)
        }
      }
    },
    // 图片处理
    imgDeals(re) {
      let _this = this
      let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png')
      let formData = new FormData()
      formData.append('file', file)
      formData.append('colorEnum', 'CLEAR')
      changeIdPhotoBgc(formData).then(res => {
        console.log(res)
        _this.photo = res.previewPath
        // this.canvasSfz()
      }).catch(error => {alert(error,this)})
    },
    // 读取U盘
    readUsb() {
      let data = {
        extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png'
      }
      readUsb(data).then(res => {
        // console.log(res)
        if (res) {
          if (this.UpFile.length != res.length) {
            // console.log(this.UpFile , res)
            this.UpFile = res
            this.usbList = []
            res.forEach(re => {
              this.usbList.push({
                name: re.name || re,
                size: re.size,
                sta: false
              })
            })
          }
        } else {
          this.UpFile = []
          this.usbList = []
          this.cite.state = {
            name: '请插入U盘',
            sta: true
          }
        }
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.readUsb()
          }, 1000)
        }
      }).catch(error => {alert(error,this)})
    },
    // 处理选中文件
    async dealFile() {
      let { usbList } = this
      // 判断有没有选中u盘文件
      let selectUsb = usbList.some(item => {
        return item.sta === true
      })
      // 没有选中 中断后续操作 并提示
      if (!selectUsb) {
        this.cite.state = {
          name: '请选中文件再点击确认资料',
          sta: true
        }
        return
      }
      this.cite.loadingSta = {
        sta: true,
        name: '正在转码，请稍后'
      }
      const addr = require('../assets/audio/FileformatTransforming.mp3')
      this.play(addr)
      await usbList.forEach((re, i) => {
        if (re.sta) {
          this.usbNum = i
          this.readFile(re.name, i, re.size)
        }
      })
    },
    async readFile(url, i, num) {
      if(parseFloat(num)>5000000) {
        let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)})
        this.cite.selectedFile.push(res.data)
      }else{
        let res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
        this.cite.selectedFile.push(res.data)
      }
      if (this.usbNum == i) {
        // 转码结束
        this.cite.loadingSta = {
          sta: false
        }
        this.$router.push({
          name: 'argument'
        })
      }
    },
    play(addr) {
      let music = new Audio()
      music = addr
      this.$refs.audio.src = music
      this.$refs.audio.play()
    }
  },
  destroyed() {
    // 销毁监听
    if (this.socket) {
      this.close()
    }
  },
  mounted() {
    this.cite.selectedFile = []
    if (this.cite.modeName == '扫描打印') {
      this.init()
    } else if (this.cite.modeName == '身份证打印') {
      this.cftjSta = false
      this.sfzCard()
      // const addr = require('../assets/audio/IdCardReaderGuide.mp3')
      // this.play(addr)
    } else if (this.cite.modeName == 'U盘打印') {
      this.readUsb()
      // const addr = require('../assets/audio/Remind4PluginUSB.mp3')
      // this.play(addr)
    }
  }
}
</script>

// 竖屏
.vertical-width-direction {
  width: 95% !important;
  flex-direction: column;
  height: 78rem !important;
  padding-bottom: 10rem;
  padding-top: 8rem;
  justify-content: space-around;
}
.vertical-bottom-btn {
  margin-right: 0 !important;
}
.vertical-margin-right {
  margin-right: 0 !important;
}
.vertical-margin-left {
  margin-left: 0 !important;
}
.vertical-tip-width {
  width: 32rem !important;
}
.vertical-tip-font {
  text-align: left !important;
}

.dyzTip {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  .curtain {
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.3;
  }
  .content {
    position: absolute;
    left: 50%;
    margin-left: -19rem;
    top: 50%;
    margin-top: -12rem;
    width: 38.56rem;
    height: 24rem;
    background: #ffffff;
    border-radius: 1.25rem;
    overflow: hidden;
    img {
      width: 100%;
    }
    div {
      font-size: 1.38rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #323232;
      line-height: 1.88rem;
      margin-top: 1.3rem;
    }
    .name {
      font-size: 1rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #323232;
      line-height: 1.38rem;
      text-align: left;
      padding: 0 3rem;
    }
    .btn {
      width: 16rem;
      height: 3rem;
      color: #fff;
      background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
      border-radius: 1rem;
      cursor: pointer;
    }
  }
}
</style>

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'">
      <div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem">
        <div class="title">温馨提示</div>
        <div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div>
      </div>
      <div :class="['file', { 'vertical-margin-left': isVertical }]">
        <div class="main" style="width: 50rem">
          <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start">
            <input type="checkbox" v-model="item.sta" />
            <div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div>
          </div>
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="skip('argument', name)">确认资料</div>
        </div>
      </div>
    </div>
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'">
      <div :class="['file2', { 'vertical-margin-right': isVertical }]">
        <div class="title flex-between">
          已完成扫描的版面
          <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span>
        </div>
        <div class="main flex-between">
          <div class="smfyData">
            <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')">
              <div class="name">{{ index + 1 }}</div>
              <span @click="onCancel(index, 'imgList')">删除</span>
            </div>
          </div>
          <img v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" />
          <img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对，
          不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div>
          <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div>
        </div>
      </div>
    </div>
    
    <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'">
      <div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem">
        <div class="title">请核对您的信息</div>
        <div class="card" v-if="cardInfo != ''">
          <div class="card-box2">
            <img src="../assets/card2.png" alt="身份证正面" />
            <div class="diamond">
              <div class="name">{{ cardInfo.name }}</div>
              <div class="gender flex-start">
                {{ cardInfo.xbmc }}
                <div>{{ cardInfo.mzmc }}</div>
              </div>
              <div class="birth flex-start">
                <span>{{ cardInfo.birthday | joinYear }}</span>
                <div>{{ cardInfo.birthday | joinMonth }}</div>
                <div>{{ cardInfo.birthday | joinDay }}</div>
              </div>
              <div class="addr">{{ cardInfo.address }}</div>
              <div class="idNum">{{ cardInfo.idNum }}</div>
              <div class="avatar"><img :src="photo" alt="" /></div>
            </div>
          </div>
          <div class="card-box2">
            <img src="../assets/card1.png" alt="身份证反面" />
            <div class="diamond diamond2">
              <div class="sign">{{ cardInfo.issueOrg }}</div>
              <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
            </div>
          </div>
        </div>
        <div>
          <div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''">
            <div class="card-box2">
              <img src="../assets/card2.png" alt="身份证正面" />
              <div class="diamond">
                <div class="name">{{ cardInfo.name }}</div>
                <div class="gender flex-start">
                  {{ cardInfo.xbmc }}
                  <div>{{ cardInfo.mzmc }}</div>
                </div>
                <div class="birth flex-start">
                  <span>{{ cardInfo.birthday | joinYear }}</span>
                  <div>{{ cardInfo.birthday | joinMonth }}</div>
                  <div>{{ cardInfo.birthday | joinDay }}</div>
                </div>
                <div class="addr">{{ cardInfo.address }}</div>
                <div class="idNum">{{ cardInfo.idNum }}</div>
                <div class="avatar"><img :src="photo" alt="" /></div>
              </div>
            </div>
            <div class="card-box2">
              <img src="../assets/card1.png" alt="身份证反面" />
              <div class="diamond diamond2">
                <div class="sign">{{ cardInfo.issueOrg }}</div>
                <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div>
        <div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div>
      </div>
    </div>