550 lines
22 KiB
Vue
550 lines
22 KiB
Vue
<template>
|
||
<div class="main">
|
||
<largeScreenHeader></largeScreenHeader>
|
||
<div class="mainContent">
|
||
<div class="boxLevelOne sideBoxLevelOne">
|
||
<div class="boxLevelTwo boxLevelTwoFst">
|
||
<boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
|
||
<pieIDResultCount></pieIDResultCount>
|
||
</div>
|
||
|
||
<div class="boxLevelTwo">
|
||
<boxHeader :boxHeaderText="'识别结果展示'"></boxHeader>
|
||
<div class="faceContentBox">
|
||
<img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
|
||
<table class="faceContentTable">
|
||
<thead>
|
||
<tr class="faceContentRow">
|
||
<th class="faceContentColume faceContentColumeSort">序号</th>
|
||
<th class="faceContentColume faceContentColumeIPAddr">访问地址</th>
|
||
<th class="faceContentColume faceContentColumeDate">访问时间</th>
|
||
<th class="faceContentColume faceContentColumeTime">响应时长</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in recognition.slice(0, 7)" :key="index"
|
||
:class="{ 'faceContentRowEven': index % 2 === 0, 'faceContentRowPrime': index % 2 !== 0 }">
|
||
<td class="faceContentColume faceContentColumeSort">{{ index + 1 }}</td>
|
||
<td class="faceContentColume faceContentColumeIPAddr">{{ item.ip }}</td>
|
||
<td class="faceContentColume faceContentColumeDate">{{ item.returnTime }}</td>
|
||
<td class="faceContentColume faceContentColumeTime">{{ item.responseTime }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="boxLevelOne midBoxLevelOne">
|
||
<boxHeader :boxHeaderText="'OCR识别应用'"></boxHeader>
|
||
<div class="pressButton">
|
||
<button class="IDpressButtons1 ">身份证识别</button>
|
||
<button class="invoicePressButtons1 " @click="goToInvoiceRecognition">发票识别</button>
|
||
<button class="textPressButtons1" @click="goToTextRecognition">文本识别</button>
|
||
</div>
|
||
<div class="mainIdPicid">
|
||
<img class="IDCardMainid" src="../../assets/images/IDCardMain.png" alt="error">
|
||
<img class="IDCardMainUpid" src="../../assets/images/IDCardMainUp.png" alt="error">
|
||
<img class="IDCardMainDownid" src="../../assets/images/IDCardMainDown.png" alt="error">
|
||
|
||
</div>
|
||
|
||
<div class="testIdPicId">
|
||
<div class="IDMidReco">
|
||
<div class="icon">
|
||
<div class="text">身份证信息</div>
|
||
<img src="../../assets/images/IDTextBackImg.png" alt="error" class="faceThree">
|
||
</div>
|
||
<div class="content">
|
||
<img src="../../assets/images/borderIDCard.png" alt="error" class="backIDRecoMain">
|
||
<button class="commit" @click="onMount">识别</button>
|
||
<div class="IDCardPositive">
|
||
<el-upload class="upload-demo" :on-preview="handleBeforeUpload" :before-remove="beforeRemove"
|
||
drag :action="urlposi" accept=".jpg,.png" :limit=1 :on-change="handleUploading" ref="IDposi"
|
||
list-type="picture-card" :auto-upload="false" v-bind="dataList" :show-file-list="true">
|
||
<i slot="default" class="el-icon-plus"></i>
|
||
<div class="el-upload-list__item-thumbnail" slot="file" slot-scope="{file}">
|
||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" :key="file.uid"
|
||
style="object-fit: cover; width: 15.3rem !important; height:9.8rem; position: absolute;top:-0.8rem;left:-1.2rem">
|
||
<span class="el-upload-list__item-actions">
|
||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||
<i class="el-icon-zoom-in"></i>
|
||
</span>
|
||
<span v-if="!disabled" class="el-upload-list__item-delete"
|
||
@click="handleDownload(file)">
|
||
<i class="el-icon-download"></i>
|
||
</span>
|
||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
||
<i class="el-icon-delete"></i>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
|
||
</div>
|
||
<div class="IDCardNegative">
|
||
|
||
<el-upload class="upload-demo" :on-preview="handleBeforeUpload" :before-remove="beforeRemove"
|
||
drag :action="urlposi" accept=".jpg,.png" :limit=1 v-bind="dataList" :on-error="IDerror"
|
||
:on-change="handleUploading" :on-success="handleUploadSuccess" list-type="picture-card"
|
||
:auto-upload="false" ref="IDnega">
|
||
<i slot="default" class="el-icon-plus"></i>
|
||
<div slot="file" slot-scope="{file}">
|
||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""
|
||
style="object-fit: cover; width: 15.3rem !important; height:9.8rem; position: absolute;top:-0.8rem;left:-1.2rem">
|
||
<span class="el-upload-list__item-actions">
|
||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||
<i class="el-icon-zoom-in"></i>
|
||
</span>
|
||
<span v-if="!disabled" class="el-upload-list__item-delete"
|
||
@click="handleDownload(file)">
|
||
<i class="el-icon-download"></i>
|
||
</span>
|
||
<span v-if="!disabled" class="el-upload-list__item-delete"
|
||
@click="handleRemove1(file)">
|
||
<i class="el-icon-delete"></i>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisible">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="IDMidReco">
|
||
<div class="icon">
|
||
<div class="text">人脸信息</div>
|
||
<img src="../../assets/images/IDTextBackImg.png" alt="error" class="faceThree"
|
||
@click="handleImport">
|
||
</div>
|
||
<div class="content">
|
||
<img src="../../assets/images/borderIDCard.png" alt="error" class="backIDRecoMain">
|
||
<div class="tmp">
|
||
<ul class="tmpUl">
|
||
<li class="tmpLi">姓名： {{ this.name }}</li>
|
||
<li class="tmpLi">性别： {{ this.gender }}</li>
|
||
<li class="tmpLi">民族： {{ this.nation }}</li>
|
||
<li class="tmpLi">出生： {{ this.birth }}</li>
|
||
<li class="tmpLi">住址： {{ this.address }}</li>
|
||
<li class="tmpLi">身份号码： {{ this.id }}</li>
|
||
<li class="tmpLi">签发机关： {{ this.authority }}</li>
|
||
<li class="tmpLi">有效期： {{ this.date }}</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="boxLevelOne sideBoxLevelOne">
|
||
<div class="boxLevelTwo boxLevelTwoFst">
|
||
<boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
|
||
<rectangleIDInvokeCount></rectangleIDInvokeCount>
|
||
|
||
</div>
|
||
|
||
<div class="boxLevelTwo boxLevelTwoSnd">
|
||
<boxHeader :boxHeaderText="'服务响应监控'"></boxHeader>
|
||
|
||
|
||
<div class="faceContentBox">
|
||
<img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
|
||
<table class="faceContentTable">
|
||
<thead>
|
||
<tr class="faceContentRow">
|
||
<th class="faceContentColume faceContentColumeSort">序号</th>
|
||
<th class="faceContentColume faceContentColumeIPAddr">访问地址</th>
|
||
<th class="faceContentColume faceContentColumeDate">访问时间</th>
|
||
<th class="faceContentColume faceContentColumeTime">响应时长</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in ServerResult" :key="index"
|
||
:class="{ 'faceContentRowEven': index % 2 === 0, 'faceContentRowPrime': index % 2 !== 0 }">
|
||
<td class="faceContentColume faceContentColumeSort">{{ index + 1 }}</td>
|
||
<td class="faceContentColume faceContentColumeIPAddr">{{ item.ip }}</td>
|
||
<td class="faceContentColume faceContentColumeDate">{{ item.returnTime }}</td>
|
||
<td class="faceContentColume faceContentColumeTime">{{ item.responseTime }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-alert title="错误提示的文案" type="error" center show-icon>
|
||
</el-alert>
|
||
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import axios from 'axios';
|
||
import { getToken } from "@/utils/auth";
|
||
import largeScreenHeader from '@/components/LargeScreen'
|
||
import boxHeader from '@/views/components/boxHeader.vue'
|
||
import pieIDResultCount from '@/views/updateIDCard/pieIDResultCount.vue'
|
||
import RectangleIDInvokeCount from '@/views/updateIDCard/rectangleIDInvokeCount.vue'
|
||
|
||
export default {
|
||
components: {
|
||
RectangleIDInvokeCount,
|
||
boxHeader,
|
||
largeScreenHeader,
|
||
pieIDResultCount,
|
||
},
|
||
props: {
|
||
value: [String, Object, Array],
|
||
// 图片数量限制
|
||
limit: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
// 大小限制(MB)
|
||
fileSize: {
|
||
type: Number,
|
||
default: 5,
|
||
},
|
||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||
fileType: {
|
||
type: Array,
|
||
default: () => ["png", "jpg", "jpeg"],
|
||
},
|
||
// 是否显示提示
|
||
isShowTip: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
showSize: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
},
|
||
methods: {
|
||
onMount() {
|
||
if (Object.keys(this.dataList).length === 0) {
|
||
this.$modal.msgWarning("请选择文件");
|
||
return;
|
||
}
|
||
if (Object.keys(this.dataList).length === 1) {
|
||
this.$modal.msgWarning("请上传身份证正反面两张图片");
|
||
return;
|
||
}
|
||
console.log(this.dataList);
|
||
let formData = new FormData(); // 用FormData存放上传文件
|
||
formData.append('type', 1)
|
||
Object.keys(this.dataList).forEach(item => {
|
||
formData.append('files', this.dataList[item].raw)
|
||
})
|
||
console.log(formData)
|
||
this.$modal.loading("数据上传中，请稍后。。。");
|
||
axios({
|
||
url: [process.env.VUE_APP_BASE_API]+'/ai/ocr/recognition',
|
||
data: formData,
|
||
method: 'post',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImQzNTQ2ZDI1LTJjY2ItNDQxMS1iOGMyLWEwODFiMmRiZjQyMCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.YxtEeGyp09occmm2CUYSTTIJNrq81IWYTGZoXyHPo0sMK_akGt-29DObz8_3uLoZQGpwd7xGD6gzvjbrEG3rVg'
|
||
},
|
||
}).then(res => {
|
||
alert(JSON.stringify(res))
|
||
alert(res)
|
||
// console.log("111"+dataToJS.name);
|
||
// alert(res.data.result.data.name)
|
||
// if(res.code===200 && Object.keys(res.data[0]===601)){
|
||
// alert('调用大模型失败')
|
||
// }
|
||
this.name = res.data.result.data.name;
|
||
this.gender = res.data.result.data.gender;
|
||
this.nation = res.data.result.data.ethnicity;
|
||
this.birth = res.data.result.data.dateOfBirth;
|
||
this.address = res.data.result.data.address;
|
||
this.id = res.data.result.data.idNumber;
|
||
this.authority = res.data.result.data.issuingAuthority;
|
||
this.date = res.data.result.data.validTime;
|
||
this.$modal.closeLoading();
|
||
// this.$refs.IDnega.clearFiles();
|
||
// this.$refs.IDposi.clearFiles();
|
||
this.open = false;
|
||
this.dataList = [];
|
||
// this.baseUrl();
|
||
}).catch(error => {
|
||
|
||
alert('调用大模型失败')
|
||
|
||
})
|
||
},
|
||
|
||
goToInvoiceRecognition() {
|
||
this.$router.beforeEach((to, from, next) => {
|
||
if (from.path === '/Violation') {
|
||
// 清除缓存的操作
|
||
// 可以使用 localStorage.clear() 或其他方法清除缓存
|
||
localStorage.clear();
|
||
}
|
||
next();
|
||
});
|
||
this.$router.push('/Violation');
|
||
},
|
||
goToTextRecognition() {
|
||
this.$router.beforeEach((to, from, next) => {
|
||
if (from.path === '/Text') {
|
||
// 清除缓存的操作
|
||
// 可以使用 localStorage.clear() 或其他方法清除缓存
|
||
localStorage.clear();
|
||
}
|
||
next();
|
||
});
|
||
this.$router.push('/Text');
|
||
|
||
},
|
||
|
||
|
||
|
||
|
||
// addPic(file){
|
||
// this.dataList.push({ url: file.url });
|
||
// },
|
||
handleUploadSuccess(res, file) {
|
||
if (res.code === 200) {
|
||
this.uploadList.push({ name: res.fileName, url: res.url });
|
||
this.uploadedSuccessfully();
|
||
} else {
|
||
this.number--;
|
||
this.$modal.closeLoading();
|
||
this.$modal.msgError(res.msg);
|
||
this.$refs.imageUpload.handleRemove(file);
|
||
this.uploadedSuccessfully();
|
||
}
|
||
},
|
||
IDerror() {
|
||
|
||
},
|
||
uploadedSuccessfully() {
|
||
if (this.number > 0 && this.uploadList.length === this.number) {
|
||
this.dataList = this.dataList.concat(this.uploadList);
|
||
console.log('上传结束处理后', this.dataList);
|
||
this.uploadList = [];
|
||
this.number = 0;
|
||
// console.log('传给父组件的图片字符串',this.listToString(this.dataList));
|
||
// this.$emit("input", this.listToString(this.dataList));
|
||
this.$emit("input", this.dataList);
|
||
this.$modal.closeLoading();
|
||
}
|
||
},
|
||
handleBeforeUpload(file) {
|
||
|
||
let isImg = false;
|
||
if (this.fileType.length) {
|
||
let fileExtension = "";
|
||
if (file.name.lastIndexOf(".") > -1) {
|
||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||
}
|
||
isImg = this.fileType.some((type) => {
|
||
if (file.type.indexOf(type) > -1) return true;
|
||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||
return false;
|
||
});
|
||
} else {
|
||
isImg = file.type.indexOf("image") > -1;
|
||
}
|
||
|
||
if (!isImg) {
|
||
this.$modal.msgError(
|
||
`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
|
||
);
|
||
return false;
|
||
}
|
||
if (this.fileSize) {
|
||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||
if (!isLt) {
|
||
this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
||
return false;
|
||
}
|
||
}
|
||
this.$modal.loading("正在上传图片，请稍候...");
|
||
this.number++;
|
||
},
|
||
handleUploading(file, dataList) {
|
||
this.dataList.push(file);
|
||
|
||
console.log(file);
|
||
console.log(dataList);
|
||
},
|
||
handleUploadError(error, file, dataList) {
|
||
console.log(error);
|
||
console.log(file);
|
||
console.log(dataList);
|
||
this.dataList.push({
|
||
url: file.url,
|
||
uid: file.uid,
|
||
file: file.file
|
||
});
|
||
|
||
},
|
||
submitFileForm() {
|
||
|
||
},
|
||
handleRemove(file, dataList) {
|
||
const index = this.dataList.indexOf(file);
|
||
// 如果找到了文件，则从 dataList 中删除
|
||
if (index !== -1) {
|
||
this.dataList.splice(index, 1);
|
||
}
|
||
this.$refs.IDposi.clearFiles();
|
||
console.log(this.dataList.length)
|
||
},
|
||
handleRemove1(file, dataList) {
|
||
const index = this.dataList.indexOf(file);
|
||
// 如果找到了文件，则从 dataList 中删除
|
||
if (index !== -1) {
|
||
this.dataList.splice(index, 1);
|
||
}
|
||
this.$refs.IDnega.clearFiles();
|
||
console.log(this.dataList.length)
|
||
},
|
||
|
||
handleUploadError() {
|
||
this.$modal.msgError("上传图片失败，请重试");
|
||
this.$modal.closeLoading();
|
||
},
|
||
beforeRemove(file, dataList) {
|
||
return this.$confirm(`确定移除 ${file.name}？`);
|
||
},
|
||
handleImport() {
|
||
this.open = true;
|
||
},
|
||
handlePictureCardPreview(file) {
|
||
this.dialogImageUrl = file.url;
|
||
this.dialogVisible = true;
|
||
},
|
||
handleDownload(file) {
|
||
const fileUrl = file.url;
|
||
const fileName = 'example.png';
|
||
// 创建一个隐藏的 <a> 标签
|
||
const link = document.createElement('a');
|
||
link.href = fileUrl;
|
||
link.download = fileName;
|
||
// 将 <a> 标签添加到页面中
|
||
document.body.appendChild(link);
|
||
// 触发点击事件，开始下载
|
||
link.click();
|
||
// 下载完成后移除 <a> 标签
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
|
||
},
|
||
computed: {
|
||
// 是否显示提示
|
||
showTip() {
|
||
return this.isShowTip && (this.fileType || this.fileSize);
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
uploadList: [],
|
||
headers: {
|
||
Authorization: "Bearer " + getToken(),
|
||
},
|
||
dialogImageUrl: '',
|
||
dialogVisible: false,
|
||
disabled: false,
|
||
urlposi: '/ocr/recognition',
|
||
dataList: [],
|
||
open: false,
|
||
currentDate: '',
|
||
currentTime: '',
|
||
dayOfWeek: '',//如果要星期的话可以直接用，此处为中文的星期
|
||
imageUrl: '',
|
||
IDCardPositiveUrl: '',
|
||
IDCardNegativeUrl: '',
|
||
name: '',
|
||
gender: '',
|
||
nation: '',
|
||
birth: '',
|
||
id: '',
|
||
authority: '',
|
||
address: '',
|
||
date: '',
|
||
recognition: [
|
||
{ ip: '192.168.1.1', returnTime: '10:00', responseTime: '100ms' },
|
||
{ ip: '192.168.1.2', returnTime: '13:00', responseTime: '130ms' },
|
||
{ ip: '192.168.1.3', returnTime: '11:00', responseTime: '120ms' },
|
||
{ ip: '192.168.1.4', returnTime: '9:00', responseTime: '20ms' }
|
||
],
|
||
ServerResult: [
|
||
{ ip: '192.168.1.5', returnTime: '22:00', responseTime: '1020ms' },
|
||
{ ip: '192.168.1.6', returnTime: '22:30', responseTime: '1230ms' },
|
||
{ ip: '192.168.1.7', returnTime: '21:00', responseTime: '1120ms' },
|
||
{ ip: '192.168.1.8', returnTime: '2:00', responseTime: '220ms' },
|
||
{ ip: '192.168.1.9', returnTime: '23:59', responseTime: '240ms' },
|
||
{ ip: '192.168.1.10', returnTime: '1:30', responseTime: '980ms' },
|
||
{ ip: '192.168.1.11', returnTime: '3:45', responseTime: '1350ms' },
|
||
{ ip: '192.168.1.12', returnTime: '4:15', responseTime: '780ms' },
|
||
{ ip: '192.168.1.13', returnTime: '5:20', responseTime: '1500ms' },
|
||
{ ip: '192.168.1.14', returnTime: '6:10', responseTime: '890ms' },
|
||
{ ip: '192.168.1.15', returnTime: '6:10', responseTime: '890ms' },
|
||
{ ip: '192.168.1.16', returnTime: '6:10', responseTime: '890ms' }
|
||
],
|
||
pieThree: {
|
||
China: '34', USA: '55', Japan: '36'
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
value: {
|
||
handler(val) {
|
||
console.log('侦听', val);
|
||
if (val) {
|
||
// 首先将值转为数组
|
||
const list = Array.isArray(val) ? val : this.value.split(",");
|
||
// 然后将数组转为对象数组
|
||
this.dataList = list.map((item) => {
|
||
if (typeof item === "string") {
|
||
if (item.indexOf(this.baseUrl) === -1) {
|
||
item = { name: this.baseUrl + item, url: item };
|
||
} else {
|
||
item = { name: item, url: item };
|
||
}
|
||
}
|
||
return item;
|
||
});
|
||
console.log('侦听处理后', this.dataList);
|
||
} else {
|
||
this.dataList = [];
|
||
return [];
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url('./../../assets/styles/updateIDCard.css');
|
||
</style> |