cb/front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始代码

Browse Source
This commit is contained in:
coco1986509808 2023-12-28 16:07:30 +08:00
parent 5b35c33b11
commit 3b3e0a9eab
6 changed files with 423 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,6 +1,6 @@
.DS_Store
node_modules
/dist
/mask-system-1.0
# local env files
.env.local

2
src/i18n/zh-CN.js
View File

@ -3,7 +3,7 @@ const t = {}
t.loading = '加载中...'
t.brand = {}
t.brand.lg = '口罩人像识别系统'
t.brand.lg = '疫情常态下人员精准检测识别系统'
t.brand.mini = '人像'
t.add = '新增'

1
src/views/modules/monitoring/barrier.vue
View File

@ -206,6 +206,7 @@
faceBgUrl: "",
faces: [],
currentFaces: [],
//今日抓拍
toDaySnapShot: 0,
totalSnapShot: 0,
// 预警列表

418
src/views/modules/monitoring/compare-all-list.vue Normal file
View 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>&nbsp;&nbsp;
<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>

2
src/views/pages/login.vue
View File

@ -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">

2
vue.config.js
View File

@ -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'