我自己使用的方法是:将进度信息存在对象中每个订单一个对象然后写入
ResponseBody中在前端循环取出放入写好的数组内
前端在使用classname方法获取每个工序一共有多少个进度条
首先看我的实体类
package com.example.prod.pojo;
import java.util.List;
/**
* 此类不是数据库中表的映射类
* 是封装进度信息的类
*/
public class SpeedOfProgress {
//订单编号
int order_id;
//不合格数量
int abnormalcount;
//工序进度信息list只装数据
List<String> processprogress1;
//对象进度信息
Processprogress processprogress;
public int getOrder_id() {
return order_id;
}
public void setOrder_id(int order_id) {
this.order_id = order_id;
}
public int getAbnormalcount() {
return abnormalcount;
}
public void setAbnormalcount(int abnormalcount) {
this.abnormalcount = abnormalcount;
}
public Processprogress getProcessprogress() {
return processprogress;
}
public void setProcessprogress(Processprogress processprogress) {
this.processprogress = processprogress;
}
public List<String> getProcessprogress1() {
return processprogress1;
}
public void setProcessprogress1(List<String> processprogress1) {
this.processprogress1 = processprogress1;
}
public SpeedOfProgress() {
}
public SpeedOfProgress(int order_id, int abnormalcount, List<String> processprogress1, Processprogress processprogress) {
this.order_id = order_id;
this.abnormalcount = abnormalcount;
this.processprogress1 = processprogress1;
this.processprogress = processprogress;
}
@Override
public String toString() {
return "SpeedOfProgress{" +
"order_id=" + order_id +
", abnormalcount=" + abnormalcount +
", processprogress1=" + processprogress1 +
", processprogress=" + processprogress +
'}';
}
}
然后你们通过service层将进度信息计算号,并丰入这个对象中
前端的处理方法
//订单进度
window.onload = function getres(){
$.ajax({
url:"order/getSpeedOfProgress.do",
dataType:"json",
type:"POST",
success:function (requsetRes){
var div
var ass=[]
var ct=[]
var tt=[]
var pk=[]
for (var i=0;i<requsetRes.length;i++){
ass.push(requsetRes[i].processprogress.ass_progress)
ct.push(requsetRes[i].processprogress.ct_progress)
tt.push(requsetRes[i].processprogress.tt_progress)
pk.push(requsetRes[i].processprogress.pk_progress)
div+='<div class="col-lg-12">'+
'<div>'+'<span>'+requsetRes[i].order_id+'<span class="badge" id="getAbnormal" onclick="getabnormalOrderId(this)">'+requsetRes[i].abnormalcount+'</span>'+'</span>'+'</div>'+
'<div class="col-lg-3">'+
'<span class="label label-primary">'+"组装"+'</span>'+
'<div class="progress">'+
'<div class="progress-bar progress-bar-warning" id="zuzhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ass_progress+'</div>'+
'</div>'+
'</div>'+
'<div class="col-lg-3">'+
'<span class="label label-primary">'+"标定"+'</span>'+
'<div class="progress">'+
'<div class="progress-bar progress-bar-info" id="biaoding" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ct_progress+'</div>'+
'</div>'+
'</div>'+
'<div class="col-lg-3">'+
'<span class="label label-primary">'+"检测"+'</span>'+
'<div class="progress">'+
'<div class="progress-bar progress-bar-danger" id="jiance" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.tt_progress+'</div>'+
'</div>'+
'</div>'+
'<div class="col-lg-3">'+
'<span class="label label-primary">'+"包装"+'</span>'+
'<div class="progress">'+
'<div class="progress-bar progress-bar-success" id="baozhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.pk_progress+'</div>'+
'</div>'+
'</div>'+
'</div>'
}
$("#getProcess").html(div)
//修改所有组装的进度样式
var listDiv = document.getElementsByClassName("progress-bar progress-bar-warning")
for (var j =0;j<listDiv.length;j++){
listDiv[j].style.width=ass[j]
}
//修改所有标定的进度样式
var listCT = document.getElementsByClassName("progress-bar progress-bar-info")
for (var q=0;q<listCT.length;q++){
listCT[q].style.width=ct[q]
}
//修改所有的检测
var listTT = document.getElementsByClassName("progress-bar progress-bar-danger")
console.log(tt)
for (var w=0;w<listTT.length;w++){
listTT[w].style.width=tt[w]
}
//修改所有包装进度
var listPK = document.getElementsByClassName("progress-bar progress-bar-success")
console.log(pk)
for (var e=0;e<listPK.length;e++){
listPK[e].style.width=pk[e]
}
}
})
}
其中ass,等数组是表示每个工序的总进度数组,里面包含了所有订单的进度
然后在通过,这里我是通过class来区别每个工序的
document.getElementsByClassName()获取每个进度一共有多少个进度条
因为有多少个class的元素ass中就有多少个元素,所以使用一个循环就可以搞定,然后通过
listTT[w].style.width=tt[w]来修改对应元素的width的值,然后最后展示结果就是