身份证识别细节条件以及人脸识别更新

This commit is contained in:
chengwenyou 2024-07-31 15:14:22 +08:00
parent 746df655c0
commit 6bea66d8cf
7 changed files with 178 additions and 332 deletions

View File

@ -1,3 +1,7 @@
:root{
--custom-Facesize:3rem
}
body {
background-image: url('../images/backimg.png');
background-size: 100% 100%;
@ -14,150 +18,37 @@ body {
.mainContent {
display: flex;
/* background-color: antiquewhite; */
width: 116rem;
height: 51rem;
margin-left: 2.5rem;
}
.boxLevelOne {
display: flex;
/* padding-left: .625rem; */
margin-right: .75rem;
flex-direction: column;
position: relative;
}
.leftBoxLevelOne {
flex: 3;
/* background-color: blue; */
flex-direction: column;
.sideBoxLevelOne {
flex: 3;
}
.midBoxLevelOne {
flex: 5;
position: relative;
display: flex;
flex-direction: column;
border: .0625rem solid rgba(204, 252, 253, 0.3);
border-radius: 1.5rem;
}
.rightBoxLevelOne {
flex: 3;
/* background-color:yellow ; */
flex-direction: column;
}
.boxLevelTwo {
flex: 1;
/* background-color: hotpink; */
position: relative;
}
/* 二级标题图片 */
.boxLevelTwoHeaderPic {
width: 29.0625rem;
/* 宽度 */
height: 2.4375rem;
opacity: .51;
/* 高度 */
}
.boxLevelTwo {
border: .0625rem solid rgba(204, 252, 253, 0.3);
border-radius: .6rem;
}
.boxLevelTwoFst {
margin-bottom: 1rem;
}
.boxLevelTwoText {
position: absolute;
top: .6rem;
left: 2.1rem;
font-size: 1.125rem;
font-weight: bold;
color: #FFFFFF;
letter-spacing: .3rem;
}
.faceContentBox {
padding-left: 1.25rem;
padding-right: 1.25rem;
position: relative;
}
.faceContentTable {
width: 100%;
}
tbody {
height: 14.5rem;
overflow: auto;
display: block;
scroll-behavior: smooth;
}
.faceContentRow {
width: 100%;
background: linear-gradient(to bottom, rgba(47, 47, 214, .6), rgba(255, 255, 255, .7));
display: flex;
height: 2.1rem;
/* 底部边框为2像素宽的黑色边框 */
}
.faceContentRowPrime {
background-color: RGBA(13, 31, 75, .8);
display: flex;
}
.faceContentRowEven {
background-color: RGBA(6, 19, 48, .9);
display: flex;
}
.faceContentColume {
font-size: 1rem;
padding-top: .3rem;
padding-bottom: .4rem;
text-align: center;
height: 2rem;
color: #FFFFFF;
}
.faceContentColumeSort {
/* border: #51AEFE 1px solid; */
flex: 1
}
.faceContentColumeIPAddr {
/* border: #55636f 1px solid; */
text-align: center;
flex: 2
}
.faceContentColumeDate {
/* border: #2f6ca2 1px solid; */
flex: 2
}
.faceContentColumeTime {
/* border: #530303 1px solid; */
flex: 1
}
@ -168,24 +59,18 @@ tbody {
/* background-color: #51AEFE; */
}
.resultHeader {
width: 100%;
height: 3.0625rem;
}
.el-upload-list__item-thumbnail,
.el-upload-list__item,
.el-upload-list__item-actions>li {
width: calc(var(--custom-size) *4.6) !important;
.el-upload-list__item-actions>li{
background-color: transparent;
border-radius: 0rem;
/* border: 1px solid transparent; */
}
.el-upload-dragger,
.el-upload {
height: calc(var(--custom-size) *3.0) !important;
width: calc(var(--custom-size) *4.6) !important;
.el-upload{
background-color: transparent !important;
border-radius: 0rem;
/* border: 1px dotted #fff; */
}

View File

@ -221,7 +221,12 @@ export default {
this.$modal.msgSuccess("识别成功");
}
else if (res.data.data.code == 20001) {
this.$modal.msgError("身份证信息不完整,请重新上传");
// this.$modal.msgError("");
this.$message({
message: '身份证信息不完整,请重新上传',
type: 'warning'
});
}
else if (res.data.data.code == 20003) {
this.$modal.msgError("图片base64编码转换异常,请重新上传");

View File

@ -1,17 +1,18 @@
<template>
<div class="faceMidPic">
<div class="face3d">
<img src="../../assets/images/faceBackCircle.png" alt="error" class="backImgCircle">
<img src="../../assets/images/faceBackCircle.png" alt="error" class="backImgCircle ">
<img src="../../assets/images/faceBackMain.png" alt="error" class="faceBackMain">
</div>
<div class="face3dSec">
<div class="face3dSecBox">
<img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
<img src="../../assets/images/faceleft.png" alt="error" class="faceLeftTwo">
<img src="../../assets/images/faceleft.png" alt="error" class="facePicTwo" @click="open">
</div>
<div class="face3dSecBox">
<img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
<img src="../../assets/images/faceright.png" alt="error" class="faceRightTwo">
<img src="../../assets/images/faceright.png" alt="error" class="facePicTwo">
</div>
</div>
</div>
@ -19,40 +20,48 @@
<script>
export default {
data(){
return{
}
},
methods:{
open() {
this.$prompt('请输入邮箱', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
this.$message({
type: 'success',
message: '你的邮箱是: ' + value
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
}
}
</script>
<style scoped>
.faceMidPic {
flex: 4.5;
flex: 4;
display: flex;
flex-direction: column;
position: relative;
}
.face3d {
flex: 2.5;
flex: 2;
position: relative;
}
.faceBackMain {
position: absolute;
height: 90%;
top: 10%;
left: 43.2%;
}
.backImgCircle {
position: absolute;
height: 150%;
left: 35%;
}
.face3dSec {
position: relative;
flex: 2;
@ -60,12 +69,26 @@ export default {
}
.faceBackMain {
position: absolute;
height: 50%;
top: 13%;
left: 44.4%;
animation: flash 4s infinite alternate;
}
.backImgCircle {
position: absolute;
height: 100%;
left: 36.3%;
}
.faceLeftTwoCircle {
position: absolute;
bottom: 5%;
left: 35%;
left: 24%;
height: 100%
}
@ -74,25 +97,103 @@ export default {
position: relative;
}
.faceLeftTwo {
.facePicTwo {
position: absolute;
height: 46%;
left: 46%;
left: 42%;
top: 18%;
animation: moveandflash 4s infinite alternate;
}
.faceRightTwo {
position: absolute;
height: 46%;
left: 46%;
top: 18%;
animation: moveandflash 4s infinite alternate;
@keyframes flash {
0% {
transform: translateY(0) translateZ(0rem);
}
30% {
opacity: .43;
transform: rotateY(180deg) translateZ(1.25rem);
}
43% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 0.43;
}
46% {
opacity: 1;
}
47% {
opacity: .6;
}
48% {
opacity: .9;
}
49% {
opacity: .2;
}
50% {
opacity: 1;
}
51% {
opacity: .2;
}
52% {
opacity: .9;
}
53% {
opacity: .6;
}
54% {
opacity: 1;
}
55% {
opacity: 0;
}
57% {
opacity: 1;
}
30% {
opacity: .43;
transform: rotateY(180deg) translateZ(1.25rem);
}
80% {
transform: translateY(0) translateZ(0rem);
}
90% {
transform: translateY(-0.9375rem) translateZ(1.25rem);
}
100% {
transform: translateY(0) translateZ(0rem);
}
}
@keyframes moveandflash {

View File

@ -4,94 +4,35 @@
<div class="mainContent">
<div class="boxLevelOne leftBoxLevelOne">
<div class="boxLevelOne sideBoxLevelOne">
<div class="boxLevelTwo boxLevelTwoFst">
<boxHeader :boxHeaderText="'人脸库'"></boxHeader>
<div class="boxLeftLevelThree " ref="scrollBox">
<div class="row boxLeftLevelThreeRow" v-for="(row, rowIndex) in Math.ceil(PicNum / 3)"
:key="rowIndex">
<div v-if="rowIndex * 3 < PicNum" class="boxLeftLevelThreeRow">
<div class="box boxLeftLevelThreeBox" v-for="(col, colIndex) in 3" :key="colIndex"
ref="boxLeftLevelThreeBox">
<div v-if="(rowIndex * 3 + colIndex) < PicNum" class="image-box boxLeftLevelThreeImg">
<img :src="`your_image_url_${rowIndex * 3 + colIndex}`" alt="image"
class="faceRepository">
</div>
</div>
</div>
</div>
</div>
<faceListShowPic></faceListShowPic>
</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 recognition" :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>
<faceListResultCount></faceListResultCount>
</div>
</div>
<div class="boxLevelOne midBoxLevelOne">
<boxHeader :boxHeaderText="'人脸识别算法应用'"></boxHeader>
<midPic></midPic>
<IDrecognition></IDrecognition>
<faceRecognition></faceRecognition>
</div>
<div class="boxLevelOne rightBoxLevelOne">
<div class="boxLevelOne sideBoxLevelOne">
<div class="boxLevelTwo boxLevelTwoFst">
<boxHeader :boxHeaderText="'服务调用统计'"></boxHeader>
<div class="myEcharts" ref="myEcharts"></div>
</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>
<faceListResWatch></faceListResWatch>
</div>
</div>
</div>
@ -102,21 +43,27 @@
import * as echarts from 'echarts';
import largeScreenHeader from '@/components/LargeScreen'
import boxHeader from '@/views/components/boxHeader.vue'
import IDrecognition from '@/views/components/IDrecognition.vue'
import faceRecognition from '@/views/components/faceRecognition.vue'
import midPic from '@/views/updateFace/midPic.vue'
import faceListShowPic from '@/views/updateFace/faceListShowPic.vue'
import faceListResultCount from '@/views/updateFace/faceListResultCount.vue'
import faceListResWatch from '@/views/updateFace/faceListResWatch.vue'
export default {
components: {
largeScreenHeader,
IDrecognition,
faceRecognition,
boxHeader,
midPic
midPic,
faceListShowPic,
faceListResultCount,
faceListResWatch
},
mounted() {
this.$nextTick(() => {
this.scrollDown();
});
this.updateDateTime();
this.echartsInit()
},
@ -124,8 +71,6 @@ export default {
backToHome() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/largeScreen') {
//
// 使 localStorage.clear()
localStorage.clear();
}
next();
@ -144,39 +89,14 @@ export default {
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const dayOfWeek = now.toLocaleString('zh-CN', { weekday: 'long' });
this.currentDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
this.currentTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
this.dayOfWeek = dayOfWeek;
},
scrollDown() {
const boxes = this.$refs.boxLeftLevelThreeBox;
boxes.forEach((box, index) => {
const boxHeight = box.offsetHeight;
let translateYValue = '0';
let animationDuration = 0;
if (this.PicNum <= 9) {
// No movement
} else {
translateYValue = `${-170 - (this.PicNum - 12) * 100}px`;
}
if (translateYValue !== '0') {
animationDuration = boxHeight / this.scrollSpeed * 1000;
}
box.style.setProperty('animation', `scrollAnimationBox ${animationDuration}ms linear infinite`);
box.style.setProperty('transform', 'translateY(0)');
});
},
echartsInit() {
this.myRectangleEchart = echarts.init(this.$refs.myEcharts);
let rightYData = this.rightYData;
// let rightXData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
let sum = rightYData.reduce((acc, curr) => acc + curr, 0);
let average = sum / rightYData.length;
this.myRectangleEchart.setOption({
@ -295,67 +215,4 @@ export default {
<style vars="{{PicNum}}">
@import url('./../../assets/styles/updateFace.css');
.boxLeftLevelThree {
background-color: RGBA(10, 76, 122, .8);
margin-left: 25px;
margin-top: 12px;
width: 445px;
height: 318px;
/* border: 1px solid yellow; */
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
@keyframes scrollAnimationBox {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(calc(100% - 6 * 100px));
}
}
.boxLeftLevelThreeRow {
display: flex;
}
.boxLeftLevelThreeBox {
width: 97px;
height: 79px;
background-color: RGBA(55, 108, 157, 1);
/* border: 1px solid blue; */
margin-left: 37px;
margin-bottom: 10px;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
animation: scrollAnimationBox;
}
.boxLeftLevelThreeImg {
width: 60px;
height: 61px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.faceRepository {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>

View File

@ -162,7 +162,6 @@ tbody tr {
.listIDResultShowTable {
width: 100%;
;
}
.listIDResultShow {

View File

@ -59,8 +59,7 @@ export default {
},
props: {
value: [String, Object, Array],
//
// (MB)
fileSize: {
type: Number,
default: 5,

View File

@ -34,7 +34,7 @@ module.exports = {
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.2.33:18080`,
target: `http://192.168.2.47:18080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''