ConstructionCost/public/web/PerfectLoad.js

/**
 * Created by chen on 2017/10/31.
 */

jQuery.bootstrapLoading = {
    isLoading: function () {
        return $('#loadingPage').is(':visible');
    },
    start: function (options) {
        if(this.isLoading()){
            return;
        }
        var defaults = {
            opacity: 0.5,
            //loading页面透明度
           // backgroundColor: "#FFFFFF",
            //loading页面背景色
            borderColor: "#bbb",
            //提示边框颜色
            borderWidth: 1,
            //提示边框宽度
            borderStyle: "solid",
            //提示边框样式
            loadingTips: "Loading, please wait...",
            //提示文本
            TipsColor: "#fff",
            //提示颜色
            delayTime: 500,
            //页面加载完成后，加载页面渐出速度
            zindex: 2000,
            //loading页面层次
            sleep: 0
            //设置挂起,等于0时则无需挂起

        }
        var options = $.extend(defaults, options);

        //获取页面宽高
        var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;

        //在页面未加载完毕之前显示的loading Html自定义内容
        //var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px;  background: ' + options.backgroundColor + ' url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5px center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';
        var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;">' +'<div class="text-green"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> </div> </div></div>';
        //呈现loading效果
        $("body").append(_LoadingHtml);
        //获取loading提示框宽高
        var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
            _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

        //计算距离，让loading提示框保持在屏幕上下左右居中
        var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
            _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;

        $("#loadingTips").css({
            "left": _LoadingLeft + "px",
            "top": _LoadingTop + "px"
        });

        //监听页面加载状态
        document.onreadystatechange = PageLoaded;

        //当页面加载完成后执行
        function PageLoaded() {
            if (document.readyState == "complete") {
                var loadingMask = $('#loadingPage');

                setTimeout(function () {
                        loadingMask.animate({
                                "opacity": 0
                            },
                            options.delayTime,
                            function () {
                                $(this).hide();

                            });

                    },
                    options.sleep);

            }
        }
    },
    end: function () {
        $("#loadingPage").remove();
    },
    progressStop:true,
    progressStart:async function(title="导出文件",autoBar = false){
        if($("#progressModal").length == 0){
            let phtml =    `<div class="modal fade" id="progressModal" data-backdrop="static">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                         <h5 class="modal-title" id="progress_modal_title">${title}</h5>
                                    </div>
                                     <div class="modal-body">
                                        <!--正在生成-->
                                        <h5 class="my-3" id="progress_modal_body">正在${title}</h5>
                                        <div class="progress mb-3">
                                        <div id="progress_modal_bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
                                        </div>
                                     </div>
                                   </div>
                                </div>
                            </div>`;
            $("body").append(phtml);
        }else {
            $("#progress_modal_title").text(title);
            $("#progress_modal_body").text(`正在${title}`);
        }
        $("#progress_modal_bar").css('width','0%');
        $("#progressModal").modal('show');
        if(autoBar == true){//假的进度条
            $.bootstrapLoading.progressStop = false;
            let width = 0;
            while ($.bootstrapLoading.progressStop == false){
                await  setTimeoutSync(null,1000);
                width += 5;
                if(width > 90) width -= 50;
                $("#progress_modal_bar").css('width',`${width}%`);
            }
        }
    },
    progressEnd:function () {
        if ($('#progressModal').is(':visible')) {
            $("#progress_modal_bar").css('width','100%');
            $.bootstrapLoading.progressStop = true;
            $("#progressModal").modal('hide');
        }
    }
}

const SCComponent = (() => {
    /*
    * 假滚动条，调用end方法后进度直接跳到100%
    * 使用利用合成线程的css动画，不会被js执行阻塞。
    * */
    const InitProgressBar = (() => {
        function ProgressBar() {
            this.$modal = $('#progress');
            this.$title = $('#progress-title');
            this.$title.text('导出');
            this.$content = $('#progress-content');
            this.$content.text('正在导出...');
            this.$barCover = $('#progressCover');
            this.animationName = 'progress-cover-move';
        }
        //显示滚动条，自动处理滚动条速度
        ProgressBar.prototype.start = function (title, content) {
            this.$title.text(title);
            this.$content.text(content);
            this.$barCover.css('transform', 'translate(0)');
            this.$barCover.addClass(this.animationName);
            this.$modal.modal('show');
        };
        //结束显示滚动条，滚动条从当前位置滚到100% 消失
        ProgressBar.prototype.end = function () {
            this.$barCover.removeClass(this.animationName);
            this.$barCover.css('transform', 'translate(100%)');
            setTimeout(() => {
                this.$modal.modal('hide');
            }, 500);
        };
        return ProgressBar;
    })();

    return {InitProgressBar}
})();