|
|
@@ -1,40 +1,37 @@
|
|
|
<template>
|
|
|
- <div class="upload">
|
|
|
- <div class="bottom">
|
|
|
- <img
|
|
|
- v-for="(item, index) in newImg"
|
|
|
- :key="index"
|
|
|
- :src="item.url"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <div class="upinput" v-if="!show">
|
|
|
- <Icon type="md-reverse-camera" />
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- accept="image/*"
|
|
|
- multiple
|
|
|
- @change="selectImg($event)"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div v-if="!show">
|
|
|
+ <div class="upload">
|
|
|
+ <Icon type="md-reverse-camera" />
|
|
|
+ <form id="psd">
|
|
|
+ <input type="file" accept="image/*" @change="selectImg($event)" />
|
|
|
+ </form>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <span v-if="!table.length">{{ err }}</span>
|
|
|
- <p v-else v-for="(item,id) in table" :key="id">{{item.name}}：{{item.num}}</p>
|
|
|
- </div>
|
|
|
- <div class="top">
|
|
|
- <Button type="primary" size="large" @click="save" v-if="!show"
|
|
|
- >识别</Button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="loading" v-if="show">
|
|
|
- <div class="spinner"></div>
|
|
|
+ <div class="list">
|
|
|
+ <img
|
|
|
+ v-for="(item, id) in newImg"
|
|
|
+ :key="id + '6s'"
|
|
|
+ :src="item.url"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p v-for="(item, id) in table" :key="id">
|
|
|
+ {{ item.name }}：{{ item.num }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <Button type="primary" @click="save" size="large">开始</Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="loading" v-else>
|
|
|
+ <div class="spinner"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { Icon, Button } from "view-design";
|
|
|
+import { Icon, Button, Notice } from "view-design";
|
|
|
import "view-design/dist/styles/iview.css";
|
|
|
import axios from "@/utils/axios";
|
|
|
+import ImageCompressor from "js-image-compressor";
|
|
|
export default {
|
|
|
components: {
|
|
|
Icon,
|
|
|
@@ -42,26 +39,46 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- newImg: [],
|
|
|
show: false,
|
|
|
- err: "",
|
|
|
- table:[]
|
|
|
+ newImg: [],
|
|
|
+ table: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // 选择图片
|
|
|
+ // 选择多张图片
|
|
|
selectImg(event) {
|
|
|
const file = event.target.files;
|
|
|
- const size = 10485760; //10M
|
|
|
+ const size = 2097152; //2M
|
|
|
const newArr = [];
|
|
|
if (file.length > 1) {
|
|
|
- this.err = "不能超过1张";
|
|
|
+ Notice.warning({
|
|
|
+ desc: "不能超过1张",
|
|
|
+ });
|
|
|
return;
|
|
|
}
|
|
|
for (let j = 0; j < file.length; j++) {
|
|
|
const el = file[j];
|
|
|
if (el.size > size) {
|
|
|
- this.err = el.name + "大小超过限制";
|
|
|
+ Notice.warning({
|
|
|
+ desc: el.name + "大小超过限制将被压缩",
|
|
|
+ });
|
|
|
+ // 压缩
|
|
|
+ new ImageCompressor({
|
|
|
+ file: el,
|
|
|
+ quality: 0.3,
|
|
|
+ mimeType: "image/jpeg",
|
|
|
+ success: (result) => {
|
|
|
+ newArr.push({
|
|
|
+ url: this.getObjectURL(result),
|
|
|
+ data: result,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ error: function (msg) {
|
|
|
+ Notice.warning({
|
|
|
+ desc: "请重新上传",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
continue;
|
|
|
} else {
|
|
|
newArr.push({
|
|
|
@@ -71,7 +88,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
this.newImg = newArr;
|
|
|
- this.err = "";
|
|
|
},
|
|
|
// 图片临时路径
|
|
|
getObjectURL(file) {
|
|
|
@@ -88,204 +104,187 @@ export default {
|
|
|
// 识别
|
|
|
async save() {
|
|
|
if (!this.newImg.length) return;
|
|
|
- this.show = true;
|
|
|
- const formData = new FormData();
|
|
|
- formData.append("pic", this.newImg[0].data);
|
|
|
- const res = await axios.post("/uploadOneInvoicePic", formData);
|
|
|
- if (res.success) {
|
|
|
- const newArr = this.setData(res.data.invoice_data.words_result[0].result)
|
|
|
- this.table = newArr
|
|
|
- } else {
|
|
|
- this.err = "识别错误";
|
|
|
- this.table = []
|
|
|
+ try {
|
|
|
+ this.show = true;
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("pic", this.newImg[0].data);
|
|
|
+ const res = await axios.post("/uploadOneInvoicePic", formData);
|
|
|
+ this.table = this.setData(res.data.invoice_data.words_result[0].result);
|
|
|
+ document.getElementById("psd").reset();
|
|
|
+ } catch (error) {
|
|
|
+ Notice.warning({
|
|
|
+ desc: error,
|
|
|
+ });
|
|
|
}
|
|
|
this.show = false;
|
|
|
},
|
|
|
// 处理数据
|
|
|
setData(data) {
|
|
|
+ if (!data && !data.length) return [];
|
|
|
let content = [];
|
|
|
for (const key in data) {
|
|
|
content.push({
|
|
|
- name: this.names(key) || '无',
|
|
|
- num: data[key].length ? data[key][0].word : ''
|
|
|
- })
|
|
|
+ name: this.names(key) || "无",
|
|
|
+ num: data[key].length ? data[key][0].word : "",
|
|
|
+ });
|
|
|
}
|
|
|
- return content
|
|
|
+ return content;
|
|
|
},
|
|
|
// 名词
|
|
|
- names(key){
|
|
|
- let name = ''
|
|
|
- switch (key) {
|
|
|
- case "AmountInFiguers":
|
|
|
- name = "合计"
|
|
|
- break;
|
|
|
- case "AmountInWords":
|
|
|
- name = '合计大写'
|
|
|
- break;
|
|
|
- case "CheckCode":
|
|
|
- name = '校验码'
|
|
|
- break;
|
|
|
- case "Checker":
|
|
|
- name = '复核'
|
|
|
- break;
|
|
|
- case "InvoiceCode":
|
|
|
- name = '发票代码'
|
|
|
- break;
|
|
|
- case "InvoiceCodeConfirm":
|
|
|
- name = '发票代码确认'
|
|
|
- break;
|
|
|
- case "InvoiceDate":
|
|
|
- name = '发票日期'
|
|
|
- break;
|
|
|
- case "InvoiceNum":
|
|
|
- name = '发票编号'
|
|
|
- break;
|
|
|
- case "InvoiceNumConfirm":
|
|
|
- name = '发票编号确认'
|
|
|
- break;
|
|
|
- case "NoteDrawer":
|
|
|
- name = '开票人'
|
|
|
- break;
|
|
|
- case "Payee":
|
|
|
- name = '收款人'
|
|
|
- break;
|
|
|
- case "PurchaserAddress":
|
|
|
- name = '买方地址'
|
|
|
- break;
|
|
|
- case "PurchaserBank":
|
|
|
- name = '买方银行信息'
|
|
|
- break;
|
|
|
- case "PurchaserName":
|
|
|
- name = '买方名称'
|
|
|
- break;
|
|
|
- case "PurchaserRegisterNum":
|
|
|
- name = '买方识别号'
|
|
|
- break;
|
|
|
- case "SellerAddress":
|
|
|
- name = '卖方地址'
|
|
|
- break;
|
|
|
- case "SellerBank":
|
|
|
- name = '卖方银行信息'
|
|
|
- break;
|
|
|
- case "SellerName":
|
|
|
- name = '卖方名称'
|
|
|
- break;
|
|
|
- case "SellerRegisterNum":
|
|
|
- name = '卖方识别号'
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- return name
|
|
|
- }
|
|
|
+ names(key) {
|
|
|
+ let name = "";
|
|
|
+ switch (key) {
|
|
|
+ case "AmountInFiguers":
|
|
|
+ name = "合计";
|
|
|
+ break;
|
|
|
+ case "AmountInWords":
|
|
|
+ name = "合计大写";
|
|
|
+ break;
|
|
|
+ case "CheckCode":
|
|
|
+ name = "校验码";
|
|
|
+ break;
|
|
|
+ case "Checker":
|
|
|
+ name = "复核";
|
|
|
+ break;
|
|
|
+ case "InvoiceCode":
|
|
|
+ name = "发票代码";
|
|
|
+ break;
|
|
|
+ case "InvoiceCodeConfirm":
|
|
|
+ name = "发票代码确认";
|
|
|
+ break;
|
|
|
+ case "InvoiceDate":
|
|
|
+ name = "发票日期";
|
|
|
+ break;
|
|
|
+ case "InvoiceNum":
|
|
|
+ name = "发票编号";
|
|
|
+ break;
|
|
|
+ case "InvoiceNumConfirm":
|
|
|
+ name = "发票编号确认";
|
|
|
+ break;
|
|
|
+ case "NoteDrawer":
|
|
|
+ name = "开票人";
|
|
|
+ break;
|
|
|
+ case "Payee":
|
|
|
+ name = "收款人";
|
|
|
+ break;
|
|
|
+ case "PurchaserAddress":
|
|
|
+ name = "买方地址";
|
|
|
+ break;
|
|
|
+ case "PurchaserBank":
|
|
|
+ name = "买方银行信息";
|
|
|
+ break;
|
|
|
+ case "PurchaserName":
|
|
|
+ name = "买方名称";
|
|
|
+ break;
|
|
|
+ case "PurchaserRegisterNum":
|
|
|
+ name = "买方识别号";
|
|
|
+ break;
|
|
|
+ case "SellerAddress":
|
|
|
+ name = "卖方地址";
|
|
|
+ break;
|
|
|
+ case "SellerBank":
|
|
|
+ name = "卖方银行信息";
|
|
|
+ break;
|
|
|
+ case "SellerName":
|
|
|
+ name = "卖方名称";
|
|
|
+ break;
|
|
|
+ case "SellerRegisterNum":
|
|
|
+ name = "卖方识别号";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return name;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.upload {
|
|
|
- width: 3.5rem;
|
|
|
- background: rgb(37, 45, 60);
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ overflow: hidden;
|
|
|
+ border: dashed 1px #dcdee2;
|
|
|
+ color: #dcdee2;
|
|
|
+ position: relative;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 0.1rem;
|
|
|
- padding: 0.1rem;
|
|
|
- overflow-x: hidden;
|
|
|
- color: #dcdee2;
|
|
|
- font-size: 0.16rem;
|
|
|
- .top {
|
|
|
- text-align: center;
|
|
|
- padding: 0.2rem 0 0.1rem 0;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.35rem;
|
|
|
+ input {
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- .bottom {
|
|
|
- display: flex;
|
|
|
- flex-flow: wrap;
|
|
|
- max-height: 3rem;
|
|
|
- overflow-y: auto;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ .list {
|
|
|
+ padding: 0.1rem 0;
|
|
|
+ max-height: 6rem;
|
|
|
+ color: #dcdee2;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.16rem;
|
|
|
overflow-x: hidden;
|
|
|
- .upinput {
|
|
|
- border: 1px dashed #dcdee2;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0;
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.8rem;
|
|
|
- border-radius: 4px;
|
|
|
- text-align: center;
|
|
|
- font-size: 0.3rem;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- margin-left: 0.03rem;
|
|
|
- input {
|
|
|
- position: absolute;
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.8rem;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ overflow-y: auto;
|
|
|
img {
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.8rem;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 3rem;
|
|
|
font-size: 0;
|
|
|
- margin-bottom: 0.03rem;
|
|
|
- &:not(:nth-child(5n + 1)) {
|
|
|
- margin-left: 0.03rem;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .content {
|
|
|
- padding: 0.1rem 0;
|
|
|
- max-height: 6rem;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 0.1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.loading {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 96;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .spinner {
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ background-color: #dcdee2;
|
|
|
+ margin: 0 auto;
|
|
|
+ -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
+ animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
}
|
|
|
- .loading {
|
|
|
- position: fixed;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- z-index: 96;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .spinner {
|
|
|
- width: 0.4rem;
|
|
|
- height: 0.4rem;
|
|
|
- background-color: #dcdee2;
|
|
|
- margin: 0 auto;
|
|
|
- -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
- animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
|
- }
|
|
|
|
|
|
- @-webkit-keyframes sk-rotateplane {
|
|
|
- 0% {
|
|
|
- -webkit-transform: perspective(1.2rem);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- -webkit-transform: perspective(1.2rem) rotateY(180deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- -webkit-transform: perspective(1.2rem) rotateY(180deg) rotateX(180deg);
|
|
|
- }
|
|
|
+ @-webkit-keyframes sk-rotateplane {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: perspective(1.2rem);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ -webkit-transform: perspective(1.2rem) rotateY(180deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: perspective(1.2rem) rotateY(180deg) rotateX(180deg);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- @keyframes sk-rotateplane {
|
|
|
- 0% {
|
|
|
- transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
|
|
|
- -webkit-transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
|
|
|
- -webkit-transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: perspective(1.2rem) rotateX(-180deg) rotateY(-179.9deg);
|
|
|
- -webkit-transform: perspective(1.2rem) rotateX(-180deg)
|
|
|
- rotateY(-179.9deg);
|
|
|
- }
|
|
|
+ @keyframes sk-rotateplane {
|
|
|
+ 0% {
|
|
|
+ transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
|
|
|
+ -webkit-transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
|
|
|
+ -webkit-transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: perspective(1.2rem) rotateX(-180deg) rotateY(-179.9deg);
|
|
|
+ -webkit-transform: perspective(1.2rem) rotateX(-180deg) rotateY(-179.9deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
