han

hanfei / VueSharedPrinting

Browse code han master
1 parent c075a98 commit 331af817479c5729d0dca2c4de2a34ede6d1f791 hanfei authored on 2 Jan 2024

Patch

Showing 7 changed files

Ignore Space Show notes View src/utils/cite.js
// 引用地址 let inWebURL = 'ws://127.0.0.1:7000/'; let baseURL = 'http://192.168.250.110:8888'; export default {inWebURL,baseURL} // 引用地址 let inWebURL = 'ws://127.0.0.1:7000/'; let baseURL = 'http://192.168.250.29:8888'; export default {inWebURL,baseURL}

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center"> <!-- <img src="../assets/demo1.png" />--> 广告位招租 </div> <!-- 功能--> <div class="feature flex-between"> <div class="main icon2 flex-start" @click="skip('operationGuide','U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide','扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide','身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="right"> <div class="main4"> <span></span> <span></span> <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div> </div> </div> </div> <div class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain','使用教程')"> <img src="../assets/demo6.png" />使用教程 </div> <div class="main2 flex-center" @click="skip('explain','联系客服')"> <img src="../assets/demo7.png" />联系客服 </div> <div class="main2 flex-center" @click="skip('explain','打印价格')"> <img src="../assets/demo5.png" />打印价格 </div> </div> </div> </template> <script> export default { name: "device", data() { return { } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, } </script> <style scoped lang="less"> .device { margin: 2.5rem 4.13rem 0; .box { .left { width: 76.88rem; .advertising { width: 100%; height: 32.5rem; border-radius: 1.63rem; margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #FFFFFF; line-height: 8rem; img { width: 40rem; margin-top: -5rem; } } } .right { width: 33rem; } } .main { width: 32%; height: 10rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #FFFFFF; line-height: 1.8rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 12rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3DBF51 0%, #47D1A9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120,229,217,0.45); } .icon2 { background: linear-gradient(180deg, #F2C952 0%, #DB572B 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255,147,128,0.57); } .icon3 { background: linear-gradient(180deg, #84B2F7 0%, #8774D2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150,135,232,0.3); } .icon4 { background: linear-gradient(180deg, #5BE7FF 0%, #309FD8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104,202,253,0.42); } .css1 { background: #FFFFFF; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 32%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: .38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: .88rem; } } .main4 { width: 100%; height: 44.38rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; margin-bottom: 1.88rem; span { display: inline-block; width: 18rem; height: 18rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 1rem auto 0; } div { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style> <template> <div class="device flex-center"> <!-- 左边--> <div class="box"> <div class="main icon1"> <img src="../assets/demo1.png" /> <div class="flex-center">天章自助打印</div> </div> <div class="main icon3" @click="skip('operationGuide','扫描复印')"> <img src="../assets/demo3.png" /> <div class="flex-center">扫描复印</div> </div> <div class="main2 flex-center" @click="skip('explain','使用教程')"> <img src="../assets/demo6.png" />使用教程 </div> </div> <!-- 中间--> <div class="box"> <div class="main icon2" @click="skip('operationGuide','U盘打印')"> <img src="../assets/demo2.png" /> <div class="flex-center">U盘打印</div> </div> <div class="main icon4" @click="skip('operationGuide','身份证打印')"> <img src="../assets/demo4.png" /> <div class="flex-center">身份证打印</div> </div> <div class="main2 flex-center" @click="skip('explain','客服助手')"> <img src="../assets/demo7.png" />客服助手 </div> </div> <!-- 右边--> <div class="box2"> <div class="main3 flex-center" @click="skip('explain','打印价格')"> <img src="../assets/demo6.png" />打印价格 </div> <div class="main4"> <span></span> <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div> </div> <div class="main2 flex-center" @click="skip('explain','打印价格')"> <img src="../assets/demo6.png" />打印价格 </div> </div> </div> </template> <script> export default { name: "device", data() { return { } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, } </script> <style scoped lang="less"> .device { margin-top: 2.5rem; .box { width: 37.5rem; margin-right: 1.88rem; } .box2 { width: 33rem; } .main { width: 100%; height: 21.25rem; border-radius: 1.63rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 17.69rem; margin-top: .69rem; } } .icon1 { background: linear-gradient(359deg, #3DBF51 0%, #47D1A9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120,229,217,0.45); } .icon2 { background: linear-gradient(180deg, #F2C952 0%, #DB572B 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255,147,128,0.57); } .icon3 { background: linear-gradient(180deg, #84B2F7 0%, #8774D2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150,135,232,0.3); } .icon4 { background: linear-gradient(180deg, #5BE7FF 0%, #309FD8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104,202,253,0.42); } .css1 { background: #FFFFFF; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: .38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: .88rem; } } .main4 { width: 100%; height: 30.25rem; margin: 1.25rem auto; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; span { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 1.44rem auto 0.5rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">

        <div class="advertising icon1 flex-center">

          广告位招租
        </div>

        <div class="feature flex-between">
          <div class="main icon2 flex-start" @click="skip('operationGuide','U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div class="main icon3 flex-start" @click="skip('operationGuide','扫描打印')">
            <img src="../assets/demo3.png" />
            <div>扫描打印</div>
          </div>
          <div class="main icon4 flex-start" @click="skip('operationGuide','身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4">
          <span></span>
          <span></span>
          <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
        </div>
      </div>
    </div>
    <div class="box2 flex-between">
      <div class="main2 flex-center" @click="skip('explain','使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
      <div class="main2 flex-center" @click="skip('explain','联系客服')">
        <img src="../assets/demo7.png" />联系客服
      </div>
      <div class="main2 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo5.png" />打印价格
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "device",
  data() {
    return {

}
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

<template>
  <div class="device flex-center">

    <div class="box">
      <div class="main icon1">
        <img src="../assets/demo1.png" />
        <div class="flex-center">天章自助打印</div>
      </div>
      <div class="main icon3" @click="skip('operationGuide','扫描复印')">
        <img src="../assets/demo3.png" />
        <div class="flex-center">扫描复印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
    </div>

    <div class="box">
      <div class="main icon2" @click="skip('operationGuide','U盘打印')">
        <img src="../assets/demo2.png" />
        <div class="flex-center">U盘打印</div>
      </div>
      <div class="main icon4" @click="skip('operationGuide','身份证打印')">
        <img src="../assets/demo4.png" />
        <div class="flex-center">身份证打印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','客服助手')">
        <img src="../assets/demo7.png" />客服助手
      </div>
    </div>

    <div class="box2">
      <div class="main3 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo6.png" />打印价格
      </div>
      <div class="main4">
        <span></span>
        <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
      </div>
      <div class="main2 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo6.png" />打印价格
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "device",
  data() {
    return {

}
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

Ignore Space Show notes View src/views/explain.vue
<template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描打印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr style=" font-weight: bold; font-size: 1.3rem; background-color: #edeff6; " > <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}</td> </tr> </table> </div> <div v-if="name == '联系客服'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [], }; }, methods: { getPrintPrice() { getPrintPrice({ deviceId: 3 }).then((res) => { // console.log(res); this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() {}, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } } </style> <template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr style=" font-weight: bold; font-size: 1.3rem; background-color: #edeff6; " > <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}</td> </tr> </table> </div> <div v-if="name == '客服助手'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import axios from "axios"; import { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [ // { name: "A4黑白单面", amount: "元张" }, // { name: "A4黑白双面", amount: "元张" }, // { name: "A4彩色双面", amount: "元张" }, // { name: "扫描复印黑白单面", amount: "元张" }, // { name: "扫描复印黑白双面", amount: "元张" }, // { name: "扫描复印彩色单面", amount: "元张" }, // { name: "扫描复印深色双面", amount: "元张" }, // { name: "证件照", amount: "元张" }, // { name: "照片", amount: "元张" }, // { name: "身份证黑白单面", amount: "元张" }, // { name: "身份证黑户双面", amount: "元张" }, // { name: "身份证彩色单面", amount: "元张" }, // { name: "身份证彩色双面", amount: "**元张" }, ], }; }, methods: { getDate() { // 获取数据 let data = { deviceId: "123", printType: "DocumentPrinting", }; axios .get("/device/getPrintPrice", data) .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); }, getPrintPrice() { getPrintPrice({ deviceId: 3 }).then((res) => { // console.log(res); this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() { this.getDate(); }, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } } </style>

Ignore Space Show notes View

src/views/explain.vue

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr
            style="
              font-weight: bold;
              font-size: 1.3rem;
              background-color: #edeff6;
            "
          >
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '联系客服'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr
            style="
              font-weight: bold;
              font-size: 1.3rem;
              background-color: #edeff6;
            "
          >
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '客服助手'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

axios
        .get("/device/getPrintPrice", data)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getPrintPrice() {
      getPrintPrice({ deviceId: 3 }).then((res) => {
        // console.log(res);
        this.tableData = res.data;
      });
    },
  },
  created() {
    this.getPrintPrice();
  },
  mounted() {
    this.getDate();
  },
};
</script>

