<!doctype html>
<html lang = "en">
<head>
<title> testbx </title>
<meta charset = "utf-8">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<style type="text/css">
body {
color: #0f0;
background: #fff;
margin: 10;
padding: 10;
font-family: Georgia;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
//width:30%;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
text-align:left;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
text-align:left;
border-style: solid;
border-color: #666666;
//background-color: #ffffff;
}
#tbrankIcon
{
float:right;
}
</style>
<script type="text/javascript" src="./JSON-js-master/json2.js"></script>
<script>
var boxDate='2017-08-15 14:40:00';
var xmlHttp;
var iconColumn = 6;
var boxIdColumn = 0;
var parentIdColumn=1;
var locationColumn=2;
var statusCollumn=3;
var dateCollumn=4;
var inventoryTypeColumn=5;
var BOXOPEN=1;
var BOXCLOSE=0;
var filterlocation;
var filterstatus;
function makeSortable() {
//collapseInit();
var table = document.getElementById("boxlog");
var headers=table.getElementsByTagName("th");
var rankicon = table.getElementsByTagName("i");
//alert(rankicon.length);
for(var i=0;i<headers.length-1;i++)
{
(function(n)
{
var flag=false;
headers[n].οnclick=function()
{
var thval = headers[n].getElementsByTagName("i");
if(rankicon[n].className == "fa fa-chevron-up")
{
rankicon[n].setAttribute("class","fa fa-chevron-down");
}
else
{
rankicon[n].setAttribute("class","fa fa-chevron-up");
}
var tbody=table.tBodies[0];//第一个<tbody>
//alert(tbody);
var rows=tbody.getElementsByTagName("tr");//tbody中的所有行
rows=Array.prototype.slice.call(rows,0);//真实数组中的快照
//基于第n个<td>元素的值对行排序
rows.sort(function(row1,row2){
var cell1=row1.getElementsByTagName("td")[n];//获得第n个单元格
var cell2=row2.getElementsByTagName("td")[n];
var val1=cell1.textContent||cell1.innerText;//获得文本内容
var val2=cell2.textContent||cell2.innerText;
if(val1<val2){
return -1;
}else if(val1>val2){
return 1;
}else{
return 0;
}
});
if(flag){
rows.reverse();
}
//在tbody中按它们的顺序把行添加到最后
//这将自动把它们从当前位置移走,故没必要预先删除它们
//如果<tbody>还包含了除了<tr>的任何其他元素,这些节点将会悬浮到顶部位置
for(var i=0;i<rows.length;i++){
tbody.appendChild(rows[i]);
}
flag=!flag;
}
}(i));
}
}
function GetRequest()
{
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1)
{
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++)
{
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
function collapseAll(obj)
{
var boxTable = document.getElementById("boxlog");
var trs=boxTable.getElementsByTagName("tr");
var clickicon=obj.lastChild;
for(var i=0; i<trs.length; i++)
{
if(trs[i].className == "master-row")
{
var cell = trs[i].cells[iconColumn];
if(clickicon.className == cell.lastChild.className)
cell.onclick();
}
}
/*if(clickicon.className == "fa fa-minus-square-o" )
{
clickicon.setAttribute("class","fa fa-plus-square-o");
}
else
{
clickicon.setAttribute("class","fa fa-minus-square-o")
}*/
}
function collapseInit()
{
var boxTable = document.getElementById("boxlog");
var trs=boxTable.getElementsByTagName("tr");
var headers=boxTable.getElementsByTagName("th");
var clickicon=headers[iconColumn].lastChild;
for(var i=0; i<trs.length; i++)
{
if(trs[i].className == "master-row")
{
var cell = trs[i].cells[iconColumn];
if("fa fa-minus-square-o" == cell.lastChild.className)
cell.onclick();
}
}
/*if(clickicon.className == "fa fa-minus-square-o" )
{
clickicon.setAttribute("class","fa fa-plus-square-o");
}*/
}
function SlaveClick(TagName, obj)
{
//alert(TagName);
var boxTable = document.getElementById("boxlog");
var trs=boxTable.getElementsByTagName("tr");
var headers=boxTable.getElementsByTagName("th");
var thclickicon=headers[iconColumn].lastChild;
var clickicon=obj.lastChild;
if(clickicon.className == "fa fa-minus-square-o" )
{
clickicon.setAttribute("class","fa fa-plus-square-o");
}
else
{
clickicon.setAttribute("class","fa fa-minus-square-o")
}
var _nextrow = obj.parentNode.nextSibling;
var _orgparentrowindex = obj.parentNode.rowIndex; //最初的obj rowIndex
var _tbody=obj.parentNode.parentNode;
//rank it....
for(var i=0,j=0; i<trs.length; i++)
{
_parentrowindex = obj.parentNode.rowIndex; //由于从新排序,本obj的rowindex也在改动,当把obj上面的row下移的时候,obj的rowindex减小
if(trs[i].id == TagName&&trs[i].className == "slave-row")
{
j++;
var _movecount = _orgparentrowindex - _parentrowindex; //记录了一共移动了几条obj上面的记录
if(i==_parentrowindex-_movecount+j)
{
continue; //如果是紧接着下一行的,直接跳过
}
if(_nextrow) _tbody.insertBefore(trs[i], _nextrow);
else
{
_tbody.appendChild(trs[i]);
//alert(i);
}
i--;
//alert(i);
}
}
var _minusflag=0;
var _plusflag =0;
for(var i=0; i<trs.length; i++)
{
if(trs[i].id == TagName&&trs[i].className == "slave-row")
{
if(trs[i].style.display=="")
{
trs[i].style.display = "none";
}else
{
trs[i].style.display = "";
}
}
if(trs[i].className == "master-row")
{
var cell = trs[i].cells[iconColumn];
if("fa fa-minus-square-o" == cell.lastChild.className)
{
_minusflag++;
}
else
{
_plusflag++;
}
}
}
if(_minusflag == 0) thclickicon.setAttribute("class","fa fa-plus-square-o");
else if (_plusflag == 0) thclickicon.setAttribute("class","fa fa-minus-square-o");
//alert(_minusflag);
//alert(_plusflag);
}
function addMasterRows(boxId,parentId,location,status,onlinedate,inventorytype)
{
var boxTable = document.getElementById("tbMain");
var newTr = boxTable.insertRow();
//newTr.style.fontWeight="bold";
/*if(status == 1) //close...
{
newTr.style.color="#f00";
newTr.style.background="##EA0000";
//newTr.style.background="#f00";
}*/
newTr.setAttribute("id", boxId);
newTr.setAttribute("class", "master-row");
//添加列
var newTd0 = newTr.insertCell(); //boxId
var newTd1 = newTr.insertCell(); //parentId
var newTd2 = newTr.insertCell(); //location
var newTd3 = newTr.insertCell(); //status
var newTd4 = newTr.insertCell(); //deliver status
var newTd5 = newTr.insertCell(); //date
var newTd6 = newTr.insertCell(); //detail
//设置列内容和属性
newTd0.innerHTML = boxId;
newTd1.innerHTML = parentId;
newTd2.innerHTML = location;
var nodestatus=document.createElement("i");
if(status == BOXCLOSE) //close
{
nodestatus.setAttribute("class", "fa fa-envelope-o");
}
else if(status==BOXOPEN) //open
{
nodestatus.setAttribute("class", "fa fa-envelope-open-o");
}
newTd3.appendChild(nodestatus);
//newTd3.innerHTML = status;
var delivertatus=document.createElement("i");
switch(inventorytype)
{
//alert(inventoryType);
case "1": //总仓
if(status==BOXOPEN) delivertatus.setAttribute("class", "fa fa-refresh");
else delivertatus.setAttribute("class", "fa fa-share");
break;
case "2": //配送站
if(status==BOXOPEN) delivertatus.setAttribute("class", "fa fa-reply-all");
else delivertatus.setAttribute("class", "fa fa-share");
break;
case "3": //卡车
if(status==BOXCLOSE) delivertatus.setAttribute("class", "fa fa-truck");
else {
delivertatus.setAttribute("class", "fa fa-bell-slash-o");
newTr.style.color="#EA0000";
// newTr.style.background="#EA0000";
}
break;
case "4": //
if(status==BOXCLOSE) delivertatus.setAttribute("class", "fa fa-share");
else delivertatus.setAttribute("class", "fa fa-reply-all");
break;
default:
//delivertatus.setAttribute("class", "fa fa-truck");
}
//delivertatus.setAttribute("class", "fa fa-truck");
newTd4.appendChild(delivertatus);
//fa fa-truck
newTd5.innerHTML = onlinedate;
var node=document.createElement("i");
node.setAttribute("class", "fa fa-minus-square-o");
//alert(node.className);
newTd6.appendChild(node);
//alert(newTd4.lastChild.className);
newTd6.setAttribute("onClick", "SlaveClick('"+boxId+"',this);");
// saveTableValue();//保存值
return false;
}
function addSlaveRows(boxId,parentId,location,status,onlinedate)
{
var boxTable = document.getElementById("tbMain");
var newTr = boxTable.insertRow();
newTr.style.background="#F0F0F0";
newTr.style.fontSize="11px";
/*if(status == 1) //close...
{
newTr.style.color="#f00";
newTr.style.background="#0ff";
//newTr.style.background="#f00";
}*/
newTr.setAttribute("id", boxId);
newTr.setAttribute("class", "slave-row");
//添加列
var newTd0 = newTr.insertCell(); //boxId
var newTd1 = newTr.insertCell(); //parentId
var newTd2 = newTr.insertCell(); //location
var newTd3 = newTr.insertCell(); //status
var newTd4 = newTr.insertCell(); //deliver status
var newTd5 = newTr.insertCell(); //date
var newTd6 = newTr.insertCell(); //detail
//设置列内容和属性
newTd0.innerHTML = boxId;
newTd1.innerHTML = parentId;
newTd2.innerHTML = location;
var nodestatus=document.createElement("i");
if(status == BOXCLOSE)
{
nodestatus.setAttribute("class", "fa fa-envelope-o");
}
else if(status==BOXOPEN)
{
nodestatus.setAttribute("class", "fa fa-envelope-open-o");
}
newTd3.appendChild(nodestatus);
// newTd3.innerHTML = status;
newTd5.innerHTML = onlinedate;
// var node=document.createElement("i");
//node.setAttribute("class", "fa fa-file-o");
//alert(node.className);
//newTd5.appendChild(node);
// saveTableValue();//保存值
return false;
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function showBoxStatus()
{
//alert("showBoxStatus...");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://localhost/retrievestatus.php";
url=url+"?onlinedate="+boxDate;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// alert("getrespone...");
//var dataObj = JSON.parse(xmlHttp.responseText);
//alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")")
var rows = dataObj['data'];
//var x = 0;
for(var x=0; x<rows.length; x++)
{
var record = String(rows[x]);
var boxstatus = record.split(",");
// alert(boxstatus[dateCollumn]);
if(boxstatus[inventoryTypeColumn] == filterlocation)
{
addMasterRows(boxstatus[boxIdColumn],boxstatus[parentIdColumn],boxstatus[locationColumn],boxstatus[statusCollumn],boxstatus[dateCollumn],boxstatus[inventoryTypeColumn]);
}
boxDate = boxstatus[dateCollumn];
}
// var boxTable = document.getElementById("boxlog");
// makeSortable(boxTable);
//document.getElementById("txtHint").innerHTML="Last update date: " + boxDate;
showBoxStatusSlave();
}
}
function showBoxStatusSlave()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://localhost/retrievelog.php";
url=url+"?onlinedate="+boxDate;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChangedSlave;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChangedSlave()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// alert("getrespone slave...");
//var rec = JSON.parse(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")")
var rows = dataObj['data'];
//alert(rows.length);
//var x = 0;
for(var x=0; x<rows.length; x++)
{
var record = String(rows[x]);
var boxstatus = record.split(",");
var checkmaster = document.getElementById(boxstatus[boxIdColumn]); //check master-row 是否存在。。。
if(checkmaster)
{
addSlaveRows(boxstatus[boxIdColumn],boxstatus[parentIdColumn],boxstatus[locationColumn],boxstatus[statusCollumn],boxstatus[dateCollumn]);
}
boxDate = boxstatus[dateCollumn];
}
var boxTable = document.getElementById("boxlog");
makeSortable(boxTable);
collapseInit();
//document.getElementById("txtHint").innerHTML="Last update date: " + boxDate;
}
}
window.onload = function()
{
//initTable();
// addRows('B170000004','G1788889','0','2017-08-15 14:40:00');
filterlocation = GetRequest()['location'];
//filterstatus = GetRequest()['status'];
showBoxStatus();
//addMasterRows("B170000001","G1788889","1","2017-08-15 14:40:01");
//addSlaveRows("B170000001","G1788789","0","2017-08-15 14:40:02");
//addSlaveRows("B170000001","G1788789","1","2017-08-15 14:40:13");
//addSlaveRows("B170000001","G1788799","0","2017-08-15 14:40:24");
/*addMasterRows("B170000002","G1788889","1","2017-08-15 14:40:05");
addSlaveRows("B170000002","G1788789","0","2017-08-15 14:40:07");
addSlaveRows("B170000002","G1788789","1","2017-08-15 14:40:08");
addSlaveRows("B170000002","G1788799","0","2017-08-15 14:40:09");
addMasterRows("B170000003","G1788889","1","2017-08-15 14:40:30");
addSlaveRows("B170000003","G1788789","0","2017-08-15 14:40:42");
addSlaveRows("B170000003","G1788789","1","2017-08-15 14:40:20");
addSlaveRows("B170000003","G1788799","0","2017-08-15 14:40:22");
*/
// setInterval(showBoxStatus, 3000);
}
</script>
</head>
<body>
<br><br>
<table id="boxlog" class="gridtable">
<thead>
<tr id="hmaster">
<th οnclick="makeSortable();">盒子编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>
<th οnclick="makeSortable();">网关编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>
<th οnclick="makeSortable();">地 点<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>
<th οnclick="makeSortable();">盒子状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>
<th οnclick="makeSortable();">物流状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>
<th οnclick="makeSortable();">刷新时间<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> <th οnclick="collapseAll(this);">详细信息 <i class="fa fa-minus-square-o" ></i></th>
</tr>
</thead>
<tbody id="tbMain">
</tbody>
</table>
</body>
</html>