指纹采集框 采集时添加边框

src/views/zwxt/fingerprint.vue

@@ -45,8 +45,8 @@
                     <div style="font-size: 12px;color: #ADADAD;padding-top: 19px;margin-bottom:8px;">
                         <span style="height: 19px;font-size: 14px;font-weight: 400;color: #F6F6F6;">采集预览</span>
                     </div>
-                    <div style="width:352px;height:352px;background: #222;border: 1px solid #404040;opacity: 1;border-radius: 4px;">
-                        <img :src="imgUrls" style="width:352px;height:352px;" v-show="imgUrls.length!=0">
+                    <div style="width:352px;height:352px;background: #222;border: 1px solid #404040;opacity: 1;border-radius: 4px;" :class="isReady?'yellow':''">
+                        <img :src="imgUrls" style="width:352px;height:352px;" v-show="imgUrls!=''">
                     </div>
                     <!--<iframe
                             id="main-iframe"
@@ -529,7 +529,8 @@
     name: "fingerprint",
     data(){
       return{
-        imgUrls:[],
+        imgUrls:'',
+        isReady:false,
         gather:url.zwxt+'/fingerprint/detail/1/gather',
         value1: 50,
         value2: 50,
@@ -575,8 +576,10 @@
             var sessionId = 1617088598532;//这里到时候自动生成sessionid，纯数字
             this.GrpcCameraService = new GrpcCameraService(url.BaseURL,sessionId);
             this.GrpcCameraService.getCameraState(finger,(responsepreImg) => {
+                self.isReady=true;
                 self.imgUrls = [responsepreImg];
             },(resposephoto) => {
+                self.isReady=false;
                 if(finger==1){
                     self.image1 = 'data:image/bmp;base64,' + resposephoto.getRolledFrame_asB64();
                     self.image11 = 'data:image/bmp;base64,'+resposephoto.getPlainFrame_asB64();
@@ -1005,6 +1008,9 @@
         height:2px !important;
     }
     /deep/  .el-slider__button{width:8px;height:8px;}
+    .yellow{
+        border:1px solid #f3f3bc !important
+    }
     .curCj{
         -webkit-animation:borderA 3s infinite forwards;
         animation:borderA 3s infinite forwards;