zhouzhendong
/
baoshi-was


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>显示二维码 BsWAS</title>
    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid " id="page">
        <div class="card ">
            <div class="card-body">
                <div class="align-content-center m-3" >
                    <h3 class="text-center text-dark">首次扫描后将与设备绑定，之后扫描需使用原设备与原软件！</h3><br>
                    <h4 class="text-center text-danger">如更换设备请联系管理人员解除设备绑定！</h4>
                </div>

                <div class="row">
                    <div class="col-6 text-center" v-for="importAndExportQRCode in importAndExportQRCodes" >
                            <img id="img" class="img-thumbnail img-fluid"  :src="'data:image/png;base64,'+importAndExportQRCode.src" width="75%"/>
                        <p class="font-weight-bold m-2 h1 text-center" style="color: red">@{{ importAndExportQRCode.source }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ asset('js/app.js') }}"></script>
    <script>
        function computeDiffMicroTime_fromNow(dateComparing) {
            let now=new Date();
            let dateComparingObj=new Date(dateComparing)
            let mil = dateComparingObj.getTime()-now.getTime();
            if (mil>0){
                return mil;
            }else {
                return mil=1000;
            }
        }
        new Vue({
            el:"#page",
            data:{
                importAndExportQRCodes:[
                    @foreach($importAndExportQRCodes as $importAndExportQRCode)
                    {url:'{{$importAndExportQRCode->url}}', type:'{{$importAndExportQRCode->type}}',source:'{{$importAndExportQRCode->source}}'},
                    @endforeach
                ],
                next_refresh_time:'{{$next_refresh_time}}',
            },
            mounted(){
                let _this=this;
                let refreshQRCode=function(){
                    axios.post('{{url('personnel/checking-in/refreshQRCode')}}')
                        .then(function (response) {
                            _this.importAndExportQRCodes=response.data.importAndExportQRCodes;
                            _this.next_refresh_time=response.data.next_refresh_time;
                            document.querySelector("meta[name='csrf-token']").setAttribute('content',response.data.csrf_Token);
                            setTimeout(refreshQRCode,computeDiffMicroTime_fromNow(_this.next_refresh_time));
                        }).catch(function (err) {
                        setTimeout(refreshQRCode,computeDiffMicroTime_fromNow(_this.next_refresh_time));
                        tempTip.setDuration(4000);
                        tempTip.show(err);
                    });
                };
                refreshQRCode();
            }
        });
    </script>
</body>
</html>