|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="img">
|
|
|
<div class="left" style="width: 380px">
|
|
|
<div class="pFace">
|
|
|
- <img src="../assets/img/face.png" alt />
|
|
|
+ <img :src="shibieImg" class="changeImg" alt />
|
|
|
</div>
|
|
|
<div class="nav">{{ isdetected }}</div>
|
|
|
</div>
|
|
|
@@ -83,20 +83,21 @@
|
|
|
<div
|
|
|
style="width: 98%; overflow: auto; display: flex; margin: 20px 0 0 10px"
|
|
|
>
|
|
|
- <img
|
|
|
- v-for="(res, index) in sampleArr"
|
|
|
- :key="index"
|
|
|
- :src="res.img[0]"
|
|
|
- alt=""
|
|
|
- style="margin-right: 10px"
|
|
|
- />
|
|
|
+ <div v-for="(res, index) in sampleArr" :key="index" class="gdt">
|
|
|
+ <img
|
|
|
+ :src="res.img[0]"
|
|
|
+ alt=""
|
|
|
+ style="margin-right: 10px; width: 195px; height: 156px"
|
|
|
+ />
|
|
|
+ <div class="spotNumber">{{ res.name }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="sbh" v-if="resultImg.name">
|
|
|
- <!-- <div class="spotPhoto">
|
|
|
+ <!-- <div class="sbh" v-if="resultImg.name">
|
|
|
+ <div class="spotPhoto">
|
|
|
<img :src="resultImg.img[0]" alt="" />
|
|
|
</div> -->
|
|
|
- <div class="spotNumber">{{ resultImg.name }}</div>
|
|
|
- </div>
|
|
|
+ <!-- <div class="spotNumber">{{ resultImg.name }}</div> -->
|
|
|
+ <!-- </div> -->
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
title="设置名称"
|
|
|
@@ -107,7 +108,11 @@
|
|
|
class="dialog_diy"
|
|
|
>
|
|
|
<el-form class="over1">
|
|
|
- <el-form-item label="名称" :label-width="formLabelWidth" class="font1">
|
|
|
+ <el-form-item
|
|
|
+ label="名称"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ style="font-size: 16px !important"
|
|
|
+ >
|
|
|
<!-- {{ this.gameInfo.name }} -->
|
|
|
<el-input
|
|
|
clearable
|
|
|
@@ -119,8 +124,29 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-button class="update" @click="update">添加</el-button>
|
|
|
- <el-button @click="updateMessage = false">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ @click="cancel"
|
|
|
+ style="font-size: 16px !important"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
</el-dialog>
|
|
|
+ <!-- <el-dialog
|
|
|
+ title="识别"
|
|
|
+ :visible.sync="closeUpdateMessage"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="300px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy"
|
|
|
+ >
|
|
|
+ <div style="text-align: center; font-size: 16px !important">
|
|
|
+ 已识别到"{{ this.resultImg.name }}"的图片
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ @click="closeUpdateMessage = false"
|
|
|
+ style="margin: 20px 0 0 35%; font-size: 16px !important"
|
|
|
+ >确认</el-button
|
|
|
+ >
|
|
|
+ </el-dialog> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -138,9 +164,11 @@ export default {
|
|
|
require("../assets/img/tou1.png"),
|
|
|
require("../assets/img/policeNew.png"),
|
|
|
],
|
|
|
+ shibieImg: require("../assets/img/face.png"),
|
|
|
isCamera: false,
|
|
|
count: 0,
|
|
|
change: 0,
|
|
|
+ closeUpdateMessage: false,
|
|
|
updateMessage: false,
|
|
|
upName: "",
|
|
|
number: 0,
|
|
|
@@ -171,8 +199,29 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ cancel(){
|
|
|
+ this.updateMessage = false
|
|
|
+ this.sampleArr[this.sampleArr.length - 1].name = "编号:" + this.number;
|
|
|
+ if (this.sampleArr.length > 0) {
|
|
|
+ // var a = document.getElementsByClassName("spot");
|
|
|
+ // a[0].style.display = "block";
|
|
|
+ this.fnsample();
|
|
|
+ }
|
|
|
+ },
|
|
|
update() {
|
|
|
this.change = 1;
|
|
|
+ this.number = this.number + 1;
|
|
|
+ if (this.change == 1) {
|
|
|
+ if (this.sampleArr.length > 0) {
|
|
|
+ this.sampleArr[this.sampleArr.length - 1].name = this.upName;
|
|
|
+ this.isdetected = "已识别到" + this.resultImg.name + "的图片";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.sampleArr.length > 0) {
|
|
|
+ // var a = document.getElementsByClassName("spot");
|
|
|
+ // a[0].style.display = "block";
|
|
|
+ this.fnsample();
|
|
|
+ }
|
|
|
this.updateMessage = false;
|
|
|
},
|
|
|
// 调用摄像头
|
|
|
@@ -217,10 +266,11 @@ export default {
|
|
|
if (!(event.data.length == 0) && _this.count <= 10) {
|
|
|
if (_this.count < 0) _this.count = 0;
|
|
|
_this.count += 1;
|
|
|
- var a = document.getElementsByClassName("save");
|
|
|
if (_this.count > 10) {
|
|
|
- _this.isdetected = "已检测到人脸";
|
|
|
- a[0].style.display = "block";
|
|
|
+ if (_this.sampleArr.length == 0) {
|
|
|
+ _this.isdetected = "已检测到人脸";
|
|
|
+ }
|
|
|
+ // _this.isdetected = "已检测到人脸";
|
|
|
if (
|
|
|
_this.sampleArr.length > 0 &&
|
|
|
_this.$store.state.function.indexOf("police=1;") != -1
|
|
|
@@ -259,20 +309,11 @@ export default {
|
|
|
// this.detArr.push(imgBase64);
|
|
|
var json = { name: "", img: [] };
|
|
|
this.number = this.number + 1;
|
|
|
- this.updateMessage = true;
|
|
|
this.upName = "";
|
|
|
- if (this.change == 1) {
|
|
|
- json.name = this.upName;
|
|
|
- } else {
|
|
|
- json.name = "编号:" + this.number;
|
|
|
- }
|
|
|
json.img.push(imgBase64);
|
|
|
this.sampleArr.push(json);
|
|
|
- if (this.sampleArr.length > 0) {
|
|
|
- // var a = document.getElementsByClassName("spot");
|
|
|
- // a[0].style.display = "block";
|
|
|
- this.fnsample();
|
|
|
- }
|
|
|
+ this.updateMessage = true;
|
|
|
+
|
|
|
//this.fnInit()
|
|
|
// this.resultArr.push(imgBase64);
|
|
|
|
|
|
@@ -350,11 +391,14 @@ export default {
|
|
|
console.log(this.resultArr);
|
|
|
for (var i = 0; i < this.sampleArr.length; i++) {
|
|
|
if (this.sampleArr[i].name == bestMatch.label) {
|
|
|
- if (this.change == 1) {
|
|
|
- this.resultImg.name = this.upName;
|
|
|
- } else {
|
|
|
- this.resultImg.name = this.sampleArr[i].name;
|
|
|
- }
|
|
|
+ // this.closeUpdateMessage = true;
|
|
|
+ // if (this.change == 1) {
|
|
|
+ // this.resultImg.name = this.upName;
|
|
|
+ // } else {
|
|
|
+ // this.resultImg.name = this.sampleArr[i].name;
|
|
|
+ // }
|
|
|
+ this.isdetected = "已识别到" + this.sampleArr[i].name + "的图片";
|
|
|
+ this.shibieImg = this.sampleArr[i].img[0];
|
|
|
this.resultImg.img[0] = this.sampleArr[i].img[0];
|
|
|
}
|
|
|
}
|
|
|
@@ -434,6 +478,7 @@ body {
|
|
|
|
|
|
.update {
|
|
|
margin-left: 20%;
|
|
|
+ font-size: 16px !important;
|
|
|
}
|
|
|
|
|
|
.tip {
|
|
|
@@ -560,15 +605,12 @@ body {
|
|
|
}
|
|
|
|
|
|
.pFace {
|
|
|
- width: 180px;
|
|
|
+ width: 300px;
|
|
|
+ height: 240px;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 220px;
|
|
|
}
|
|
|
|
|
|
-.save {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
.close > img,
|
|
|
.save > img,
|
|
|
.pFace > img,
|
|
|
@@ -587,12 +629,12 @@ body {
|
|
|
}
|
|
|
|
|
|
.isPhoto {
|
|
|
- padding: 20px 0 0 0;
|
|
|
+ padding: 80px 0 0 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.isPhoto > span {
|
|
|
- font-size: 32px;
|
|
|
+ font-size: 25px;
|
|
|
color: #ccc;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
@@ -616,10 +658,11 @@ body {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
-.sbh {
|
|
|
+.spotNumber {
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
font-size: 20px;
|
|
|
+ color: #8c8c8c;
|
|
|
}
|
|
|
|
|
|
.spotPhoto {
|
|
|
@@ -631,4 +674,9 @@ body {
|
|
|
margin-top: 20px;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
+
|
|
|
+.gdt {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
</style>
|
lcw