标签：function getSession 进度条 data 导出 elmnt document 优化 left
导出提示下载进度条优化更新 样式优化
上篇文章说了怎么做一个提示框 这篇文章是对进度条的优化样式和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));
}
}
标签：function,getSession,进度条,data,导出,elmnt,document,优化,left 来源： https://blog.csdn.net/nanZhaiXiaoLang/article/details/115522137
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。