定义div的相关代码:
<div class="col-xs-4 charts score_table_box">
<div class="m-chart-box" style="height:505px;padding-top: 20px;">
<div class="filter-box">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#homeA" data-toggle="tab" style="min-width: 200px; font-weight:bold;font-size:16px;" οnclick="sortOfficeMark('A')">各系统综合能力得分</a>
</li>
<li>
<a href="#homeB" data-toggle="tab" style="min-width: 180px; font-weight:bold;font-size:16px;" οnclick="sortOfficeMark('B')">重点站段TOP10</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="homeA">
<table class="table table-bordered table-hover" id="Atable">
<thead>
<tr>
<th>单位名称</th>
<th>得分</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane fade" id="homeB">
<table class="table table-bordered table-hover" id="Btable">
<thead>
<tr>
<th>排名</th>
<th>站段名称</th>
<th>综合值</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
运用AJAX方法对后台实施请求:
function sortOfficeMark(type) {
var Xtable ;
if(type == "undefined" || null == type){
Xtable = $("#Atable");
type = "A";
}
if(type== "A")
{
Xtable = $("#Atable");
}
else if(type== "B")
{
Xtable = $("#Btable");
}
$(".rt", Xtable).remove();
$.ajax({
url: "../../security/base/peoplesafeimg!sortOfficeMarkByAjax.action",
type: "post",
data:{
peopletype:type ,
},
dataType: "json",
success: function (data) {
//alert(JSON.stringify(data));
$(data).each(function(i,val) {
if(type== "A" && (data != null || data != ""))
{
// if(i>10)
// {
// return;
// }
var tablerow = $("<tr class='rt'></tr>");
Xtable.append(tablerow);
// tablerow.append("<td>"+(i+1)+"</td>");
tablerow.append("<td>"+ (val.OFFICE_NAME).replace("处", "系统综合得分") +"</td>");
tablerow.append("<td>"+val.AVG_SCORE+"</td>");
} else if(type== "B" && (data != null || data != ""))
{
if(i < 10)
{
var tablerow = $("<tr class='rt'></tr>");
Xtable.append(tablerow);
tablerow.append("<td>TOP"+(i+1)+"</td>");
tablerow.append("<td>"+ val.DEPOT +"</td>");
/* tablerow.append("<td>"+ val.PERCENTUM +"</td>"); */// 一星级人数占比
tablerow.append("<td>"+ val.AVG_SCORE +"</td>"); // 综合能力值
}
}
});
//判断:当列表中没有数据时,提示数据为空
/* if(type== "A" && (data == null || data == "")){
var tablerow = $("<tr class='rt'></tr>");
Xtable.append(tablerow);
tablerow.append("<td colspan=5 align='center'>最近这段时间无培训信息!</td>");
} else if(type== "B" && (data == null || data == "")) {
var tablerow = $("<tr class='rt'></tr>");
Xtable.append(tablerow);
tablerow.append("<td colspan=5 align='center'>最近这段时间无荣誉记录!</td>");
} */
},
error:function(){
// alert("查询数据失败")
}
});
}
后台代码实现对数据的获取:
/**
* @author lenian
* @test 全局人员画像综合能力值排行、重点站段TOP10
* @date lenian 2018 07 03
* @return
*/
public String sortOfficeMarkByAjax()
{
List<Object> result = new ArrayList<>();
result=peopleSafeImgManager.getSortOfficeMark(peopletype);
try {
String jsonArray = JSON.toJSONString(result);
renderTextJSONGBK(jsonArray.toString());
return null;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@SuppressWarnings("unchecked")
public List<Object> getSortOfficeMark(String peopletype) {
List<Object> result = new ArrayList<>();
if ("A".equals(peopletype)) { // 全局人员画像综合能力值排行(按指定顺序排序)
String sql = "select sei.office_name, nvl(ROUND(AVG(sei.COMP_CHECK), 2), 0) avg_score\n" +
" from SECURITY_EMPLOYEE_INFO sei\n" +
" WHERE sei.office_name in ('运输处', '货运处', '客运处', '机务处', '工务处', '电务处', '车辆处', '供电处')\n" +
" and (SEI.ON_GUARD IS NULL OR SEI.ON_GUARD = 0)\n" +
" group by sei.office_name\n" +
" order by instr('运输处, 货运处, 客运处, 机务处, 工务处, 电务处, 车辆处, 供电处', sei.office_name)";
SQLQuery sq = dao.getSession().createSQLQuery(sql);
sq.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
result= sq.list();
}
else if ("B".equals(peopletype)) { // 重点站段TOP10
String sql = "with t as\n" +
"(select tab.depot, ROUND(count_1/sum,4)*100 percentum, count_2 avg_score\n" +
" from (SELECT distinct sei.depot,\n" +
" count(*) sum,\n" +
" COUNT((CASE WHEN SEI.STAR_RATED = '1' THEN 1\n" +
" ELSE NULL END)) count_1,\n" +
" nvl(ROUND(AVG(sei.COMP_CHECK), 2), 0) count_2\n" +
" FROM SECURITY_EMPLOYEE_INFO sei WHERE\n" +
" REGEXP_LIKE(sei.depot, '(段|站)$')\n" +
" AND (sei.on_guard is null or sei.on_guard = 0)\n" +
" GROUP BY sei.depot\n" +
" ) tab order by percentum desc)\n" +
" select * from t where rownum <= 10 order by t.avg_score desc";
SQLQuery sq = dao.getSession().createSQLQuery(sql);
sq.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
result= sq.list();
}
return result;
}
效果图如下: