zszq-trs/YLErpWeb/Views/Common/ProgressBar.cshtml

@model string
@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_LayoutMini.cshtml";
}

@section CSS{
    <link rel="stylesheet" href="~/Statics/libs/bootstrap/css/bootstrap.min.css?v=@(HtmlUtil.JsVersion)">

    <style>
        .sr-only {
            position: initial;
            width: auto;
            overflow: initial;
        }

        .progress-striped .progress-bar,
        .progress-bar-striped {
            background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-size: 40px 40px;
        }

        .progress.active .progress-bar,
        .progress-bar.active {
            -webkit-animation: progress-bar-stripes 2s linear infinite;
            -o-animation: progress-bar-stripes 2s linear infinite;
            animation: progress-bar-stripes 2s linear infinite;
        }

        .progress-bar {
            background-color: rgba(0,0,0,.35);
            border-radius: 10px;
        }

        .progress {
            height: 20px;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
        }

        .progress-striped {
            background-color: #E9E9E9 !important;
        }

        .progress-bar {
            background-color: #67c23a !important;
        }
    </style>
}
    @section JS{
    <script src="~/statics/bundles/jquery.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Statics/libs/bootstrap/js/bootstrap.bundle.min.js?v=@(HtmlUtil.JsVersion)"></script>

    <script>
        var hadDone = 0.0;
        var message = [];
        var showStatus = '@ViewBag.showStatus' === 'True';
        $(function () {
            setTimeout(function () { listen() }, 500)
        });

        function getHadSent(callback) {
            $.ajax({
                url: "/common/ProcessStatus?processName=@Model",
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if (data) {
                        data.done = isNumber(data.done) ? parseInt(data.done) : 0;
                        if (isNumber(data.total) && data.total != 0) {
                            hadDone = data.done / data.total;
                            setProcessBar();
                        }
                        if (data.message) {
                            if (message.indexOf(data.message) < 0) {
                                message = data.message;
                                if (showStatus && message.length > 0) {
                                    $("#currentMsg").text(message[message.length - 1]);
                                }
                            }
                        }
                        //ProgressBarStatus.IDLE
                        if (data.status === 0) {
                            var messageshow = message.join('');
                            if (_.trim(messageshow)) {
                                messageshow += "其他邮件已发送成功";
                            }
                            if (typeof (window.parent.showMessage) == "function") {
                                window.parent.showMessage(messageshow);
                            }
                            if (typeof (window.parent.ProcessInFinal) == "function") {
                                window.parent.ProcessInFinal(data.resultObj);
                            }
                            window.parent.layer.closeAll();
                        }
                    }
                },
                error: function (msg) {
                    main.message("无法连接");
                    window.parent.layer.closeAll();
                }
            });
            callback();
        }


        function listen() {
            if (hadDone != null /*&& hadDone < 1*/) {
                getHadSent(function () {
                    timer = setTimeout(listen, 500)
                });
            } else {
                return;
            }
        }

        function setProcessBar() {
            var Donepercent = hadDone * 100;
            $("#DoneBar").width(Donepercent + "%");
            $("#label").text(parseInt(Donepercent) + "% 完成");
        }
    </script>
}


@if (ViewBag.showStatus)
{
    <span id="currentMsg">执行中...</span>
}
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar" id="DoneBar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 0%;">
        <span class="sr-only" id="label">0% 完成</span>
    </div>
</div>