1

src/components/function.vue

@@ -75,27 +75,52 @@
           <!--canvas截取流-->
           <canvas ref="canvas" width="300" height="240" v-show="false"></canvas>
         </div>
-        <div v-if="isCamera" class="isPhoto">
-          <!--canvas截取流-->
-          <span>截取的图片</span>
-          <div style="width: 500px; overflow: auto; display: flex">
-            <img
-              v-for="(res, index) in sampleArr"
-              :key="index"
-              :src="res.img[0]"
-              alt=""
-              style="margin-right: 10px"
-            />
-          </div>
-        </div>
-        <div class="sbh" v-if="resultImg.name">
-          <!-- <div class="spotPhoto">
+      </div>
+    </div>
+    <div v-if="isCamera" class="isPhoto">
+      <!--canvas截取流-->
+      <span>截取的图片</span>
+      <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>
+      <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="设置名称"
+      :visible.sync="updateMessage"
+      :append-to-body="true"
+      width="300px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <el-form class="over1">
+        <el-form-item label="名称" :label-width="formLabelWidth" class="font1">
+          <!-- {{ this.gameInfo.name }} -->
+          <el-input
+            clearable
+            type="primary"
+            v-model="upName"
+            style="width: 150px"
+            class="inputStyle"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button class="update" @click="update">添加</el-button>
+      <el-button @click="updateMessage = false">取消</el-button>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -115,10 +140,14 @@ export default {
       ],
       isCamera: false,
       count: 0,
+      change: 0,
+      updateMessage: false,
+      upName: "",
       number: 0,
       isdetected: "请您保持脸部在画面中央",
       videoEl: {},
       canvasEL: {},
+      formLabelWidth: "100px",
       resultImg: {
         img: [],
         name: "",
@@ -142,6 +171,10 @@ export default {
     };
   },
   methods: {
+    update() {
+      this.change = 1;
+      this.updateMessage = false;
+    },
     // 调用摄像头
     callCamera() {
       let _this = this;
@@ -184,9 +217,14 @@ 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 = "已检测到人脸";
-                  if (_this.sampleArr.length > 0 && _this.$store.state.function.indexOf("police=1;") != -1) {
+                  a[0].style.display = "block";
+                  if (
+                    _this.sampleArr.length > 0 &&
+                    _this.$store.state.function.indexOf("police=1;") != -1
+                  ) {
                     _this.fnRun();
                   }
                 }
@@ -221,7 +259,13 @@ export default {
       // this.detArr.push(imgBase64);
       var json = { name: "", img: [] };
       this.number = this.number + 1;
-      json.name = "编号:" + this.number;
+      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) {
@@ -306,12 +350,19 @@ export default {
         console.log(this.resultArr);
         for (var i = 0; i < this.sampleArr.length; i++) {
           if (this.sampleArr[i].name == bestMatch.label) {
-            this.resultImg.name = this.sampleArr[i].name;
+            if (this.change == 1) {
+              this.resultImg.name = this.upName;
+            } else {
+              this.resultImg.name = this.sampleArr[i].name;
+            }
             this.resultImg.img[0] = this.sampleArr[i].img[0];
           }
         }
       });
     },
+    handleClose(done) {
+      done();
+    },
     // 更换匹配图
     async fnChange(e) {
       if (!e.target.files.length) return;
@@ -372,6 +423,19 @@ body {
   width: 100%;
 }
 
+.dialog_diy >>> .el-form-item__label {
+  width: 50px !important;
+  margin-left: 35px !important;
+}
+
+.dialog_diy >>> .el-form-item__content {
+  margin-left: 0 !important;
+}
+
+.update {
+  margin-left: 20%;
+}
+
 .tip {
   margin: 25px 0 30px 20px;
   width: 419px;
@@ -394,7 +458,7 @@ body {
   justify-content: flex-start;
   justify-content: center;
   width: 100%;
-  height: 100%;
+  height: 500px;
   position: relative;
 }
 
@@ -501,6 +565,10 @@ body {
   margin-top: 220px;
 }
 
+.save {
+  display: none;
+}
+
 .close > img,
 .save > img,
 .pFace > img,
@@ -523,6 +591,12 @@ body {
   box-sizing: border-box;
 }
 
+.isPhoto > span {
+  font-size: 32px;
+  color: #ccc;
+  margin-left: 10px;
+}
+
 .nav {
   text-align: center;
   font-size: 32px;
@@ -545,6 +619,7 @@ body {
 .sbh {
   text-align: center;
   margin: 0 auto;
+  font-size: 20px;
 }
 
 .spotPhoto {