446 lines
18 KiB
Plaintext
446 lines
18 KiB
Plaintext
<style>
|
||
.paraarea-hide {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
<link href="~/Content/Adaptive.css" rel="stylesheet" />
|
||
<main>
|
||
@*<section class="row" aria-labelledby="aspnetTitle">
|
||
<h1 id="aspnetTitle">MQTT服务器的Web端API</h1>
|
||
<p class="lead">本服务器可以接受MQTT服务器转发的设备上报消息，也可以通过MQTT服务器转发消息到设备。</p>
|
||
</section>*@
|
||
<div class="row">
|
||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
|
||
<div class="container">
|
||
@Html.ActionLink("查看设备", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
|
||
@Html.ActionLink("查看所有设备离在线记录", "Viewofflinerecordsofalldevices", "Home", new { area = "" }, new { @class = "navbar-brand" })
|
||
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="切换导航" aria-controls="navbarSupportedContent"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
@*<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
|
||
<ul class="navbar-nav flex-grow-1">
|
||
<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
|
||
</ul>
|
||
</div>*@
|
||
</div>
|
||
</nav>
|
||
<section class="col-md-9" aria-labelledby="gettingStartedTitle">
|
||
@*<h2 id="gettingStartedTitle">设备上报消息</h2>
|
||
<p>所有按规则转发的设备上报消息</p>*@
|
||
<div>
|
||
<form class="row g-3">
|
||
<div class="col-auto">
|
||
<label for="inputPassword2" class="visually-hidden">设备名称</label>
|
||
<input type="text" class="form-control" id="inputPassword2" placeholder="请输入设备名称" onblur="SelectBYNmae()">
|
||
</div>
|
||
<div class="col-auto">
|
||
<button type="button" class="btn btn-light mb-3" onclick="getshebebyname()">查询</button>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<select id="inputState" class="form-select" onchange="SelectStatus()">
|
||
<option value="1">在线</option>
|
||
<option value="0">不在线</option>
|
||
<option value="3">未使用</option>
|
||
<option selected value="-1">全部</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
|
||
</form>
|
||
@*<button onclick="toggleAutoGet()" class="col-md-6">打开/关闭自动获取上报消息</button>*@
|
||
@*<button onclick="RefreshDevice()" class="col-md-12">刷新设备</button>*@
|
||
</div>
|
||
<div class="box">
|
||
<div class="box-body">
|
||
<div id="gridwrapper" class="dataTables_wrapper form-inline dt-bootstrap">
|
||
<div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div id="gridtable">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
@*<div class="row" style="width: 100%;"><button onclick="getAllHistoryData()" class="btn btn-light">加载更多</button></div>*@
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
<script>
|
||
var gCurrentProduct = "";
|
||
var gCurrentDevice = "";
|
||
var gProductIDKey = "HICL5RNXAU";
|
||
var gTableDataMap = new Map();
|
||
var gDeviceArr = new Array();
|
||
|
||
|
||
function SelectBYNmae() {
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
var zhuant = myselect.options[index].value;
|
||
var text = myselect.options[index].text;
|
||
getAllHistoryData(lockm, zhuant)
|
||
}
|
||
|
||
|
||
|
||
function getshebebyname() {
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
|
||
var zhuant = myselect.options[index].value;
|
||
var text = myselect.options[index].text;
|
||
getAllHistoryData(lockm, zhuant)
|
||
}
|
||
|
||
|
||
$(function () {
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
var zhuant = myselect.options[index].value;
|
||
var text = myselect.options[index].text;
|
||
|
||
//selectinfo()
|
||
|
||
getAllHistoryData(lockm, zhuant)
|
||
setInterval(() => {
|
||
/* selectinfo()*/
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
var zhuant = myselect.options[index].value;
|
||
/* var text = myselect.options[index].text;*/
|
||
getAllHistoryData(lockm, zhuant)
|
||
}, 60000)
|
||
});
|
||
function SelectStatus() {
|
||
/* selectinfo()*/
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
var zhuant = myselect.options[index].value;
|
||
var text = myselect.options[index].text;
|
||
getAllHistoryData(lockm, zhuant)
|
||
}
|
||
function selectinfo() {
|
||
fetch("/api/Logs")
|
||
|
||
.then(function (jsondata) {
|
||
});
|
||
}
|
||
|
||
function toggleAutoGet() {
|
||
if (gRunning == 1) {
|
||
clearTimeout(gRetTimerId);
|
||
gRunning = 0;
|
||
}
|
||
else {
|
||
gRetTimerId = setTimeout(getLogContent, gDelayTime);
|
||
gRunning = 1;
|
||
}
|
||
};
|
||
|
||
function getAllHistoryData(lockm, zhuant) {
|
||
var lockm = document.querySelector("#inputPassword2").value;
|
||
var myselect = document.getElementById("inputState");
|
||
var index = myselect.selectedIndex;
|
||
var zhuant = myselect.options[index].value;
|
||
var text = myselect.options[index].text;
|
||
fetch("/api/Logs/?Name=" + lockm + "&zhant=" + zhuant)
|
||
.then(resp => resp.json())
|
||
.then(function (jsondata) {
|
||
var arrRef = jsondata;
|
||
|
||
getLatestData(arrRef);
|
||
|
||
fillTable(sortByDevice());
|
||
});
|
||
};
|
||
|
||
function getLatestData(arrRef) {
|
||
gTableDataMap = new Map();
|
||
/* debugger*/
|
||
for (var i = 0; i < arrRef.length; i++) {
|
||
let tmp2Part = arrRef[i].split(",");
|
||
let devicename = tmp2Part[0].split("：")[1];
|
||
let Online = tmp2Part[1].split("：")[1];
|
||
let districtinfo = tmp2Part[2].split("：")[1];
|
||
let LastUpdateTime = tmp2Part[3].split("：")[1];
|
||
let powerintakestatus = tmp2Part[4].split("：")[1];
|
||
let Power = tmp2Part[5].split("：")[1];
|
||
let pir1status = tmp2Part[6].split("：")[1];
|
||
let pir2status = tmp2Part[7].split("：")[1];
|
||
let pir3status = tmp2Part[8].split("：")[1];
|
||
let pir4status = tmp2Part[9].split("：")[1];
|
||
let gatemagnetstatus = tmp2Part[10].split("：")[1];
|
||
let pir5status = tmp2Part[11].split("：")[1];
|
||
let pir6status = tmp2Part[12].split("：")[1];
|
||
let pir7status = tmp2Part[13].split("：")[1];
|
||
let pir8status = tmp2Part[14].split("：")[1];
|
||
|
||
|
||
let powerOnEquipment = tmp2Part[15].split("：")[1];
|
||
let equipmenttime = tmp2Part[16].split("：")[1];
|
||
let powerOnEquipmentinfo = tmp2Part[17].split("：")[1];
|
||
let yingjianbanbinfo = tmp2Part[18].split("：")[1];
|
||
let ruanjianbanbinfo = tmp2Part[19].split("：")[1];
|
||
|
||
|
||
|
||
let tmpKey = devicename;
|
||
|
||
gTableDataMap.set(tmpKey, [Online, devicename, districtinfo, LastUpdateTime, powerintakestatus, Power, pir1status, pir2status, pir3status, pir4status, gatemagnetstatus, pir5status, pir6status, pir7status, pir8status, powerOnEquipment, equipmenttime, powerOnEquipmentinfo, yingjianbanbinfo, ruanjianbanbinfo]);
|
||
}
|
||
};
|
||
|
||
//init from device list;
|
||
function initLatestData() {
|
||
for (var i = 0; i < gDeviceArr.length; i++) {
|
||
//use product+device as key
|
||
let productid = gProductIDKey;
|
||
let devicename = gDeviceArr[i].DeviceName;
|
||
let tmpKey = productid + "_" + devicename;
|
||
let topic = "";
|
||
let payload = "";
|
||
let seq = "";
|
||
let timestamp = "";
|
||
let timemills = "";
|
||
gTableDataMap.set(tmpKey, [productid, devicename, topic, payload, seq, timestamp, timemills]);
|
||
|
||
}
|
||
}
|
||
|
||
function sortByDevice() {
|
||
var arrayObj = Array.from(gTableDataMap);
|
||
arrayObj.sort(function (a, b) { return a[0].localeCompare(b[0]); });
|
||
return arrayObj;
|
||
}
|
||
|
||
|
||
function fillTable(dataArrFromMap) {
|
||
|
||
var tarBody = document.querySelector("#gridtable")/*.tBodies[0]*/;
|
||
tarBody.innerHTML = '';
|
||
|
||
var combineHtml = '';
|
||
for (let i = 0; i < dataArrFromMap.length; i++) {
|
||
/* console.log(dataArrFromMap[i])*/
|
||
combineHtml += '<div class="divide-y">';
|
||
combineHtml += '<div id="button_' + dataArrFromMap[i][0] + '_' + dataArrFromMap[i][1][0] + '" ondblclick="showHistoryMessage(this)" onclick="presentationinfo(`' + dataArrFromMap[i][0] + '_' + dataArrFromMap[i][1][0] +'`)">'
|
||
combineHtml += '<ul class="grid" >'
|
||
combineHtml += '<li>'
|
||
|
||
combineHtml += '<span class="titlestime">'
|
||
combineHtml += dataArrFromMap[i][1][1]
|
||
combineHtml += '</span>'
|
||
|
||
if (dataArrFromMap[i][1][0] == 1) {
|
||
combineHtml += '<span class="titlestime" style = "color:#00AA55;">'
|
||
combineHtml += "在线"
|
||
combineHtml += '</span>'
|
||
} else if (dataArrFromMap[i][1][0] == 0) {
|
||
|
||
combineHtml += '<span class="titlestime" style = "color:#FF5511;">'
|
||
combineHtml += "离线"
|
||
combineHtml += '</span>'
|
||
|
||
|
||
} else {
|
||
combineHtml += '<span class="titlestime">'
|
||
combineHtml += "未使用"
|
||
combineHtml += '</span>'
|
||
}
|
||
|
||
if (dataArrFromMap[i][1][4] == "取电") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style = "background-color:#00AA55; color:#FFFFFF;">取电</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style = "background-color:#FF5511;color:#FFFFFF;">断电</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][6] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir1</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir1</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][7] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir2</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir2</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
|
||
if (dataArrFromMap[i][1][8] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir3</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir3</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
|
||
if (dataArrFromMap[i][1][9] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir4</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir4</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][11] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir5</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir5</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
|
||
if (dataArrFromMap[i][1][12] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir6</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir6</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][13] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir7</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir7</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][14] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">pir8</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">pir8</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
if (dataArrFromMap[i][1][10] == "1") {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#00AA55;">门磁</span>'
|
||
combineHtml += '</span>'
|
||
} else {
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += '<span style="color:#FF5511;">门磁</span>'
|
||
combineHtml += '</span>'
|
||
}
|
||
combineHtml += '<span class="analyze">功率:'
|
||
combineHtml += dataArrFromMap[i][1][5].substring(0, 7)
|
||
combineHtml += 'W</span>'
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += dataArrFromMap[i][1][15]
|
||
combineHtml += '</span>'
|
||
combineHtml += '<span class="analyze">'
|
||
combineHtml += dataArrFromMap[i][1][16]
|
||
combineHtml += '</span>'
|
||
combineHtml += '</span>'
|
||
|
||
combineHtml += '<div id="' + dataArrFromMap[i][0] + '_' + dataArrFromMap[i][1][0] +'" style="display:none">'
|
||
combineHtml += '<span class="titlestime">硬件版本：'
|
||
combineHtml += dataArrFromMap[i][1][18]
|
||
combineHtml += '</span>'
|
||
combineHtml += '<span class="titlestime">软件版本：'
|
||
combineHtml += dataArrFromMap[i][1][19]
|
||
combineHtml += '</span>'
|
||
combineHtml += '<span class="RawData">异常详情：'
|
||
combineHtml += dataArrFromMap[i][1][17]
|
||
combineHtml += '</span>'
|
||
combineHtml += '<div>'
|
||
combineHtml += '<span class="RawData">'
|
||
combineHtml += dataArrFromMap[i][1][2]
|
||
combineHtml += '</span>'
|
||
combineHtml += '</li>'
|
||
combineHtml += '</ul>'
|
||
combineHtml += '</div>'
|
||
combineHtml += '</div>'
|
||
}
|
||
tarBody.innerHTML = combineHtml;
|
||
}
|
||
|
||
function clearAllMessgeHistory() {
|
||
var targetTextDom = document.querySelector("#historypopupmessage");
|
||
targetTextDom.innerHTML = "";
|
||
targetTextDom.value = "";
|
||
}
|
||
|
||
function clearSelectedMessgeHistory() {
|
||
var targetTextDom = document.querySelector("#historypopupmessageselected");
|
||
targetTextDom.innerHTML = "";
|
||
targetTextDom.value = "";
|
||
|
||
clearDeviceMessage();
|
||
//let time = 2 * 60 * 60 * 1000;
|
||
//window.setTimeout(clearDeviceMessage, time)
|
||
}
|
||
function shijianchuozhuanhuan(timestamp) {
|
||
// 此处时间戳以毫秒为单位
|
||
let date = new Date(parseInt(timestamp) * 1000);
|
||
let Year = date.getFullYear();
|
||
let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
|
||
let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
|
||
let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
|
||
let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
|
||
let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
||
let GMT = Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
|
||
return GMT
|
||
}
|
||
function showHistoryMessage(btnDom) {
|
||
var splArr = btnDom.id.split("_");
|
||
var productid = splArr[1];
|
||
|
||
gCurrentProduct = productid;
|
||
|
||
//refreshDeviceMessage(productid, devicename);
|
||
//gotoDownMessageArea(btnDom)
|
||
window.location.href = "/Home/RefreshDevice?shebxx=" + btnDom.id
|
||
}
|
||
let att = "";
|
||
function presentationinfo(zhanshiinfo) {
|
||
/* console.log(zhanshiinfo)*/
|
||
if (att != zhanshiinfo) {
|
||
$('#' + zhanshiinfo + '').css("display", "block");
|
||
/* $('.' + trdemo + '').css("display", "block");*/
|
||
att = zhanshiinfo;
|
||
} else {
|
||
$('#' + zhanshiinfo + '').css("display", "none");
|
||
/* $('.' + trdemo + '').css("display", "none");*/
|
||
att = 0;
|
||
}
|
||
}
|
||
|
||
|
||
</script> |