423 lines
9.4 KiB
Vue
423 lines
9.4 KiB
Vue
<template>
|
||
<div class="html-container">
|
||
<div class="top">
|
||
<div class="main-top">
|
||
<div class="main-top-bg">
|
||
<img src="../../assets/images/faceBackMain.png" alt="error" class="faceBackMain">
|
||
</div>
|
||
</div>
|
||
<div class="main-bottom">
|
||
<div class="main-bottom-left">
|
||
<div class="main-bottom-left-bg">
|
||
<img src="../../assets/images/faceleft.png" @click='update' alt="error" class="faceBackMain">
|
||
</div>
|
||
<span>人脸库上传</span>
|
||
</div>
|
||
<div class="main-bottom-right">
|
||
<div class="main-bottom-right-bg">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png"
|
||
style="display: none"
|
||
ref="fileInput"
|
||
@change="handleFileChange"
|
||
/>
|
||
<img src="../../assets/images/faceright.png" @click='selectFile' alt="error" class="faceBackMain">
|
||
</div>
|
||
<span>人脸图像上传</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottom-left">
|
||
<div class="bottom-left-title">
|
||
<div class="title">
|
||
<span>人脸图片</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-left-content">
|
||
<img
|
||
v-if="imageUrl"
|
||
:src="imageUrl"
|
||
class="avatar"
|
||
@click="selectFile"
|
||
alt="Avatar"
|
||
/>
|
||
<i
|
||
v-else
|
||
class="el-icon-plus avatar-uploader-icon"
|
||
@click="selectFile"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-right">
|
||
<div class="bottom-right-title">
|
||
<div class="title">
|
||
<span>识别结果</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-right-content">
|
||
<img
|
||
v-if="faceUrl"
|
||
:src="'http://192.168.0.56:18093/'+faceUrl"
|
||
class="avatar"
|
||
alt="Avatar"
|
||
/>
|
||
<i
|
||
v-else
|
||
class=" avatar-uploader-icon"
|
||
></i>
|
||
<div class="content">
|
||
<span v-if="name">姓名:{{ name }}</span>
|
||
<span v-if="sex">性别:{{ sex }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<addFace v-model="showModal" title="添加人脸" width="500px" @visible-change="handleVisibleChange">
|
||
<p>这是弹窗的内容。</p>
|
||
</addFace>
|
||
-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import addFace from "@/views/updateFace/addFace.vue";
|
||
import {recognition} from '@/api/updateFace/updateFace'
|
||
import faceListShowPic from "@/views/updateFace/faceListShowPic.vue";
|
||
import faceListResultCount from "@/views/updateFace/faceListResultCount.vue";
|
||
import faceListResWatch from "@/views/updateFace/faceListResWatch.vue";
|
||
|
||
export default {
|
||
components: {
|
||
addFace
|
||
},
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
imageUrl: "",
|
||
faceUrl: '',
|
||
name: '',
|
||
sex: '',
|
||
}
|
||
},
|
||
watch: {
|
||
showModal(val) {
|
||
console.log(val)
|
||
if (!val) {
|
||
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
recognition(file) {
|
||
this.faceUrl = '';
|
||
this.name = '';
|
||
this.sex = '';
|
||
let formData = new FormData();
|
||
formData.append('file', file);
|
||
recognition(formData).then(res => {
|
||
if (res.code == 200) {
|
||
let data = res.data;
|
||
this.faceUrl = data.faceAddress;
|
||
this.name = data.name;
|
||
this.sex = data.sex;
|
||
this.$message.success(res.msg)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
faceListResultCount.methods.getListFaceResult();
|
||
faceListResWatch.methods.getListFaceResult();
|
||
})
|
||
},
|
||
update() {
|
||
this.showModal = true
|
||
},
|
||
handleVisibleChange(newVal) {
|
||
faceListShowPic.methods.getList();
|
||
this.showModal = newVal;
|
||
},
|
||
selectFile() {
|
||
this.$refs.fileInput.click();
|
||
},
|
||
handleFileChange(event) {
|
||
const file = event.target.files[0];
|
||
if (file) {
|
||
const maxSizeInMB = 20; // 最大文件大小（单位：MB）
|
||
const maxSizeInBytes = maxSizeInMB * 1024 * 1024;
|
||
|
||
if (file.size > maxSizeInBytes) {
|
||
this.$message.error(`文件大小不能超过 ${maxSizeInMB} MB`);
|
||
return;
|
||
}
|
||
this.imageUrl = URL.createObjectURL(file);
|
||
this.recognition(file)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
@keyframes moveandflash {
|
||
0%, 100% {
|
||
transform: translateY(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: translateY(-1rem) scale(1.05);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
width: 100%;
|
||
height: 70%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.main-top {
|
||
width: 100%;
|
||
height: 60%;
|
||
display: flex;
|
||
align-items: center;
|
||
align-content: center;
|
||
justify-content: center;
|
||
|
||
.main-top-bg {
|
||
width: 40%;
|
||
height: 100%;
|
||
background-image: url('../../assets/images/faceBackCircle.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* align-items: center;*/
|
||
|
||
|
||
img {
|
||
margin-top: 10%;
|
||
width: 50%;
|
||
height: 60%;
|
||
animation: moveandflash 2s infinite linear;
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-bottom {
|
||
width: 100%;
|
||
height: 40%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.main-bottom-left {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
span {
|
||
font-weight: 900;
|
||
color: white;
|
||
}
|
||
|
||
.main-bottom-left-bg {
|
||
width: 50%;
|
||
height: 80%;
|
||
background-image: url('../../assets/images/faceBackCircle.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
img {
|
||
margin-top: 15%;
|
||
width: 30%;
|
||
height: 50%;
|
||
animation: moveandflash 2s infinite linear;
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.main-bottom-right {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
span {
|
||
font-weight: 900;
|
||
color: white;
|
||
margin-top: 1%;
|
||
}
|
||
|
||
.main-bottom-right-bg {
|
||
width: 50%;
|
||
height: 80%;
|
||
background-image: url('../../assets/images/faceBackCircle.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
|
||
img {
|
||
margin-top: 15%;
|
||
width: 30%;
|
||
height: 50%;
|
||
animation: moveandflash 2s infinite linear;
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
height: 30%;
|
||
padding: 1%;
|
||
display: flex;
|
||
|
||
.bottom-left {
|
||
width: 50%;
|
||
height: 100%;
|
||
padding: 1%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
.bottom-left-title {
|
||
width: 20%;
|
||
height: 100%;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 50%;
|
||
background-image: url('../../assets/images/faceLeftThree.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
span {
|
||
align-items: center;
|
||
font-weight: 900;
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-left-content {
|
||
width: 40%;
|
||
height: 100%;
|
||
background-image: url('../../assets/images/faceThreeBorder.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 70%;
|
||
height: 70%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px dashed #8c939d;
|
||
}
|
||
|
||
.avatar-uploader-icon:hover {
|
||
color: #0C70FA;
|
||
border: 1px dashed #0C70FA;
|
||
}
|
||
|
||
img {
|
||
width: 70%;
|
||
height: 70%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-right {
|
||
width: 50%;
|
||
height: 100%;
|
||
padding: 1%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
.bottom-right-title {
|
||
width: 20%;
|
||
height: 100%;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 50%;
|
||
background-image: url('../../assets/images/faceRightThree.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
span {
|
||
align-items: center;
|
||
font-weight: 900;
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-right-content {
|
||
width: 80%;
|
||
height: 100%;
|
||
background-image: url('../../assets/images/faceThreeBorder.png');
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
|
||
.content {
|
||
display: flex;
|
||
width: 50%;
|
||
height: 70%;
|
||
margin-left: 5%;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
span {
|
||
color: white;
|
||
margin-top: 5%;
|
||
}
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 35%;
|
||
margin-left: 13%;
|
||
height: 70%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px dashed #8c939d;
|
||
}
|
||
|
||
img {
|
||
margin-left: 13%;
|
||
width: 35%;
|
||
height: 70%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|