1

src/components/function.vue

@@ -83,20 +83,21 @@
       <div
         style="width: 98%; overflow: auto; display: flex; margin: 20px 0 0 10px"
       >
-        <img
+        <div
+          style="display: flex; flex-direction: column"
           v-for="(res, index) in sampleArr"
           :key="index"
-          :src="res.img[0]"
-          alt=""
-          style="margin-right: 10px"
-        />
+        >
+          <img :src="res.img[0]" alt="" style="margin-right: 10px" />
+          <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,7 +124,28 @@
         </el-form-item>
       </el-form>
       <el-button class="update" @click="update">添加</el-button>
-      <el-button @click="updateMessage = false">取消</el-button>
+      <el-button
+        @click="updateMessage = false"
+        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>
@@ -141,6 +167,7 @@ export default {
       isCamera: false,
       count: 0,
       change: 0,
+      closeUpdateMessage: false,
       updateMessage: false,
       upName: "",
       number: 0,
@@ -173,6 +200,19 @@ export default {
   methods: {
     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;
+        }else{
+          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();
+      }
       this.updateMessage = false;
     },
     // 调用摄像头
@@ -217,10 +257,8 @@ 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.$store.state.function.indexOf("police=1;") != -1
@@ -259,20 +297,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,6 +379,7 @@ export default {
         console.log(this.resultArr);
         for (var i = 0; i < this.sampleArr.length; i++) {
           if (this.sampleArr[i].name == bestMatch.label) {
+            this.closeUpdateMessage = true;
             if (this.change == 1) {
               this.resultImg.name = this.upName;
             } else {
@@ -434,6 +464,7 @@ body {
 
 .update {
   margin-left: 20%;
+  font-size: 16px !important;
 }
 
 .tip {
@@ -565,10 +596,6 @@ body {
   margin-top: 220px;
 }
 
-.save {
-  display: none;
-}
-
 .close > img,
 .save > img,
 .pFace > img,
@@ -587,12 +614,12 @@ body {
 }
 
 .isPhoto {
-  padding: 20px 0 0 0;
+  padding: 40px 0 0 0;
   box-sizing: border-box;
 }
 
 .isPhoto > span {
-  font-size: 32px;
+  font-size: 25px;
   color: #ccc;
   margin-left: 10px;
 }
@@ -616,10 +643,11 @@ body {
   display: none;
 }
 
-.sbh {
+.spotNumber {
   text-align: center;
   margin: 0 auto;
   font-size: 20px;
+  color: #8c8c8c;
 }
 
 .spotPhoto {