Calculation/app/view/shares/check_modal2.ejs

<!--数据检查-->
<div class="modal fade" id="checking2" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据检查</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <!--雷达扫描动画-->
                        <div class="L_transform">
                            <div class="trans_bg">
                                <div class="bg_shade"></div>
                                <div class="circles topcircle active">
                                    <div class="trio"><p class="c-icon"></p></div>
                                </div>
                                <div class="circles leftcircle ">
                                    <div class="trio"><p class="c-icon"></p></div>
                                </div>
                                <div class="circles leftcircle2 ">
                                    <div class="trio"><p class="c-icon"></p></div>
                                </div>
                                <div class="circles rightcircle ">
                                    <div class="trio"><p class="c-icon"></p></div>
                                </div>
                                <div class="circles rightcircle2">
                                    <div class="trio"><p class="c-icon"></p></div>
                                </div>
                                <div class="heart_box">
                                    <div class="heart"></div>
                                    <div class="shan" style="transform: rotate(274deg);"></div>
                                </div>
                            </div>
                        </div>
                        <!--雷达扫描动画结束-->
                    </div>
                    <div class="col-6">
                        <p>数据检查，将检查罗列台账中以下内容：</p>
                        <div id="check2-list">
                            <div class="card p-2 border-success border-0">
                                <div class="d-flex justify-content-start">
                                    <span class="text-success mr-2"><i class="fa fa-check-circle fa-2x"></i></span>
                                    <div class="w-100">
                                        项目节、清单同层
                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">100%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card p-2 border-success border-0">
                                <div class="d-flex justify-content-start">
                                    <span class="text-warning mr-2"><i class="fa fa-info-circle fa-2x"></i></span>
                                    <div class="w-100">
                                        项目节、清单编号同时为空
                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">100%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card p-2 border-success border-0">
                                <div class="d-flex justify-content-start">
                                    <span class="text-primary mr-2"><i class="fa fa-cog fa-spin fa-2x"></i></span>
                                    <div class="w-100">
                                        清单数量不等于计量单元之和
                                        <div class="progress mt-1">
                                            <div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-center text-primary" id="check2-hint">检查中，请等待...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-sm btn-primary" id="check2-result">查看结果</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const getmatrix = function(a,b,c,d,e,f){
        var aa=Math.round(180*Math.asin(a)/ Math.PI);
        var bb=Math.round(180*Math.acos(b)/ Math.PI);
        var cc=Math.round(180*Math.asin(c)/ Math.PI);
        var dd=Math.round(180*Math.acos(d)/ Math.PI);
        var deg=0;
        if(aa==bb||-aa==bb){
            deg=dd;
        }else if(-aa+bb==180){
            deg=180+cc;
        }else if(aa+bb==180){
            deg=360-cc||360-dd;
        }
        return deg>=360?0:deg;

    }
    const radarFind = function (select) {
        $('.circles').removeClass('active');
        $(select).addClass('active');
    }
    let radarHandle, progressHandle;
    const check2Viewing = function (setting) {
        if (!setting.prefix) setting.prefix = 'check2-';
        if (setting.randomWait) {
            for (const c of setting.checks) {
                //c.wait = _.random(2, 3) + setting.extra;
                c.wait = 1;
            }
        }

        // 雷达
        let radarObj=$('.shan');
        radarHandle = setInterval(function(){
            var transform = radarObj.css('transform');
            var deg= transform === 'none' ? 0 : eval('get'+ transform);//构造getmatrix函数,返回上次旋转度数
            var step=45;
            radarObj.css({'transform':'rotate('+(deg+step)%360+'deg)'});
            var dd = radarObj.css({'transform':'rotate('+(deg+step)%360+'deg)'});
            //上
            if(deg>300&&deg<360 ||deg>0 &&deg<20){
                radarFind('.topcircle');
                // 右
            }else if(deg>20 && deg<45){
                radarFind('.rightcircle');
            }else if(deg>70 && deg<90){
                radarFind('.rightcircle2');
                // 左
            }else if(deg>150 && deg<180){
                radarFind('.leftcircle2');
            }else if(deg>230 && deg<300){
                radarFind('.leftcircle');
            }
        }, 100);

        const initCheckList = function (prefix, checks) {
            $('#check2-result').hide();
            $('#check2-hint').removeClass('text-warning').removeClass('text-success').addClass('text-primary').html('检查中，请等待...');
            const html = [];
            for (const c of checks) {
                const domid = prefix + c.key;
                html.push(`<div class="card p-2 border-success border-0" id="${domid}">`);
                html.push('<div class="d-flex justify-content-start">');
                html.push('<span class="text-muted mr-2"><i class="fa fa-circle-o fa-2x"></i></span>');
                html.push('<div class="w-100">', c.caption);
                html.push('<div class="progress mt-1">', '<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>', '</div>');
                html.push('</div>');
                html.push('</div>');
                html.push('</div>');
            }
            $('#check2-list').html(html.join(''));
        }
        const doSomeCheck = function (setting, index) {
            const check = setting.checks[index];
            if (!check) return;

            setting.total = setting.total + (check.error || 0);
            const obj = $('#' + setting.prefix + check.key);
            $('.fa-circle-o', obj).removeClass('fa-circle-o').addClass('fa-cog');
            $('.text-muted').removeClass('text-muted').addClass('text-primary');
            $('.progress-bar', obj).attr('aria-valuemax', check.wait*10);
            const handle = setInterval(function () {
                const now = _.toInteger($('.progress-bar', obj).attr('aria-valuenow')) || 0;
                if (now < check.wait * 10) {
                    const percent = Math.min(ZhCalc.div((now + 1) * 10, check.wait, 0), 100);
                    $('.progress-bar', obj).attr('aria-valuenow', Math.min(now + 1, check.wait*10)).html(percent + '%').width(percent + '%');
                }
            }, 100);
            setTimeout(() => {
                clearInterval(handle);
                $('.fa-cog', obj).removeClass('fa-cog').addClass(check.error > 0 ? 'fa-info-circle' : 'fa-check-circle');
                $('.text-primary', obj).removeClass('text-primary').addClass(check.error > 0 ? 'text-warning' : 'text-success');
                $('.progress-bar', obj).addClass(check.error > 0 ? 'bg-warning' : 'bg-success');
                if (index === setting.checks.length - 1) {
                    if (setting.total > 0) {
                        $('#check2-result').show();
                        $('#check2-hint').removeClass('text-primary').addClass('text-warning').html('检查完成，发现问题，请查阅检查结果。');
                    } else {
                        $('#check2-hint').removeClass('text-primary').addClass('text-success').html('检查完成，没有任何问题。');
                    }
                } else {
                    doSomeCheck(setting, index + 1);
                }
            }, check.wait*1000 + 500);
        }

        initCheckList(setting.prefix, setting.checks);
        $('#checking2').modal('show');
        setting.total = 0;
        doSomeCheck(setting, 0);
        $('#check2-result').click(() => {
            $('#checking2').modal('hide');
            setting.checkList.show();
        });
    }
    $('#checking2').bind('hidden.bs.modal', function () {
        clearInterval(radarHandle);
    });
</script>