Ignore Space Show notes View src/views/operationGuide.vue
<template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name"/> <div class="box flex-between"> <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 flex-center" v-show="name=='扫描打印'"> <img src="../assets/typeSMFY.png" /> </div> <div class="picture" v-show="name=='身份证打印'"> <img src="../assets/typeSFZ.png" /> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "operationGuide", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, }, mounted() { let name = this.$route.params.name if(name=='U盘打印') { this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择' this.btnName='选取文件' }else if(name=='扫描打印') { this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。' this.btnName='开始扫描' }else if(name=='身份证打印') { this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。' this.btnName='开始扫描' } } } </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; } } } } </style> <template> <!-- 操作指南--> <div class="operationGuide"> <navbar :name="name"/> <div class="box flex-between"> <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 flex-center" v-show="name=='扫描复印'"> <img src="../assets/typeSMFY.png" /> </div> <div class="picture" v-show="name=='身份证打印'"> <img src="../assets/typeSFZ.png" /> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content">{{ content }}</div> <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "operationGuide", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, content: '', btnName: '', } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, }, mounted() { let name = this.$route.params.name if(name=='U盘打印') { this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择' this.btnName='选取文件' }else if(name=='扫描复印') { this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。' this.btnName='开始扫描' }else if(name=='身份证打印') { this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。' this.btnName='开始扫描' } } } </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; } } } } </style>

