初始代码
This commit is contained in:
parent
5b35c33b11
commit
3b3e0a9eab
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,6 +1,6 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
/dist
|
/mask-system-1.0
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
|
|||||||
@ -3,7 +3,7 @@ const t = {}
|
|||||||
t.loading = '加载中...'
|
t.loading = '加载中...'
|
||||||
|
|
||||||
t.brand = {}
|
t.brand = {}
|
||||||
t.brand.lg = '口罩人像识别系统'
|
t.brand.lg = '疫情常态下人员精准检测识别系统'
|
||||||
t.brand.mini = '人像'
|
t.brand.mini = '人像'
|
||||||
|
|
||||||
t.add = '新增'
|
t.add = '新增'
|
||||||
|
|||||||
@ -206,6 +206,7 @@
|
|||||||
faceBgUrl: "",
|
faceBgUrl: "",
|
||||||
faces: [],
|
faces: [],
|
||||||
currentFaces: [],
|
currentFaces: [],
|
||||||
|
//今日抓拍
|
||||||
toDaySnapShot: 0,
|
toDaySnapShot: 0,
|
||||||
totalSnapShot: 0,
|
totalSnapShot: 0,
|
||||||
// 预警列表
|
// 预警列表
|
||||||
|
|||||||
418
src/views/modules/monitoring/compare-all-list.vue
Normal file
418
src/views/modules/monitoring/compare-all-list.vue
Normal file
@ -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">
|
<div class="aui-content__wrapper">
|
||||||
<main class="aui-content">
|
<main class="aui-content">
|
||||||
<div class="login-header">
|
<div class="login-header">
|
||||||
<h2 class="login-brand">口罩人像识别系统</h2>
|
<h2 class="login-brand">疫情常态下人员精准检测识别系统</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-body">
|
<div class="login-body">
|
||||||
<div class="login_p">
|
<div class="login_p">
|
||||||
|
|||||||
@ -22,7 +22,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
proxy:{
|
proxy:{
|
||||||
'/api':{
|
'/api':{
|
||||||
target:"http://192.168.1.181:8286/",
|
target:"http://192.168.1.196:8286/",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/api':'/api'
|
'^/api':'/api'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user