导出提示下载进度条优化更新 样式优化

导出提示下载进度条优化更新 样式优化

上篇文章说了怎么做一个提示框 这篇文章是对进度条的优化样式和bug

更改样式

效果：

首先样式设置：

 .circle {
            width: 80px;
            height: 80px;
            position: absolute;
            border-radius: 50%;
            /*background: #01534b;*/
            background: #009688;
            opacity: .8;
        }
        .pie_left,
        .pie_right {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .left,
        .right {
            width: 80px;
            height: 80px;
            background: #0ed5c3;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .pie_right,
        .right {
            clip: rect(0, auto, auto, 40px);
        }
        .pie_left,
        .left {
            clip: rect(0, 40px, auto, 0);
        }
        .mask {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            left: 7px;
            top: 7px;
            background: rgb(255, 255, 255);
            position: absolute;
            text-align: center;
            line-height: 70px;
            font-size: 10px;
            font-weight: bold;
            color: #009688;
        }
        #canMove {
            right:2%;
            top:8%;
        }
        .span2-wrap{
            position: absolute;
            left: 50%;
            bottom: -30px;
            background-color: rgb(255, 255, 255);
            white-space: nowrap;  /*是否换行*/
            transform: translateX(-50%);
        }

页面标签：

 <form>
        <div>
            <div class="circle" id="canMove" style="display: none">
                <div class="pie_left">
                    <div class="left"></div>
                </div>
                <div class="pie_right">
                    <div class="right"></div>
                </div>
                <div class="mask"><span id="span1">0</span>%</div>
                <div class="span2-wrap">
                    <span id="span2">开始处理数据....</span>
                </div>
            </div>

        </div>
    </form>

设置可拖动移动

 //拖拽可移动
    dragElement(document.getElementById(("canMove")));
    function dragElement(elmnt) {
        var pos1 = 100, pos2 = 100, pos3 = 100, pos4 = 100;
        if (document.getElementById(elmnt.id + "header")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
        } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

设置动态进度条隐藏和显示 每隔300ms访问session提取数据。

在导出时设置显示
document.getElementById(“canMove”).style.display = “”;
循环查询：

function openForm(){
                $.ajax({
                    type: 'get',
                    async:false,
                    url:serverPath +"/ptnUploadDownload/getSession/"+1,
                    success: function (data) {
                        //正在查询数据...
                        //
                        // "共"+polPolicyList.size()+"条数据，"+"正在导出第"+i+1+"条数据。"
                        //正在写入excel表中。
                        if(data!=null && data!=""){
                            if(data.content){
                                if(data.content=="正在查询数据..."){
                                    $("#span2").text(data.content);
                                    reload();
                                }else if(data.content.includes("正在查询数据...,")){
                                    var content_array=data.content.split(',');
                                    var newsumStr = "";
                                    for(var i=0;i<content_array.length;i++){
                                        if(i==1) newsumStr=content_array[i];
                                    }
                                    $("#span1").text(newsumStr);
                                    $("#span2").text("正在查询数据...");
                                    reload();
                                }else if(data.content=="已完成"){
                                    $("#span2").text(data.content);
                                    $("#span1").text("100");// num=0;
                                    reload();
                                    trueType = false;
                                    $.ajax({
                                        type: 'get',
                                        async:false,
                                        url:serverPath +"/ptnUploadDownload/getSession/"+0,
                                        success: function (data) {
                                            document.getElementById("canMove").style.display = "none";
                                            $("#span2").text("开始处理数据....");
                                            $("#span1").text(0);
                                            reload();
                                        }})
                                }else if(data.content.includes("正在写入excel表中。")){
                                    var content_array=data.content.split('。');
                                    var newsumStr = "";
                                    var newCountStr= "" ;
                                    for(var i=0;i<content_array.length;i++){
                                        if(i==1) newsumStr=content_array[i];
                                        if(i==0) newCountStr=content_array[i];
                                    }
                                    $("#span2").text(newCountStr);
                                    $("#span1").text(newsumStr);
                                    reload();
                                }else{
                                    var content_array=data.content.split('。');
                                    var newsumStr = "";
                                    var newCountStr= "" ;
                                    for(var i=0;i<content_array.length;i++){
                                        if(i==1) newsumStr=content_array[i];
                                        if(i==0) newCountStr=content_array[i];
                                    }
                                    $("#span2").text(newCountStr);
                                    $("#span1").text(newsumStr);
                                    reload();
                                }
                            }
                        }
                    },error:function(){
                        document.getElementById("canMove").style.display = "none";
                        trueType = false;
                        $("#span2").text("开始处理数据....");
                        $("#span1").text("0");
                        reload();
                    }
                });
        if(trueType) {
            setTimeout(function () {
                openForm()
            }, 300);
        }
    }

每次设置进度条参数都要调用的方法

function reload(){
        $('.circle').each(function(index, el) {
            var num = $(this).find('#span1').text() * 3.6;
            if (num <= 180) {
                $(this).find('.right').css('transform', "rotate(" + num + "deg)");
            } else {
                $(this).find('.right').css('transform', "rotate(180deg)");
                $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
            };
        });
  }

防止刷新之后后台代码继续运行 而前端的样式都改为默认，进而进度条会有两个进度。

ifSessionHaveObject();
    function ifSessionHaveObject(){
        // 查看SESSION里是否有导出对象 有就停掉线程 删掉对象重新下载
        $.ajax({
            type: 'get',
            async:false,
            url:serverPath +"/ptnUploadDownload/getSession/"+2,
            success: function (data) {
                // document.getElementById("canMove").style.display = "none";
                $("#span2").text("开始处理数据....");
                $("#span1").text(0);
                reload();
                trueType=false;
            },error:function(){
                $("#span2").text("开始处理数据....");
                $("#span1").text(0);
                reload();
                trueType=false;
                example.ajax.reload();
            }})
    }

controller的处理：
if(request.getSession().getAttribute(“PtnUploadDownload”)!=null){
request.getSession().setAttribute(“error”,true);

}

开发思想：

每次刷新都去查看session里边是否有对象，如果有说明后台是在下载着数据的，就设置为true。在后端在往session里边添加对象时先判断这个错误值时true还是null，如果时空正常添加，如果是true那么就开始处理数据，并且将进程报错。不往下进行。处理代码如下：

 if(request.getSession().getAttribute("error")!=null && (boolean)request.getSession().getAttribute("error")){
                    request.getSession().removeAttribute("error");
                    request.getSession().removeAttribute("PtnUploadDownload");
                    return null;
                }else{
                    if(list.size()<60 || i==0){
                        sumCount = i+1;
                        request.getSession().setAttribute("PtnUploadDownload", new UploadAndDownloadUtil().getPtnUploadAndDownload(request,2,"保单列表导出","正在查询数据...,"+sumCount,0));
                    }else if(i%(list.size()/60)==0){
                        sumC++;
                        request.getSession().setAttribute("PtnUploadDownload", new UploadAndDownloadUtil().getPtnUploadAndDownload(request,2,"保单列表导出","正在查询数据...,"+sumC,0));
                    }
                }