Ignore Space Show notes View

src/views/operationGuide.vue

<template>

  <div class="operationGuide">
    <navbar :name="name"/>
    <div class="box flex-between">
      <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 flex-center" v-show="name=='扫描打印'">
        <img src="../assets/typeSMFY.png" />
      </div>
      <div class="picture" v-show="name=='身份证打印'">
        <img src="../assets/typeSFZ.png" />
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "operationGuide",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择'
      this.btnName='选取文件'
    }else if(name=='扫描打印') {
      this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。'
      this.btnName='开始扫描'
    }else if(name=='身份证打印') {
      this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。'
      this.btnName='开始扫描'
    }
  }
}
</script>

<template>

  <div class="operationGuide">
    <navbar :name="name"/>
    <div class="box flex-between">
      <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 flex-center" v-show="name=='扫描复印'">
        <img src="../assets/typeSMFY.png" />
      </div>
      <div class="picture" v-show="name=='身份证打印'">
        <img src="../assets/typeSFZ.png" />
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">{{ content }}</div>
        <div class="btn flex-center" @click="skip('selectFile',name)">{{ btnName }}</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "operationGuide",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      content: '',
      btnName: '',
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
  },
  mounted() {
    let name = this.$route.params.name
    if(name=='U盘打印') {
      this.content='如作图所示，请先将储存有打印资料的U盘插入到USB接口中，确认正确插入后，请按下面“选取文件”按钮进行需要打印资料的选择'
      this.btnName='选取文件'
    }else if(name=='扫描复印') {
      this.content='如左图所示，请先将需要扫描的资料页面展开，并且需要的版面朝上放置在机器的“扫描复印”口中央（也就是说放好之后，自己是可以看到你需要的那个版面内容的。）准备就绪后，请按下面的“开始扫描”开始资料扫描。'
      this.btnName='开始扫描'
    }else if(name=='身份证打印') {
      this.content='如左图所示，请先将身份证水平放置在机器的“身份证”读取卡口中，准备就绪后，请按下面的“开始读卡”开始身份证信息读取。'
      this.btnName='开始扫描'
    }
  }
}
</script>

