对接接口

hanfei / VueSharedPrinting

Browse code 对接接口 master
1 parent 564c460 commit 6d1ca81e76bb7e0595e916ca755d5604e246922a hanfei authored on 26 Dec 2023

Patch

Showing 7 changed files

Ignore Space Show notes View package-lock.json
Not supported

Ignore Space Show notes View package.json
{ "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.2", "core-js": "^3.6.5", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "vue": "^2.6.11", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } { "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "vue": "^2.6.11", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

Ignore Space Show notes View

package.json

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "core-js": "^3.6.5",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Ignore Space Show notes View src/main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import './utils/rem' import axios from 'axios' Vue.prototype.$axios = axios import cite from './utils/cite' Vue.prototype.cite = cite; Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') import Vue from 'vue' import App from './App.vue' import router from './router' import './utils/rem' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')

Ignore Space Show notes View

src/main.js

Ignore Space Show notes View src/utils/cite.js 0 → 100644
// 引用地址 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/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=='打印价格'"> <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> </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"; export default { name: "explain", components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, } }, 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); }); }, }, 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> <template> <!--说明--> <div class="explain"> <navbar :name="name"/> <div class="box"> <div v-if="name=='使用教程'"> <div class="content">使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程</div> </div> <div v-if="name=='打印价格'"> <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> </div> <div v-if="name=='客服助手'"> <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。</div> </div> </div> <div class="btn flex-center">确定</div> </div> </template> <script> import navbar from '@/components/nav' export default { name: "explain", components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, } }, } </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 21rem; 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; .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } .btn { width: 114.06rem; 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; margin: 3.19rem auto 0; } } </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=='打印价格'">
        <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div>
        <div class="content">6寸相纸/热升华相纸 [照片、 证件照打印]:证件照: XXX 元/ 张(版)照 片: XXX元/张</div>
      </div>
      <div v-if="name=='客服助手'">
        <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "explain",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.name,
      type: ''
    }
  },
  data() {
    return {
      name: this.$route.params.name,
    }
  },
  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);
      });
    },
  },
  mounted() {
    this.getDate()
  }
}
</script>

export default {
  name: "explain",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.name,
      type: ''
    }
  },
  data() {
    return {
      name: this.$route.params.name,
    }
  },
}
</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">{{item.name}}</div>--> <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"> <div class="title">请核对您的信息</div> <div class="main"></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' export default { name: "selectFile", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: 0, UpFile: [] } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, 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: 15.31rem; //width: 32.69rem; 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; } } .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">{{item.name}}</div>--> <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"> <div class="title">请核对您的信息</div> <div class="main"></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' export default { name: "selectFile", components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交', name: this.$route.params.name, path:"ws://127.0.0.1:7000/", socket: '', imgList: [], smfyIndex: 0, UpFile: [] } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, 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: 15.31rem; //width: 32.69rem; 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; } } .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">
        <div class="title">请核对您的信息</div>
        <div class="main"></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>

export default {
  name: "selectFile",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      path: this.cite.inWebURL,
      socket: '',
      imgList: [],
      smfyIndex: 0,

UpFile: []
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    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>

export default {
  name: "selectFile",
  components: {
    navbar
  },
  provide() {
    return {
      title: this.tit,
      type: this.name
    }
  },
  data() {
    return {
      tit: this.$route.params.name=='U盘打印'?'资料选取提交':'资料扫描提交',
      name: this.$route.params.name,
      path:"ws://127.0.0.1:7000/",
      socket: '',
      imgList: [],
      smfyIndex: 0,

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 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.readAsDataURL(msg.data);

}
    },
    close: function () {
      // console.log("socket已经关闭")
      this.socket.close()
      this.socket=''
    },

Ignore Space Show notes View vue.config.js
// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } }, devServer: { proxy: { //配置跨域 "/api": { //url识别符 target: "http://192.168.250.29:8888", // server地址 changOrigin: true, //允许跨域 pathRewrite: { "^/api": "", }, }, }, }, } // 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } }, }

Ignore Space Show notes View

vue.config.js

Show line notes below