导出提示下载进度条优化更新 样式优化
上篇文章说了怎么做一个提示框 这篇文章是对进度条的优化样式和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));
}
}