Skip to content

V
vue-gjjs
Commit ac0b51d5 by 潘际乾
Options

OCR识别接口

parent 6fd20162
Showing with 130 additions and 54 deletions
src/components/IStreamTable.vue
...@@ -353,7 +353,7 @@ export default { ...@@ -353,7 +353,7 @@ export default {
}; };
</script> </script>
<style> <style scoped>
.eContainer-table-block { .eContainer-table-block {
margin-top: 15px; margin-top: 15px;
position: relative; position: relative;
......
src/views/Business/Ditdck/Docpre.vue
...@@ -206,6 +206,9 @@ ...@@ -206,6 +206,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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-button slot="reference" @click="addPDF(scope.row.id)">添加</el-button>
</el-popover> </el-popover>
</template> </template>
...@@ -475,4 +478,15 @@ export default { ...@@ -475,4 +478,15 @@ export default {
.addCss { .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> </style>
\ No newline at end of file
src/views/Business/Ditdck/OcrRecognition.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="pdf-file"> <div class="pdf-file">
<el-scrollbar :style="{ height: imgContainerHeight + 'px' }"> <el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
<div style="height: 100%;display: flex;justify-content: center;"> <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> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
...@@ -49,17 +49,17 @@ ...@@ -49,17 +49,17 @@
<c-col :span="24" v-if="formData.type === 'commercial_invoice'"> <c-col :span="24" v-if="formData.type === 'commercial_invoice'">
<c-col :span="24"> <c-col :span="24">
<el-form-item label="发票日期"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="发票金额"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="是否正本"> <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 <el-option
v-for="(item, idx) in invoicesOriginalOptions" v-for="(item, idx) in invoicesOriginalOptions"
:key="idx" :key="idx"
...@@ -74,47 +74,47 @@ ...@@ -74,47 +74,47 @@
<c-col :span="24" v-if="formData.type === 'bill_of_lading'"> <c-col :span="24" v-if="formData.type === 'bill_of_lading'">
<c-col :span="24"> <c-col :span="24">
<el-form-item label="发货人"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="收货人"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="通知地址"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="船舶"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="装货港"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="卸货港"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="托运人的货物描述"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="毛重"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="据称重量"> <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> </el-form-item>
</c-col> </c-col>
</c-col> </c-col>
...@@ -122,57 +122,57 @@ ...@@ -122,57 +122,57 @@
<c-col :span="24" v-if="formData.type === 'marine_cargo_certificate'"> <c-col :span="24" v-if="formData.type === 'marine_cargo_certificate'">
<c-col :span="24"> <c-col :span="24">
<el-form-item label="证书号码"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="预约保险单编号"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="帐号"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="被保险人"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="保险金额"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="航次"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="参考编号"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="航班号"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="出发日期"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="达到日期"> <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> </el-form-item>
</c-col> </c-col>
<c-col :span="24"> <c-col :span="24">
<el-form-item label="空运单编号"> <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> </el-form-item>
</c-col> </c-col>
</c-col> </c-col>
...@@ -184,6 +184,8 @@ ...@@ -184,6 +184,8 @@
</template> </template>
<script> <script>
import axios from 'axios'
import bill_of_ladingPdf from "~/assets/demo-files/bill_of_lading.pdf"; import bill_of_ladingPdf from "~/assets/demo-files/bill_of_lading.pdf";
import commercial_invoicePdf from "~/assets/demo-files/commercial_invoice.pdf"; import commercial_invoicePdf from "~/assets/demo-files/commercial_invoice.pdf";
import marine_cargo_certificatePdf from "~/assets/demo-files/marine_cargo_certificate.pdf"; import marine_cargo_certificatePdf from "~/assets/demo-files/marine_cargo_certificate.pdf";
...@@ -195,9 +197,9 @@ export default { ...@@ -195,9 +197,9 @@ export default {
show: false, show: false,
fileName: "KZ3500220597AA-001.pdf", fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf", // fileUrl: "/invoice.pdf",
// fileUrl: require("~/assets/demo-files/bill_of_lading.png"), // fileUrl: require("~/assets/demo-files/bill_of_lading.jpg"),
fileUrl: require("~/assets/demo-files/commercial_invoice.png"), fileUrl: require("~/assets/demo-files/commercial_invoice.jpg"),
// fileUrl: require("~/assets/demo-files/marine_cargo_certificate.png"), // fileUrl: require("~/assets/demo-files/marine_cargo_certificate.jpg"),
imgContainerHeight: 0, imgContainerHeight: 0,
fileType: [ fileType: [
{ label: "商业发票", value: "commercial_invoice" }, { label: "商业发票", value: "commercial_invoice" },
...@@ -210,34 +212,34 @@ export default { ...@@ -210,34 +212,34 @@ export default {
], ],
formData: { formData: {
type: 'commercial_invoice', type: 'commercial_invoice',
invoices: { "commercial invoice": {
date: '5 DEC 2021', 'Date': '',
amount: "USD 223000.00", 'TOTAL CONTRACT VALUE': "",
original: 1 original: 1
}, },
lading: { "bill of lading": {
shipper: 'HAMERSLEY IRON PTY.LIMITED\rA.B.N. 49 004 558 276', "Shipper": '',
consignee: 'TO ORDER', "Consignee": '',
address: '', "Notify address": '',
vessel: 'BULK INGENUITY', "Vessel": '',
loading: 'DAMPIER, WESTERN\rAUSTRALIA', "Port of Loading": '',
discharge: 'MAIN PORT(S), CHINA', "Port of Discharge": '',
description: 'NO MARKS IN BULK', "Shipper's description of goods": '',
gross_weight: 'SP10L', "GROSS WEIGHT": '',
said_to_weigh: '81,599\rWMT' "SAID TO WEIGH": ''
}, },
marine: { "marine cargo certificate": {
certificate: '01-M0549399-CAN', "Certificate Number": '',
policy: '01-M0542662-0CP', "Open Policy Number": '',
account: '01-5120005-H0K0792', "Account Number": '',
assured: 'ELECTRONIC SCIENTIFIC ENGINEERING LIMITED', assured: '',
sum_insured: 'USD 24.530.00', "Sum Insured": '',
voyage: 'From Hong Kong Alrport to Belling Capltal\rInternatlonal AlrportP.R.China', voyage: '',
reference: 'C411121104', "Reference No": '',
airline: 'CX368', "Airline/Fight No": '',
departing: '02-Dec-2021', "Departing on or about": '',
arrival: '05-Dec-2021', "Arrival on or about": '',
airway: 'HKAE-002054' "Airway Bill No": ''
} }
} }
}; };
...@@ -265,7 +267,55 @@ export default { ...@@ -265,7 +267,55 @@ export default {
this.show = false; this.show = false;
}, },
fileTypeChangeEvent(val) { 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 = {}) => ({ ...@@ -68,6 +68,17 @@ module.exports = (options = {}) => ({
pathRewrite: { pathRewrite: {
'^/gjjs': '/gjjs' '^/gjjs': '/gjjs'
} }
},
/**
* ocr智能识别服务
*/
'/ocr/': {
target: 'http://192.168.0.110:5010',
// target: 'http://127.0.0.1:5000',
changeOrigin: true,
pathRewrite: {
'^/ocr': '/'
}
} }
}, },
historyApiFallback: { 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