From 3b3e0a9eabf11a5164e7a6c6d1d7e8da0998f662 Mon Sep 17 00:00:00 2001
From: coco1986509808 <1986509808@qq.com>
Date: Thu, 28 Dec 2023 16:07:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   2 +-
 src/i18n/zh-CN.js                             |   2 +-
 src/views/modules/monitoring/barrier.vue      |   1 +
 .../modules/monitoring/compare-all-list.vue   | 418 ++++++++++++++++++
 src/views/pages/login.vue                     |   2 +-
 vue.config.js                                 |   2 +-
 6 files changed, 423 insertions(+), 4 deletions(-)
 create mode 100644 src/views/modules/monitoring/compare-all-list.vue

diff --git a/.gitignore b/.gitignore
index 185e663..7310328 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+/mask-system-1.0
 
 # local env files
 .env.local
diff --git a/src/i18n/zh-CN.js b/src/i18n/zh-CN.js
index ff59d4e..febed4e 100644
--- a/src/i18n/zh-CN.js
+++ b/src/i18n/zh-CN.js
@@ -3,7 +3,7 @@ const t = {}
 t.loading = '加载中...'
 
 t.brand = {}
-t.brand.lg = '口罩人像识别系统'
+t.brand.lg = '疫情常态下人员精准检测识别系统'
 t.brand.mini = '人像'
 
 t.add = '新增'
diff --git a/src/views/modules/monitoring/barrier.vue b/src/views/modules/monitoring/barrier.vue
index 1fcefce..3e5bbac 100644
--- a/src/views/modules/monitoring/barrier.vue
+++ b/src/views/modules/monitoring/barrier.vue
@@ -206,6 +206,7 @@
 				faceBgUrl: "",
 				faces: [],
 				currentFaces: [],
+        //今日抓拍
 				toDaySnapShot: 0,
 				totalSnapShot: 0,
 				// 预警列表
diff --git a/src/views/modules/monitoring/compare-all-list.vue b/src/views/modules/monitoring/compare-all-list.vue
new file mode 100644
index 0000000..3051bd1
--- /dev/null
+++ b/src/views/modules/monitoring/compare-all-list.vue
@@ -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>
diff --git a/src/views/pages/login.vue b/src/views/pages/login.vue
index 4345eae..08d3bf6 100644
--- a/src/views/pages/login.vue
+++ b/src/views/pages/login.vue
@@ -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">
diff --git a/vue.config.js b/vue.config.js
index 4aedb2b..7626567 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -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'