在DataTable的每个单元格中,显示百分比进度条,根据具体的百分比,进步条显示不同的颜色(绿色:正常;黄色:警告;红色:危险),用于分析效率之类的问题,废话不多说,看效果。
如果你有这种需求,就继续往下看。。。。。没有的话。。。。。。也可以看,哈哈。。。。
首先有这是在laveral框架下实现的,其他框架也大同小异,其实这个功能和用哪个框架没什么鸟关系。。
1.View层:
<div class="table-responsive">
<table class="table table-striped table-hover " id="main_table" cellspacing="0" width="100%">
<thead>
<tr>
<th id="status">状态</th>
<th id="workstation_name">设备</th>
<th id="availability">可用率</th>
<th id="performance">表现性</th>
<th id="quality">质量指数</th>
<th id="oee">OEE</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
/tbody>
</table>
</div>
2.js层
function InitMainTable(){
table = $('#main_table').DataTable({
language: {
url: '/js/plugins/dataTables/Chinese.json'
},
autoWidth: true,
searching: false,
ordering: false,
scrollX: true,
bDestroy:true,
processing: true,
serverSide: true,
dataType: 'json',
ajax: {
"url": "/OEE/Get_device_info",
"type": "get"
},
columns: [
{data:'status',"searchable":false,"orderable":false,
render: function(data, type, row, meta) {
var status="<div class='fa fa-circle text-info'></div>";
return "<div class='fa fa-circle text-info'></div>";
}
},
{ "data": "workstation_name","searchable":false,"orderable":false },
{ "data": "availability","searchable":false,"orderable":false,
render:function(data){
var tmp = ((100*data).toFixed(2)).toString();
var num =tmp+"%";
var result="style='width: "+tmp+"%'";
var color="class='progress-bar'";
if(data>=0.9){
color="class='progress-bar'";
}
else if(data>=0.7){
color="class='progress-bar progress-bar-warning'";
}
else {
color="class='progress-bar progress-bar-danger'";
}
return "<div class='col-lg-12'>"+
"<div> <small class='pull-right'>"+num+"</small> </div>"+
"<div class='progress progress-small'>"+
"<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
// "<input value='29%' readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
"</div>"+
"</div>";
}
},
{ "data": "performance","searchable":false,"orderable":false,
render:function(data){
var tmp = ((100*data).toFixed(2)).toString();
var num =tmp+"%";
var result="style='width: "+tmp+"%'";
var color="class='progress-bar'";
if(data>=0.9){
color="class='progress-bar'";
}
else if(data>=0.7){
color="class='progress-bar progress-bar-warning'";
}
else {
color="class='progress-bar progress-bar-danger'";
}
return "<div class='col-lg-12'>"+
"<div> <small class='pull-right'>"+num+"</small> </div>"+
"<div class='progress progress-small'>"+
"<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
// "<input value='29%' readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
"</div>"+
"</div>";
}
// render:function(data, type, row,meta){
// if (data=='info'){
// return "<div class='fa fa-circle text-info'></div>";
// }else if(data=='primary'){
// return "<div class='fa fa-circle text-primary'></div>";
// }
// else if(data=='warning'){
// return "<div class='fa fa-circle text-warning'></div>";
// }
// else{
// return "<div class='fa fa-circle text-danger'></div>";
// }
// }
},
{ "data": "quality","searchable":false,"orderable":false,
render:function(data){
var tmp = ((100*data).toFixed(2)).toString();
var num =tmp+"%";
var result="style='width: "+tmp+"%'";
var color="class='progress-bar'";
if(data>=0.9){
color="class='progress-bar'";
}
else if(data>=0.7){
color="class='progress-bar progress-bar-warning'";
}
else {
color="class='progress-bar progress-bar-danger'";
}
return "<div class='col-lg-12'>"+
"<div> <small class='pull-right'>"+num+"</small> </div>"+
"<div class='progress progress-small'>"+
"<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
// "<input value='29%' readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
"</div>"+
"</div>";
}
// render:function(data){
// console.log(data);
// var div = document.createElement('div');
// $( "#div" ).progressbar({
// value: data*100
// });
// return "<div id='div'></div>";
// }
},
{ "data": "oee","searchable":false,"orderable":false,
render:function(data){
var tmp = ((100*data).toFixed(2)).toString();
var num =tmp+"%";
var result="style='width: "+tmp+"%'";
var color="class='progress-bar'";
if(data>=0.9){
color="class='progress-bar'";
}
else if(data>=0.7){
color="class='progress-bar progress-bar-warning'";
}
else {
color="class='progress-bar progress-bar-danger'";
}
return "<div class='col-lg-12'>"+
"<div> <small class='pull-right'>"+num+"</small> </div>"+
"<div class='progress progress-small'>"+
"<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
// "<input value='29%' readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
"</div>"+
"</div>";
}
},
],
})
}
3.Controller层
function Get_device_info(Request $request){
$draw=$request->input('title');
$start=$request->input('start');
$length=$request->input('length');
$order=$request->input('order');
$RecordsFiltered=$RecordsTotal=DB::connection('mysql')
->table('device_oee_record')
->where('deleted',0)
->count();
//判断start与length有没有效
if(!(isset($start) && $length != -1))
{
$start = 0;
$length = 10;
}
$basic_techparam= DB::connection('mysql')
->table('device_oee_record')
->where('deleted',0)
//->orderBy('id','desc')//逆序查找
->skip($start)
->take($length)
->get();
//dataTable 返回 Json 数组
$resultTable = array();
foreach ($basic_techparam as $key=>$value)
{
$singleResultTable = array();
//读取确定数据
//$singleResultTable['id'] = $basic_techparam[$key]->id;
$singleResultTable['workstation_name'] = $basic_techparam[$key]->workstation_name;
$singleResultTable['availability'] = $basic_techparam[$key]->availability;
$singleResultTable['performance'] = $basic_techparam[$key]->performance;
$singleResultTable['quality'] = $basic_techparam[$key]->quality;
$singleResultTable['oee'] = $basic_techparam[$key]->oee;
array_push($resultTable,$singleResultTable);
}
return $this->encodeTableData($draw,$RecordsTotal,$RecordsFiltered,$resultTable);//针对data_table必须使用这种返回方式
}
4.路由层
Route::get('/OEE/Get_device_info','OEE\OEEoutlineController@Get_device_info');