Ignore Space Show notes View src/views/selectFile.vue
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-show="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。 </div> </div> <div class="file tip2"> <div class="main"> <div v-for="(item,index) in UpFile" v-bind:key="index" class="flex-between li"> <div class="name">{{item.name}}</div> <span @click="onCancel(index,'UpFile')">删除</span> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">选择文件 <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div class="box flex-center" v-show="name == '扫描打印'"> <div class="file2"> <div class="title">已完成扫描的版面</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 :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('transcoding', name)"> 完成扫描 </div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-show="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea"> <div class="card-box"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday \| joinYear }} <span class="month">{{ cardInfo.birthday \| joinMonth }}</span ><span class="day">{{ cardInfo.birthday \| joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNumber }}</div> <div class="card-avatar"> <img :src="cardInfo.imageName" alt="" /> </div> </div> <div class="card-box"> <img src="../assets/card1.png" alt="身份证正面" /> <div class="card-sign">珠海市公安局</div> <div class="card-date"> {{ cardInfo.issuedData }} - {{ cardInfo.validDate }} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。 </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 信息无误，继续 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; export default { name: "selectFile", components: { navbar, }, provide() { return { title: this.tit, type: this.name, }; }, filters: { joinYear(val) { return val.substring(0, 4); }, joinMonth(val) { return val.substring(4, 6); }, joinDay(val) { return val.substring(6, 8); }, }, data() { return { tit: this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交", name: this.$route.params.name, path: this.cite.inWebURL, socket: "", imgList: [], smfyIndex: 0, UpFile: [], cardInfo: { name: "鲲怎么叫", sex: "男", nation: "汉", nationCode: "1", birthday: "19940411", address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号", idNumber: "430421198907280306", idIssued: "珠海市公安局", issuedData: "20110310", validDate: "20210310", photoName: "", base64Photo: "", imageName: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e", base64Image: "(nul1)", cardType: "1", enName: "", cnName: "", passNum: "", visaTimes: "", }, }; }, methods: { skip(href, name) { this.captureAndDownload(); this.$router.push({ name: href, params: { name: name, }, }); }, async captureAndDownload() { const captureArea = this.$refs.captureArea; // 使用 html2canvas 将区域内容生成为图片 const canvas = await html2canvas(captureArea); // 将 canvas 转为图片 URL const imageUrl = canvas.toDataURL("image/png"); console.log(imageUrl); // 调用接口上传图片 // 创建一个下载链接 // const downloadLink = document.createElement("a"); // downloadLink.href = imageUrl; // downloadLink.download = "captured_image.png"; // 模拟点击下载链接 // downloadLink.click(); }, onChange(index, name) { this[name] = index; }, onCancel(index, name) { 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; // 监听socket消息 this.socket.onmessage = this.getMessage; } }, 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("连接错误"); }, getMessage: function (msg) { 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 = ""; }, handleFileChange(event) { let file = event.target.files[0]; if (file) { this.UpFile.push(file); } }, }, destroyed() { // 销毁监听 this.close(); }, mounted() { if (this.$route.params.name == "扫描打印") { this.init(); } }, }; </script> <style scoped lang="less"> .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: 2rem 0; overflow-y: scroll; .li { width: 80%; margin: 0 auto; padding-bottom: 1rem; span { text-decoration: underline; cursor: pointer; } } } } .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; } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 42.81rem; 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: bold; font-size: 0.7rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.7rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.7rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; font-size: 0.7rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; font-size: 0.7rem; .month { margin-left: 2.3rem; } .day { margin-left: 1.5rem; } } .card-addr { width: 10rem; position: absolute; top: 8.1rem; left: 4.5rem; font-size: 0.7rem; text-align: left; } .card-id { position: absolute; bottom: 1.05rem; left: 8rem; font-size: 0.7rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } } } .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; } } } </style> <template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-show="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。 </div> </div> <div class="file tip2"> <div class="main"> <div v-for="(item,index) in UpFile" v-bind:key="index" class="flex-between li"> <div class="name">{{item.name}}</div> <span @click="onCancel(index,'UpFile')">删除</span> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">选择文件 <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div> </div> </div> </div> <!-- 扫描复印--> <div class="box flex-center" v-show="name == '扫描复印'"> <div class="file2"> <div class="title">已完成扫描的版面</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 :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('transcoding', name)"> 完成扫描 </div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-show="name == '身份证打印'"> <div class="file2 file3" style="margin-right: 20rem"> <div class="title">请核对您的信息</div> <div class="card" ref="captureArea"> <div class="card-box"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday \| joinYear }} <span class="month">{{ cardInfo.birthday \| joinMonth }}</span ><span class="day">{{ cardInfo.birthday \| joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNumber }}</div> <div class="card-avatar"> <img :src="cardInfo.imageName" alt="" /> </div> </div> <div class="card-box"> <img src="../assets/card1.png" alt="身份证正面" /> <div class="card-sign">珠海市公安局</div> <div class="card-date"> {{ cardInfo.issuedData }} - {{ cardInfo.validDate }} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。 </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 信息无误，继续 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import html2canvas from "html2canvas"; export default { name: "selectFile", components: { navbar, }, provide() { return { title: this.tit, type: this.name, }; }, filters: { joinYear(val) { return val.substring(0, 4); }, joinMonth(val) { return val.substring(4, 6); }, joinDay(val) { return val.substring(6, 8); }, }, data() { return { tit: this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交", name: this.$route.params.name, path: this.cite.inWebURL, socket: "", imgList: [], smfyIndex: 0, UpFile: [], cardInfo: { name: "鲲怎么叫", sex: "男", nation: "汉", nationCode: "1", birthday: "19940411", address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号", idNumber: "430421198907280306", idIssued: "珠海市公安局", issuedData: "20110310", validDate: "20210310", photoName: "", base64Photo: "", imageName: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e", base64Image: "(nul1)", cardType: "1", enName: "", cnName: "", passNum: "", visaTimes: "", }, }; }, methods: { skip(href, name) { this.captureAndDownload(); this.$router.push({ name: href, params: { name: name, }, }); }, async captureAndDownload() { const captureArea = this.$refs.captureArea; // 使用 html2canvas 将区域内容生成为图片 const canvas = await html2canvas(captureArea); // 将 canvas 转为图片 URL const imageUrl = canvas.toDataURL("image/png"); console.log(imageUrl); // 调用接口上传图片 // 创建一个下载链接 // const downloadLink = document.createElement("a"); // downloadLink.href = imageUrl; // downloadLink.download = "captured_image.png"; // 模拟点击下载链接 // downloadLink.click(); }, onChange(index, name) { this[name] = index; }, onCancel(index, name) { 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; // 监听socket消息 this.socket.onmessage = this.getMessage; } }, 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("连接错误"); }, getMessage: function (msg) { 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 = ""; }, handleFileChange(event) { let file = event.target.files[0]; if (file) { this.UpFile.push(file); } }, }, destroyed() { // 销毁监听 this.close(); }, mounted() { if (this.$route.params.name == "扫描复印") { this.init(); } }, }; </script> <style scoped lang="less"> .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: 2rem 0; overflow-y: scroll; .li { width: 80%; margin: 0 auto; padding-bottom: 1rem; span { text-decoration: underline; cursor: pointer; } } } } .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; } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 42.81rem; 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: bold; font-size: 0.7rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.7rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.7rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; font-size: 0.7rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; font-size: 0.7rem; .month { margin-left: 2.3rem; } .day { margin-left: 1.5rem; } } .card-addr { width: 10rem; position: absolute; top: 8.1rem; left: 4.5rem; font-size: 0.7rem; text-align: left; } .card-id { position: absolute; bottom: 1.05rem; left: 8rem; font-size: 0.7rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } } } .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; } } } </style>

Ignore Space Show notes View

src/views/selectFile.vue

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <div class="box flex-center" v-show="name == 'U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。
        </div>
      </div>
      <div class="file tip2">
        <div class="main">
          <div v-for="(item,index) in UpFile" v-bind:key="index" class="flex-between li">
            <div class="name">{{item.name}}</div>
            <span @click="onCancel(index,'UpFile')">删除</span>
          </div>
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">选择文件
            <input type="file" @change="handleFileChange" />
          </div>
          <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-show="name == '扫描打印'">
      <div class="file2">
        <div class="title">已完成扫描的版面</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
            :src="imgList[smfyIndex]"
            alt=""
            style="width: 25rem; height: 100%"
          />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">继续扫描</div>
          <div class="btn flex-center" @click="skip('transcoding', name)">
            完成扫描
          </div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-show="name == '身份证打印'">
      <div class="file2 file3" style="margin-right: 20rem">
        <div class="title">请核对您的信息</div>
        <div class="card" ref="captureArea">
          <div class="card-box">
            <img src="../assets/card2.png" alt="身份证反面" />
            <div class="card-name">{{ cardInfo.name }}</div>
            <div class="card-gender">
              {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span>
            </div>
            <div class="card-birth">
              {{ cardInfo.birthday | joinYear }}
              <span class="month">{{ cardInfo.birthday | joinMonth }}</span
              ><span class="day">{{ cardInfo.birthday | joinDay }}</span>
            </div>
            <div class="card-addr">
              {{ cardInfo.address }}
            </div>
            <div class="card-id">{{ cardInfo.idNumber }}</div>
            <div class="card-avatar">
              <img :src="cardInfo.imageName" alt="" />
            </div>
          </div>
          <div class="card-box">
            <img src="../assets/card1.png" alt="身份证正面" />
            <div class="card-sign">珠海市公安局</div>
            <div class="card-date">
              {{ cardInfo.issuedData }} - {{ cardInfo.validDate }}
            </div>
          </div>
        </div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。
        </div>
        <div class="btn flex-center" @click="skip('transcoding', name)">
          信息无误，继续
        </div>
      </div>
    </div>
  </div>
</template>

UpFile: [],

cardInfo: {
        name: "鲲怎么叫",
        sex: "男",
        nation: "汉",
        nationCode: "1",
        birthday: "19940411",
        address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号",
        idNumber: "430421198907280306",
        idIssued: "珠海市公安局",
        issuedData: "20110310",
        validDate: "20210310",
        photoName: "",
        base64Photo: "",
        imageName:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e",
        base64Image: "(nul1)",
        cardType: "1",
        enName: "",
        cnName: "",
        passNum: "",
        visaTimes: "",
      },
    };
  },
  methods: {
    skip(href, name) {
      this.captureAndDownload();
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    async captureAndDownload() {
      const captureArea = this.$refs.captureArea;

// 使用 html2canvas 将区域内容生成为图片
      const canvas = await html2canvas(captureArea);

// 将 canvas 转为图片 URL
      const imageUrl = canvas.toDataURL("image/png");
      console.log(imageUrl);
      // 调用接口上传图片

// 创建一个下载链接
      // const downloadLink = document.createElement("a");
      // downloadLink.href = imageUrl;
      // downloadLink.download = "captured_image.png";

// 模拟点击下载链接
      // downloadLink.click();
    },
    onChange(index, name) {
      this[name] = index;
    },
    onCancel(index, name) {
      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;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    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("连接错误");
    },
    getMessage: function (msg) {
      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 = "";
    },

handleFileChange(event) {
      let file = event.target.files[0];
      if (file) {
        this.UpFile.push(file);
      }
    },
  },
  destroyed() {
    // 销毁监听
    this.close();
  },
  mounted() {
    if (this.$route.params.name == "扫描打印") {
      this.init();
    }
  },
};
</script>

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <div class="box flex-center" v-show="name == 'U盘打印'">
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。
        </div>
      </div>
      <div class="file tip2">
        <div class="main">
          <div v-for="(item,index) in UpFile" v-bind:key="index" class="flex-between li">
            <div class="name">{{item.name}}</div>
            <span @click="onCancel(index,'UpFile')">删除</span>
          </div>
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">选择文件
            <input type="file" @change="handleFileChange" />
          </div>
          <div class="btn flex-center" @click="skip('transcoding',name)">确认资料</div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-show="name == '扫描复印'">
      <div class="file2">
        <div class="title">已完成扫描的版面</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
            :src="imgList[smfyIndex]"
            alt=""
            style="width: 25rem; height: 100%"
          />
        </div>
      </div>
      <div class="tip tip2">
        <div class="title">温馨提示</div>
        <div class="content">
          宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
          按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。
        </div>
        <div class="flex-between but">
          <div class="btn flex-center" @click="paiz()">继续扫描</div>
          <div class="btn flex-center" @click="skip('transcoding', name)">
            完成扫描
          </div>
        </div>
      </div>
    </div>
    
    <div class="box flex-center" v-show="name == '身份证打印'">
      <div class="file2 file3" style="margin-right: 20rem">
        <div class="title">请核对您的信息</div>
        <div class="card" ref="captureArea">
          <div class="card-box">
            <img src="../assets/card2.png" alt="身份证反面" />
            <div class="card-name">{{ cardInfo.name }}</div>
            <div class="card-gender">
              {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span>
            </div>
            <div class="card-birth">
              {{ cardInfo.birthday | joinYear }}
              <span class="month">{{ cardInfo.birthday | joinMonth }}</span
              ><span class="day">{{ cardInfo.birthday | joinDay }}</span>
            </div>
            <div class="card-addr">
              {{ cardInfo.address }}
            </div>
            <div class="card-id">{{ cardInfo.idNumber }}</div>
            <div class="card-avatar">
              <img :src="cardInfo.imageName" alt="" />
            </div>
          </div>
          <div class="card-box">
            <img src="../assets/card1.png" alt="身份证正面" />
            <div class="card-sign">珠海市公安局</div>
            <div class="card-date">
              {{ cardInfo.issuedData }} - {{ cardInfo.validDate }}
            </div>
          </div>
        </div>
      </div>
      <div class="tip">
        <div class="title">温馨提示</div>
        <div class="content">
          身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。
        </div>
        <div class="btn flex-center" @click="skip('transcoding', name)">
          信息无误，继续
        </div>
      </div>
    </div>
  </div>
</template>