文字提示根据当前采集得指位控制

src/views/zwxt/fingerprint.vue

@@ -23,9 +23,12 @@
                         </el-select>
                     </div>
                     <div style="padding-top: 42px;line-height: 4px">
-                        <el-checkbox v-model="checked" class="check_box">四联指平面采集</el-checkbox>
-                        <el-checkbox v-model="checked" class="check_box" style="margin-top: 14px">指纹交叉验证</el-checkbox>
-                        <el-checkbox v-model="checked" class="check_box" style="margin-top: 14px">随时中止采集</el-checkbox>
+                        <el-checkbox-group v-model="checked">
+                            <el-checkbox class="check_box" label="四联指平面采集"></el-checkbox>
+                            <el-checkbox class="check_box" style="margin-top: 14px" label="指纹交叉验证"></el-checkbox>
+                            <el-checkbox class="check_box" style="margin-top: 14px" label="随时中止采集"></el-checkbox>
+                        </el-checkbox-group>
+
                     </div>
                     <div style="margin-top: 43px;">
                         <span class="brightness">对比度：{{value1}}</span>
@@ -55,10 +58,10 @@
                         <img src="@/assets/img/zw/zwRight.png">
                         <img src="@/assets/img/zw/zwLeft.png">
                         <span class="tipsTitle">右</span>
-                        <span class="absoluteC"></span>
+                        <span :class="cur==0?'absoluteC0':(cur==1?'absoluteC1':(cur==2?'absoluteC2':(cur==3?'absoluteC3':(cur==4?'absoluteC4':(cur==5?'absoluteC5':(cur==6?'absoluteC6':(cur==7?'absoluteC7':(cur==8?'absoluteC8':'absoluteC9'))))))))"></span>
                     </div>
                     <div style="margin-bottom:80px;">
-                        <p  class="textTip">右手食指</p>
+                        <p  class="textTip">{{cur==0?'左手拇指':(cur==1?'左手食指':(cur==2?'左手中指':(cur==3?'左手环指':(cur==4?'左手小指':(cur==5?'右手拇指':(cur==6?'右手食指':(cur==7?'右手中指':(cur==8?'右手环指':'右手小指'))))))))}}</p>
                         <div class="textMs">
                             待预览窗口出现图像后，保持适当下压用力，匀速向另一侧滚动手指，完成采集。
                         </div>
@@ -91,14 +94,14 @@
                                     <div class="imageblock" >
                                         <div style="position: relative" >
                                             <el-image
-                                                    :class="image0?'fiveimage act':'fiveimage'"
-                                                    :src="image0"
-                                                    fit='fill'  @click='previewImage(image0,0)'>
-                                                <div slot="error" class="image-slot" @click.stop="addPic(0)">
+                                                    :class="image5?'fiveimage act':'fiveimage'"
+                                                    :src="image5"
+                                                    fit='fill'  @click='previewImage(image5,5)'>
+                                                <div slot="error" class="image-slot" @click.stop="addPic(5)">
                                                     +
                                                 </div>
                                             </el-image>
-                                            <div class="numposition"  v-show="image0">
+                                            <div class="numposition"  v-show="image5">
                                                 <span style="line-height: 14px">100</span>
                                             </div>
                                         </div>
@@ -530,7 +533,8 @@
         gather:url.zwxt+'/fingerprint/detail/1/gather',
         value1: 50,
         value2: 50,
-        checked:"",
+        checked:[],
+        cur:0,
         options: [{
           value: '选项1',
           label: '干燥指纹'
@@ -577,8 +581,8 @@
     methods:{
         //finger 这个方法需要传指位，表示现在在采集第几个指位
         addPic: function(finger) {
-            debugger
             var self = this;
+            self.cur=finger;
             var file = "../videos/video.mp3";
             var sessionId = 1617088598532;//这里到时候自动生成sessionid，纯数字
             this.GrpcCameraService = new GrpcCameraService(url.BaseURL,sessionId);
@@ -629,12 +633,6 @@
                 vm.isPhoto = true;
             }
         },
-        getcontent() {
-            var bb = new GrpcCameraService();
-            bb.getCameraState({
-                requestId: 165516
-            });
-        },
         onFileChange: function(e) {
             var files = e.target.files || e.dataTransfer.files;
             if(!files.length) return;
@@ -730,7 +728,7 @@
     },
     mounted() {
         let self=this;
-        self.getcontent();
+        self.addPic(0);
     }
     };
 </script>
@@ -759,7 +757,7 @@
     }
     .content-wrap{
         width: 1360px;
-        background: #5F5F5F;
+        background: #3C3C3C;
         border-radius: 2px;
         overflow: hidden;
         margin:0 auto;
@@ -800,6 +798,7 @@
     }
     .tips{
         width: 352px;
+        padding:7px 0 8px 0;
         background: #333333;
         border: 1px solid #404040;
         opacity: 1;
@@ -807,7 +806,7 @@
         margin-top:12px;
         position: relative;
     }
-    .absoluteC{
+    span[class^="absoluteC"]{
         position: absolute;
         width: 8px;
         height: 8px;
@@ -815,8 +814,51 @@
         border: 6px solid rgba(255, 221, 117, 0.5019607843137255);
         border-radius: 50%;
         opacity: 1;
+    }
+    .absoluteC0{
+        right: 198px;
+        top: 55px;
+    }
+    .absoluteC1{
+        right: 227px;
+        top: 4px;
+    }
+    .absoluteC2{
+        right: 249px;
+        top: -1px;
+    }
+    .absoluteC3{
+        right: 268px;
+        top: 3px;
+    }
+    .absoluteC4{
+        right: 286px;
+        top: 17px;
+    }
+    .absoluteC5{
+        right: 137px;
+        top: 55px;
+
+    }
+    .absoluteC6{
         right: 107px;
         top: 3px;
+
+    }
+    .absoluteC7{
+        right: 86px;
+        top: -1px;
+
+    }
+    .absoluteC8{
+        right: 66px;
+        top: 6px;
+
+    }
+    .absoluteC9{
+        right: 47px;
+        top: 15px;
+
     }
     .textTip{
         font-size: 16px;