Boonlive_RD_Web/Web_F305_Mqtt_Prod
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2163829349d70b90fbfc4de04f7b21935031d5c1
Web_F305_Mqtt_Prod/MQTTServerSideAPI/Views/Home/Index.cshtml

446 lines
18 KiB
Plaintext
Raw Normal View History

初始化
2025-11-26 11:32:30 +08:00
<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>
Reference in New Issue Copy Permalink