初始代码
parent
5b35c33b11
commit
3b3e0a9eab
|
|
@ -1,6 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
/mask-system-1.0
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const t = {}
|
|||
t.loading = '加载中...'
|
||||
|
||||
t.brand = {}
|
||||
t.brand.lg = '口罩人像识别系统'
|
||||
t.brand.lg = '疫情常态下人员精准检测识别系统'
|
||||
t.brand.mini = '人像'
|
||||
|
||||
t.add = '新增'
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@
|
|||
faceBgUrl: "",
|
||||
faces: [],
|
||||
currentFaces: [],
|
||||
//今日抓拍
|
||||
toDaySnapShot: 0,
|
||||
totalSnapShot: 0,
|
||||
// 预警列表
|
||||
|
|
|
|||
|
|
@ -0,0 +1,418 @@
|
|||
<template>
|
||||
<div id='compare'>
|
||||
<div class="compare_content" style="margin-left: 50px">
|
||||
<div class="compare_imgs">
|
||||
<div class="compare_box" style="margin-top: 50px">
|
||||
<div class="compare_img" >
|
||||
<img v-if='imageUrl' :src="$replaceImgUrl(imageUrl)" class="pre-img">
|
||||
<div v-else class="avatar-uploader-icon">待比对人物图像</div>
|
||||
</div>
|
||||
<div class="crop-demo-btn2" v-if="imageUrl" @click="clickDelImg()">删除图片</div>
|
||||
<div class="crop-demo-btn" v-else>
|
||||
上传图片<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
|
||||
</div>
|
||||
<el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false'>
|
||||
<vue-cropper
|
||||
ref='cropper'
|
||||
:src="imgSrc"
|
||||
:ready="cropImage"
|
||||
:zoom="cropImage"
|
||||
:cropmove="cropImage"
|
||||
style="width:100%;height:300px;">
|
||||
</vue-cropper>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelCrop">取 消</el-button>
|
||||
<el-button type="primary" @click="clickOK()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div style="margin-top: 200px;margin-right:50px;width: 100%;">
|
||||
<h2 style="display: inline">人像库列表</h2>
|
||||
<el-select v-model="value" placeholder="请选择人像库列表" >
|
||||
<el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<h2 id="boxState1" style="display: none">人像库比对结果--------></h2>
|
||||
</div>
|
||||
<div class="compare_box" style="margin-top: 50px;margin-right: 350px" >
|
||||
<div class="compare_img" id ="boxState2" style="display:none">
|
||||
<img v-if='rphoto' :src="rphoto" class="pre-img">
|
||||
<div v-else class="avatar-uploader-icon">人像库比对结果</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<p class="c_p" v-if="state">相似度：<span class="similarity">{{similarity}}</span></p>
|
||||
<div class="c_ps" v-else></div>
|
||||
<el-button class="c_b" style="margin-right: 350px" type="primary" :disabled='btnState' @click="clickThan()">比对</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import {task} from "@vue/cli-plugin-eslint/ui/taskDescriptor";
|
||||
export default {
|
||||
computed: {
|
||||
task() {
|
||||
return task
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
similarity:0,
|
||||
state:false,
|
||||
imageUrl: '',
|
||||
imageUrl2: '',
|
||||
uploadAction:'',
|
||||
uploadAction2:'',
|
||||
boxState:true,
|
||||
btnState:false,
|
||||
//第一张图的 模态框
|
||||
dialogVisible:false,
|
||||
dialogVisible2:false,
|
||||
imgSrc:'',
|
||||
imgSrc2:'',
|
||||
imgBase64:'',
|
||||
imgBase642:'',
|
||||
// 表格相关变量
|
||||
libraryList: [],
|
||||
// 任务列表
|
||||
taskList: [
|
||||
{value: '1691081136849', label: '10万级戴口罩人像库'},
|
||||
{value: '1691083772054', label: '10万级不戴口罩人像库'}
|
||||
],
|
||||
value:'',
|
||||
// rphoto:'http://192.168.1.133:9000/up-portal/049cafeaddbf6f2ab46d489d86fa154c.png'
|
||||
rphoto:''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
methods:{
|
||||
// 查询的公共接口
|
||||
commonSeach(pageObj = this.pageObj) {
|
||||
this.$http.post("/Resources/libraryPage", pageObj).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.libraryList = res.data.data.records
|
||||
this.total = Number(res.data.data.total)
|
||||
} else {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
// 初始化查询
|
||||
this.commonSeach()
|
||||
},
|
||||
|
||||
|
||||
clickThan(){
|
||||
document.getElementById("boxState1").style.display = 'block'
|
||||
document.getElementById("boxState2").style.display = 'block'
|
||||
if(this.imageUrl){
|
||||
let CompareRequestVo={
|
||||
urlList:[],
|
||||
value:'',
|
||||
}
|
||||
CompareRequestVo.urlList.push(this.imageUrl)
|
||||
console.log(this.value)
|
||||
CompareRequestVo.value = this.value
|
||||
console.log(CompareRequestVo)
|
||||
this.$http.post("/compare/oneToMuch",CompareRequestVo)
|
||||
.then(res=>{
|
||||
if(res.data.code == 0){
|
||||
this.state=true
|
||||
let similarity=res.data.data.score * 100
|
||||
//保留小数点后两位 不四舍五入
|
||||
this.similarity=(parseInt(similarity*100)/100).toFixed(2) + '%'
|
||||
|
||||
this.btnState=true
|
||||
this.boxState=false
|
||||
this.rphoto = res.data.data.urls[0]
|
||||
console.log(this.rphoto)
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err=>{
|
||||
console.log(err);
|
||||
|
||||
})
|
||||
}else{
|
||||
this.$message.warning("请上传比对图片")
|
||||
}
|
||||
|
||||
},
|
||||
//第一张图
|
||||
setImage(e){
|
||||
const file = e.target.files[0];
|
||||
if (!file.type.includes('image/')) {
|
||||
return;
|
||||
}
|
||||
//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.dialogVisible = true;
|
||||
this.imgSrc = event.target.result;
|
||||
this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
cropImage () {
|
||||
//this.imageUrl = this.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
this.imgBase64=this.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
},
|
||||
cancelCrop(){
|
||||
this.dialogVisible = false;
|
||||
this.imageUrl = ''
|
||||
},
|
||||
clickOK(){
|
||||
if(this.imgBase64){
|
||||
let compareRequestVo={
|
||||
urlList:[]
|
||||
}
|
||||
compareRequestVo.urlList.push(this.imgBase64)
|
||||
this.$http.post("/compare/oneToOneImage",compareRequestVo)
|
||||
.then(res=>{
|
||||
if(res.data.code == 0){
|
||||
this.dialogVisible = false
|
||||
this.imageUrl=res.data.data
|
||||
}else if(res.data.code == 60001){
|
||||
this.$message.warning(res.data.message);
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err=>{
|
||||
console.log(err);
|
||||
|
||||
})
|
||||
}
|
||||
//this.dialogVisible = false
|
||||
},
|
||||
clickDelImg(){
|
||||
this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
|
||||
confirmButtonText: "确 定",
|
||||
cancelButtonText: "取 消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.imageUrl=''
|
||||
this.btnState=false
|
||||
this.state=false
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
//第二张图
|
||||
setImage2(e){
|
||||
const file = e.target.files[0];
|
||||
if (!file.type.includes('image/')) {
|
||||
return;
|
||||
}
|
||||
//FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.dialogVisible2 = true;
|
||||
this.imgSrc2 = event.target.result;
|
||||
this.$refs.cropper2 && this.$refs.cropper2.replace(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
cropImage2() {
|
||||
this.imgBase642=this.$refs.cropper2.getCroppedCanvas().toDataURL();
|
||||
},
|
||||
cancelCrop2(){
|
||||
this.dialogVisible2 = false;
|
||||
this.imageUrl2 = ''
|
||||
},
|
||||
clickOK2(){
|
||||
if(this.imgBase642){
|
||||
let compareRequestVo={
|
||||
urlList:[]
|
||||
}
|
||||
compareRequestVo.urlList.push(this.imgBase642)
|
||||
this.$http.post("/compare/oneToOneImage",compareRequestVo)
|
||||
.then(res=>{
|
||||
if(res.data.code == 0){
|
||||
this.dialogVisible2 = false
|
||||
this.imageUrl2=res.data.data
|
||||
}else if(res.data.code == 60001){
|
||||
this.$message.warning(res.data.message);
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err=>{
|
||||
console.log(err);
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
clickDelImg2(){
|
||||
this.$confirm("此操作将确认删除该人像, 是否继续?", "提示", {
|
||||
confirmButtonText: "确 定",
|
||||
cancelButtonText: "取 消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.imageUrl2=''
|
||||
this.btnState=false
|
||||
this.state=false
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#compare{
|
||||
background-color: #fff;
|
||||
margin-top: -14px;
|
||||
}
|
||||
.compare_content{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.compare_imgs{
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
.compare_title{
|
||||
padding-top: 20px;
|
||||
}
|
||||
.cropper-content .cropper {
|
||||
width: auto;
|
||||
height: 300px;
|
||||
}
|
||||
.compare_box{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
.compare_img{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background-color: #FBFDFF;
|
||||
}
|
||||
.pre-img{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.crop-demo-btn{
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 20px;
|
||||
/* padding: 0 20px; */
|
||||
margin-left: 160px;
|
||||
background-color: #ECF5FF;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.crop-demo-btn2{
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 20px;
|
||||
/* padding: 0 20px; */
|
||||
margin-left: 160px;
|
||||
background-color: #FEF0F0;
|
||||
color:#F56C6C;
|
||||
border: 1px solid#FBC4C4;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.crop-input{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.c_b{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader-icon:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
line-height: 400px;
|
||||
text-align: center;
|
||||
background-color: #FBFDFF;
|
||||
}
|
||||
.avatar {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
display: block;
|
||||
}
|
||||
.re_img_del{
|
||||
color: red;
|
||||
width: 150px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.c_p{
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.c_ps{
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
color: rgb(0, 0, 0);
|
||||
height: 45px;
|
||||
}
|
||||
.similarity{
|
||||
width:88px;
|
||||
height:22px;
|
||||
font-size:30px;
|
||||
font-family:Bahnschrift;
|
||||
font-weight:600;
|
||||
color:rgba(255,52,62,1);
|
||||
line-height:40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="aui-content__wrapper">
|
||||
<main class="aui-content">
|
||||
<div class="login-header">
|
||||
<h2 class="login-brand">口罩人像识别系统</h2>
|
||||
<h2 class="login-brand">疫情常态下人员精准检测识别系统</h2>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<div class="login_p">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ module.exports = {
|
|||
},
|
||||
proxy:{
|
||||
'/api':{
|
||||
target:"http://192.168.1.181:8286/",
|
||||
target:"http://192.168.1.196:8286/",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api':'/api'
|
||||
|
|
|
|||
Loading…
Reference in New Issue