Skip to content

V
vue-gjjs
Commit ac0b51d5 by 潘际乾
Options

OCR识别接口

parent 6fd20162
Showing with 140 additions and 64 deletions
src/components/IStreamTable.vue
......@@ -353,7 +353,7 @@ export default {
};
</script>
<style>
<style scoped>
.eContainer-table-block {
margin-top: 15px;
position: relative;
......
src/views/Business/Ditdck/Docpre.vue
......@@ -195,17 +195,20 @@
<el-table :data="gridPDFData">
<el-table-column width="300px" property="name" label="name"></el-table-column>
<el-table-column label="操作" width="80px">
<template slot-scope="scoped">
<el-button
style="margin-left:0"
size="small"
type="primary"
@click="openPdfDialog(scope.row.id, scoped.$index)"
>选择</el-button
>
</template>
</el-table-column>
<template slot-scope="scoped">
<el-button
style="margin-left:0"
size="small"
type="primary"
@click="openPdfDialog(scope.row.id, scoped.$index)"
>选择</el-button
>
</template>
</el-table-column>
</el-table>
<div class="file-add" title="导入文件">
<i class="el-icon-plus"></i>
</div>
<el-button slot="reference" @click="addPDF(scope.row.id)">添加</el-button>
</el-popover>
</template>
......@@ -475,4 +478,15 @@ export default {
.addCss {
}
.file-add {
margin-top: 16px;
text-align: center;
font-size: 16px;
cursor: pointer;
border: 1px solid #EBEEF5;
}
.file-add:hover {
color: #5cb6ff;
border: 1px solid #5cb6ff;
}
</style>
\ No newline at end of file
src/views/Business/Ditdck/OcrRecognition.vue
......@@ -21,7 +21,7 @@
<div class="pdf-file">
<el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
<div style="height: 100%;display: flex;justify-content: center;">
<img :src="fileUrl" alt="单据" style="display: block;" />
<el-image :src="fileUrl" @load="ocr" alt="单据" style="display: block;"></el-image>
</div>
</el-scrollbar>
</div>
......@@ -49,17 +49,17 @@
<c-col :span="24" v-if="formData.type === 'commercial_invoice'">
<c-col :span="24">
<el-form-item label="发票日期">
<c-input type="textarea" v-model="formData.invoices.date"></c-input>
<c-input type="textarea" v-model="formData['commercial invoice']['Date']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="发票金额">
<c-input type="textarea" v-model="formData.invoices.amount"></c-input>
<c-input type="textarea" v-model="formData['commercial invoice']['TOTAL CONTRACT VALUE']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="是否正本">
<c-select v-model="formData.invoices.original" style="width: 100%;">
<c-select v-model="formData['commercial invoice'].original" style="width: 100%;">
<el-option
v-for="(item, idx) in invoicesOriginalOptions"
:key="idx"
......@@ -74,47 +74,47 @@
<c-col :span="24" v-if="formData.type === 'bill_of_lading'">
<c-col :span="24">
<el-form-item label="发货人">
<c-input type="textarea" v-model="formData.lading.shipper"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Shipper']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="收货人">
<c-input type="textarea" v-model="formData.lading.consignee"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Consignee']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="通知地址">
<c-input type="textarea" v-model="formData.lading.address"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Notify address']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="船舶">
<c-input type="textarea" v-model="formData.lading.vessel"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Vessel']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="装货港">
<c-input type="textarea" v-model="formData.lading.loading"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Port of Loading']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="卸货港">
<c-input type="textarea" v-model="formData.lading.loading"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['Port of Discharge']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="托运人的货物描述">
<c-input type="textarea" v-model="formData.lading.description"></c-input>
<!-- <c-input type="textarea" v-model="formData['bill of lading']['Shipper's description of goods']"></c-input> -->
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="毛重">
<c-input type="textarea" v-model="formData.lading.gross_weight"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['GROSS WEIGHT']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="据称重量">
<c-input type="textarea" v-model="formData.lading.said_to_weigh"></c-input>
<c-input type="textarea" v-model="formData['bill of lading']['SAID TO WEIGH']"></c-input>
</el-form-item>
</c-col>
</c-col>
......@@ -122,57 +122,57 @@
<c-col :span="24" v-if="formData.type === 'marine_cargo_certificate'">
<c-col :span="24">
<el-form-item label="证书号码">
<c-input type="textarea" v-model="formData.marine.certificate"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Certificate Number']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="预约保险单编号">
<c-input type="textarea" v-model="formData.marine.policy"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Open Policy Number']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="帐号">
<c-input type="textarea" v-model="formData.marine.account"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Account Number']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="被保险人">
<c-input type="textarea" v-model="formData.marine.assured"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate'].assured"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="保险金额">
<c-input type="textarea" v-model="formData.marine.sum_insured"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Sum Insured']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="航次">
<c-input type="textarea" v-model="formData.marine.voyage"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate'].voyage"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="参考编号">
<c-input type="textarea" v-model="formData.marine.reference"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Reference No']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="航班号">
<c-input type="textarea" v-model="formData.marine.airline"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Airline/Fight No']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="出发日期">
<c-input type="textarea" v-model="formData.marine.departing"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Departing on or about']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="达到日期">
<c-input type="textarea" v-model="formData.marine.arrival"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Arrival on or about']"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="空运单编号">
<c-input type="textarea" v-model="formData.marine.airway"></c-input>
<c-input type="textarea" v-model="formData['marine cargo certificate']['Airway Bill No']"></c-input>
</el-form-item>
</c-col>
</c-col>
......@@ -184,6 +184,8 @@
</template>
<script>
import axios from 'axios'
import bill_of_ladingPdf from "~/assets/demo-files/bill_of_lading.pdf";
import commercial_invoicePdf from "~/assets/demo-files/commercial_invoice.pdf";
import marine_cargo_certificatePdf from "~/assets/demo-files/marine_cargo_certificate.pdf";
......@@ -195,9 +197,9 @@ export default {
show: false,
fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf",
// fileUrl: require("~/assets/demo-files/bill_of_lading.png"),
fileUrl: require("~/assets/demo-files/commercial_invoice.png"),
// fileUrl: require("~/assets/demo-files/marine_cargo_certificate.png"),
// fileUrl: require("~/assets/demo-files/bill_of_lading.jpg"),
fileUrl: require("~/assets/demo-files/commercial_invoice.jpg"),
// fileUrl: require("~/assets/demo-files/marine_cargo_certificate.jpg"),
imgContainerHeight: 0,
fileType: [
{ label: "商业发票", value: "commercial_invoice" },
......@@ -210,34 +212,34 @@ export default {
],
formData: {
type: 'commercial_invoice',
invoices: {
date: '5 DEC 2021',
amount: "USD 223000.00",
"commercial invoice": {
'Date': '',
'TOTAL CONTRACT VALUE': "",
original: 1
},
lading: {
shipper: 'HAMERSLEY IRON PTY.LIMITED\rA.B.N. 49 004 558 276',
consignee: 'TO ORDER',
address: '',
vessel: 'BULK INGENUITY',
loading: 'DAMPIER, WESTERN\rAUSTRALIA',
discharge: 'MAIN PORT(S), CHINA',
description: 'NO MARKS IN BULK',
gross_weight: 'SP10L',
said_to_weigh: '81,599\rWMT'
"bill of lading": {
"Shipper": '',
"Consignee": '',
"Notify address": '',
"Vessel": '',
"Port of Loading": '',
"Port of Discharge": '',
"Shipper's description of goods": '',
"GROSS WEIGHT": '',
"SAID TO WEIGH": ''
},
marine: {
certificate: '01-M0549399-CAN',
policy: '01-M0542662-0CP',
account: '01-5120005-H0K0792',
assured: 'ELECTRONIC SCIENTIFIC ENGINEERING LIMITED',
sum_insured: 'USD 24.530.00',
voyage: 'From Hong Kong Alrport to Belling Capltal\rInternatlonal AlrportP.R.China',
reference: 'C411121104',
airline: 'CX368',
departing: '02-Dec-2021',
arrival: '05-Dec-2021',
airway: 'HKAE-002054'
"marine cargo certificate": {
"Certificate Number": '',
"Open Policy Number": '',
"Account Number": '',
assured: '',
"Sum Insured": '',
voyage: '',
"Reference No": '',
"Airline/Fight No": '',
"Departing on or about": '',
"Arrival on or about": '',
"Airway Bill No": ''
}
}
};
......@@ -265,7 +267,55 @@ export default {
this.show = false;
},
fileTypeChangeEvent(val) {
this.fileUrl = require(`~/assets/demo-files/${val}.png`)
this.fileUrl = require(`~/assets/demo-files/${val}.jpg`)
},
ocr() {
const image = new Image();
image.crossOrigin = 'Anonymous';
image.src = this.fileUrl;
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
var dataURL = canvas.toDataURL('image/jpeg')// base64 格式
var blob = this.dataURItoBlob(dataURL) //转二进制
const file = new File([blob], `${this.formData.type}.jpg`, { type: blob.type })
const formData = new FormData();
formData.append('mode', 'formdata');
formData.append('the_file', file)
const loading = this.$parent.root.loading("正在识别中...")
axios.post('/ocr/file', formData, {
'Content-Type': 'multipart/form-data'
}).then(res => {
const data = res.data
if (data.code === 200) {
this.updateFormData(data.data)
} else {
this.$message.error(`识别失败：${data.data.err}`);
}
loading.close()
}).catch(error => {
loading.close()
})
}
},
dataURItoBlob (dataURI) {
const arr = dataURI.split(',')
// const mimeString = arr[0].match(/:(.*?);/)[0];
const mimeString = arr[0].split(':')[1].split(';')[0];
// base64 解码
const byteString = window.atob(arr[1]);
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
},
updateFormData(data) {
this.formData[data.template_name] = Object.assign(this.formData[data.template_name], data.ocr_text)
}
},
};
......
webpack.config.js
......@@ -68,6 +68,17 @@ module.exports = (options = {}) => ({
pathRewrite: {
'^/gjjs': '/gjjs'
}
},
/**
* ocr智能识别服务
*/
'/ocr/': {
target: 'http://192.168.0.110:5010',
// target: 'http://127.0.0.1:5000',
changeOrigin: true,
pathRewrite: {
'^/ocr': '/'
}
}
},
historyApiFallback: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment