Boonlive_RD_Web/Web_F305_Mqtt_Prod
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
徐
2025-11-26 11:32:30 +08:00
commit 2163829349
1853 changed files with 1896668 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

446
MQTTServerSideAPI/Views/Home/Index.cshtml Normal file
View File

@@ -0,0 +1,446 @@
<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>

778
MQTTServerSideAPI/Views/Home/Offlinerecord.cshtml Normal file
View File

@@ -0,0 +1,778 @@

@{
ViewBag.Title = "Offlinerecord";
}
<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" })
<div onclick="fanhshiyic()" style="font-weight:600;">返回上一层</div>
<div id="label_devicekey" style="font-weight:600;"></div>
<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>
</nav>
<div class="row">
@*<h4 id="label_devicekey" style="display:inline-block;"></h4>*@
<div class="form-group row">
<label for="" class="col-md-1 col-sm-2 col-form-label">时间范围</label>
<div class="col-md-10 col-sm-2">
<div class="row">
<div class="col-md-5 col-sm-2">
<div class="input-group">
<input type="text" class="input-sm form-control mytimer" name="start" id="startTs" readonly="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar-alt"></i>
</button>
</span>
<select id="startTsBYtimes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="0" selected>请选择</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-2">至</div>
<div class="col-md-5 col-sm-2">
<div class="input-group">
<input type="text" class="input-sm form-control mytimer" name="end" id="endTs" readonly="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar-alt"></i>
</button>
</span>
<select id="endTsBYtimes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="0" selected>请选择</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div>
<button style="margin:10px;" onclick="SelectedMessgeHistory()" class="btn btn-light">查询</button>
</div>
<div id="main" style=" height: 400px;"></div>
<div id="gridtable"></div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="~/plugins/datapicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="~/dist/echarts.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/plugins/datapicker/datepicker3.css" rel="stylesheet" />
<script>
var gCurrentProduct = "";
var gCurrentDevice = "";
var gProductIDKey = "HICL5RNXAU";
var gTableDataMap = new Map();
var gDeviceArr = new Array();
var state=""
var stutate = "";
function fanhshiyic() {
window.location.href = "/Home/RefreshDevice?shebxx=" + stutate
}
function echartsinfo() {
fetch("/api/State/?productid=" + gProductIDKey + "&devicename=" + gCurrentDevice)
.then(resp => resp.json())
.then(function (jsondata) {
var arrRef = jsondata;
getechartsData(arrRef);
var arrlist = fillcharts(sortByDevice());
document.querySelector("#label_devicekey").innerHTML = gCurrentDevice + "在线(" + arrlist[1].value + ")离线(" + arrlist[0].value+")";
});
}
function getechartsData(arrRef) {
gTableDataMap = new Map();
for (var i = 0; i < arrRef.length; i++) {
let tmp2Part = arrRef[i].split(",");
let eventName = tmp2Part[0].split(":")[1];
let shul = tmp2Part[1].split(":")[1];
let tmpKey = eventName;
gTableDataMap.set(tmpKey, [eventName, shul]);
}
};
function fillcharts(dataArrFromMap) {
var arr = [];
for (let i = 0; i < dataArrFromMap.length; i++) {
var eachrts = { value: 0, name: "aa" }
eachrts.value = dataArrFromMap[i][1][1]
eachrts.name = dataArrFromMap[i][1][0] == "EV_ONLINE" ? "在线" : "离线"
arr.push(eachrts)
}
return arr;
}
function sortByDevice() {
var arrayObj = Array.from(gTableDataMap);
/* console.log(arrayObj)*/
arrayObj.sort(function (a, b) {
return a[0].localeCompare(b[0]);
});
return arrayObj;
}
function getUrlParams() {
let url = window.location.search;
let paramsObj = new Object();
if (url.indexOf("?") != -1) {
let str = url.substr(1);
strs = str.split("&");
for (let i = 0; i < strs.length; i++) {
paramsObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return paramsObj;
}
$(function () {
var nnsjd = getUrlParams()
stutate = nnsjd.shebxx
var splArr = nnsjd.shebxx.split("_");
var devicename = splArr[1];
state = splArr[2]
/* console.log(state)*/
gCurrentDevice = devicename;
let startTs = $("#startTs").val();
let endTs = $("#endTs").val();
//startTsBYtimes
//endTsBYtimes
var Status = document.getElementById("startTsBYtimes");
var index = Status.selectedIndex;
var startTsBYtimes = Status.options[index].value;
let startTstimes = timehandle(startTs, startTsBYtimes)
var BYStatus = document.getElementById("endTsBYtimes");
var index = BYStatus.selectedIndex;
var endTsBYtimes = BYStatus.options[index].value;
let endTstimes = timehandle(endTs, endTsBYtimes)
////echart报表方法
echartsinfo();
SelectStatus(gProductIDKey, gCurrentDevice, startTstimes, endTstimes)
});
//查询在线离线日志
function SelectStatus(gProductIDKey, gCurrentDevice, logsStatusBYtimes, logStatusBYStatuss) {
/* console.log("时间：" + logsStatusBYtimes + ",状态：" + logStatusBYStatuss)*/
/* $('#jianzaozhang').css("display", "block");*/
/* $('#shujuzhangshi').css("display", "none");*/
fetch("/api/State/?productid=" + gProductIDKey + "&devicename=" + gCurrentDevice + "&times=" + logsStatusBYtimes + "&Statuss=" + logStatusBYStatuss)
.then(resp => resp.json())
.then(function (jsondata) {
var arrRef = jsondata;
getStatusData(arrRef);
/* console.log(state)*/
var arrayObj = Array.from(gTableDataMap);
gSingleCounterPerHourCacheRangeArray = [];
//初始化原始事件表
/* gSingleCounterPerHourCacheDataArray = arrayObj;*/
//初始化range表,全部使用毫秒数标志。
var tmpStMsTime = 0, tmpEdMsTime = 0;
var spanMs = 0;
//var stTime = $("#startTs").val();
//var edTime = $("#endTs").val();
var stArr = logsStatusBYtimes.split('-').map(it => parseInt(it, 10));
var edArr = logStatusBYStatuss.split('-').map(it => parseInt(it, 10));
var tmpSt = new Date(stArr[0], stArr[1] - 1, stArr[2], 0, 0, 0, 0);
var tmpEd = new Date(edArr[0], edArr[1] - 1, edArr[2], 23, 59, 59, 0);
tmpStMsTime = tmpSt.getTime();
tmpEdMsTime = tmpEd.getTime();
//第一个break pointarrayObj[i][1][1]
if (!isNaN(tmpStMsTime) && !isNaN(tmpEdMsTime)) {
if (arrayObj == false) {
var labelArr = [tmpStMsTime, tmpEdMsTime];
var dataArr = [state, state];
var arr = [];
for (var i = 0; i < labelArr.length; i++) {
let time = shijianchuozhuanhuan(labelArr[i])
arr.push(time)
}
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['设备离在线记录']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: arr
},
yAxis: {
type: 'value'
},
series: [
{
name: '设备离在线记录',
type: 'line',
stack: 'Total',
data: dataArr
}
]
};
myChart.setOption(option);
}
else {
if (arrayObj[0][1][1] == "EV_ONLINE") {
gSingleCounterPerHourCacheRangeArray.push({ brk: tmpStMsTime, stat: arrayObj[0][1][1] });
}
else {
gSingleCounterPerHourCacheRangeArray.push({ brk: tmpStMsTime, stat: arrayObj[0][1][1] });
}
for (let i = arrayObj.length - 1; i >= 0; i--) {
/* let ptPos = convertMVCDateToInt(gSingleCounterPerHourCacheDataArray[i].CreateTime);*/
//如果同一时间多个触发，以最后一个为准
let dupPos = -1;
for (let k = 0; k < gSingleCounterPerHourCacheRangeArray.length; k++) {
if (gSingleCounterPerHourCacheRangeArray[k].brk == arrayObj[i][1][3]) {
dupPos = k;
break;
}
}
if (dupPos === -1) //新增一个位置
gSingleCounterPerHourCacheRangeArray.push({ brk: arrayObj[i][1][3], stat: arrayObj[i][1][1] });
else
gSingleCounterPerHourCacheRangeArray[dupPos].stat = arrayObj[i][1][1];//同一时间保留最后一次更新
}
//最后一个break point
if (gSingleCounterPerHourCacheRangeArray[gSingleCounterPerHourCacheRangeArray.length - 1].brk === tmpEdMsTime)//更新
{
//使用数据库的状态值。
} else//添加
{
if (state == 1) {
gSingleCounterPerHourCacheRangeArray.push({ brk: tmpEdMsTime, stat: "EV_ONLINE" });
} else {
gSingleCounterPerHourCacheRangeArray.push({ brk: tmpEdMsTime, stat: "EV_OFFLINE" });
}
}
var labelArr = [];
var dataArr = [];
/* console.log(gSingleCounterPerHourCacheRangeArray)*/
for (var i = 0; i < gSingleCounterPerHourCacheRangeArray.length; i++) {
let time = shijianchuozhuanhuan(gSingleCounterPerHourCacheRangeArray[i].brk)
labelArr.push(time)
let sum;
if (gSingleCounterPerHourCacheRangeArray[i].stat == "EV_ONLINE") {
sum = 1;
dataArr.push(sum)
} else {
sum = 0;
dataArr.push(sum)
}
}
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['设备离在线记录']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: labelArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '设备离在线记录',
type: 'line',
stack: 'Total',
data: dataArr
}
]
};
myChart.setOption(option);
//$('#shujuzhangshi').css("display", "block");
//$('#jianzaozhang').css("display", "none");
}
}
else {
var labelArr = [];
var dataArr = [];
for (var i = arrayObj.length-1; i >=0; i--) {
let time = shijianchuozhuanhuan(arrayObj[i][1][3])
labelArr.push(time)
let sum;
if (arrayObj[i][1][1] == "EV_ONLINE") {
sum = 1;
dataArr.push(sum)
} else {
sum = 0;
dataArr.push(sum)
}
}
/* debugger*/
//let dd = arrayObj[0][1][3].split("'");
//console.log(dd)
console.log(arrayObj[0][1][3])
console.log(arrayObj[arrayObj.length - 1][1][3])
const timeSegments = splitTimestamp(parseInt(arrayObj[arrayObj.length - 1][1][3]), parseInt(arrayObj[0][1][3]) ,100)
console.log(timeSegments)
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['设备离在线记录']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: labelArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '设备离在线记录',
type: 'line',
stack: 'Total',
data: dataArr
}
]
};
myChart.setOption(option);
}
fillTable(gTableDataMap);
});
}
//function splitTime(startTime, endTime, numberOfSegments) {
// const start = new Date(startTime);
// const end = new Date(endTime);
// const segmentDuration = (end - start) / numberOfSegments;
// const timeSegments = [];
// for (let i = 0; i < numberOfSegments; i++) {
// const segmentStart = new Date(start.getTime() + i * segmentDuration);
// const segmentEnd = new Date(start.getTime() + (i + 1) * segmentDuration);
// timeSegments.push({ start: segmentStart, end: segmentEnd });
// }
// return timeSegments;
//}
function splitTimestamp(startTime, endTime, numberOfSegments) {
const segmentDuration = (endTime - startTime) / numberOfSegments;
const timestampSegments = [];
for (let i = 0; i < numberOfSegments; i++) {
const segmentStart = startTime + i * segmentDuration;
/* let cc = segmentStart.split('-')*/
const segmentEnd = startTime + (i + 1) * segmentDuration;
/* let aa= segmentEnd.split('-')*/
timestampSegments.push({ start: segmentStart, end: segmentEnd });
}
return timestampSegments;
}
function getStatusData(arrRef) {
gTableDataMap = new Map();
/* console.log(arrRef)*/
for (var i = 0; i < arrRef.length; i++) {
let tmp2Part = arrRef[i].split(",");
let devicename = tmp2Part[0].split(":")[1];
let eventName = tmp2Part[1].split(":")[1];
let seq = tmp2Part[2].split(":")[1];
let timemills = tmp2Part[3].split(":")[1];
let reason = tmp2Part[4].split(":")[1];
let id = tmp2Part[5].split(":")[1];
//use product+device as key
let tmpKey = id;
gTableDataMap.set(tmpKey, [devicename, eventName, seq, timemills, reason, id]);
}
/* console.log(gTableDataMap)*/
};
function fillTable(dataArrFromMap) {
/* console.log(dataArrFromMap)*/
var arrayObj = Array.from(dataArrFromMap);
var tarBody = document.querySelector("#gridtable");
tarBody.innerHTML = '';
var combineHtml = '';
for (let i = 0; i < arrayObj.length; i++) {
combineHtml += '<div style="border: 1px solid black; display: grid; grid-template-columns: auto auto;">';
combineHtml += '<div>'
combineHtml += '<div>编号:' + arrayObj[i][1][5] + '</div>'
combineHtml += '<div>timestamp:' + shijianchuozhuanhuan(arrayObj[i][1][3]) + '</div>'
combineHtml += '<div style="' + (arrayObj[i][1][1] == "EV_ONLINE" ? "color:forestgreen;" : "color:red;") + '">原因:' + arrayObj[i][1][4] + '</div>'
combineHtml += '</div>'
/* style = "width:300px"*/
combineHtml += '<div>'
combineHtml += '<div style="' + (arrayObj[i][1][1] == "EV_ONLINE" ? "color:forestgreen;" : "color:red;") + '"> <span style="color:black;">状态:</span>' + (arrayObj[i][1][1] == "EV_ONLINE" ? "在线" : "离线") + '</div>'
combineHtml += '<div>seq:' + arrayObj[i][1][2] + '</div>'
combineHtml += '</div>'
combineHtml += '</div>'
}
tarBody.innerHTML = combineHtml;
}
function shijianchuozhuanhuan(timestamp) {
// 此处时间戳以毫秒为单位
let date = new Date(parseInt(timestamp));
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 SelectedMessgeHistory() {
let startTs = $("#startTs").val();
let endTs = $("#endTs").val();
//startTsBYtimes
//endTsBYtimes
var Status = document.getElementById("startTsBYtimes");
var index = Status.selectedIndex;
var startTsBYtimes = Status.options[index].value;
if (startTs == undefined || startTs == "" || startTs == null) {
alert("请选择开始时间")
return
}
let startTstimes = timehandle(startTs, startTsBYtimes)
var BYStatus = document.getElementById("endTsBYtimes");
var index = BYStatus.selectedIndex;
var endTsBYtimes = BYStatus.options[index].value;
if (endTs == undefined || endTs == "" || endTs == null) {
alert("请选择结束时间")
return
}
let endTstimes = timehandle(endTs, endTsBYtimes)
///* */ var gCurrentProduct = "";
// var gCurrentDevice = "";
if (startTsBYtimes == 0 || endTsBYtimes == 0) {
startTstimes = startTs + " 00:00:00";
endTstimes = endTs + " 23:59:59"
}
if (startTstimes != "null" && endTstimes != "null") {
if (startTstimes <= endTstimes) {
SelectStatus(gProductIDKey, gCurrentDevice, startTstimes, endTstimes)
//fetch("/api/Logs/?productid=" + gProductIDKey + "&devicename=" + gCurrentDevice + "&stime=" + startTstimes + "&etime=" + endTstimes)
// .then(resp => resp.json())
// .then(function (jsondata) {
// var arrRef = jsondata;
//
// getLogsData(arrRef);
// fillCard(sortByDevice());
// });
} else {
alert("开始时间小于结束时间")
}
} else {
alert("数据不完整")
return
}
//console.log("开始值：" + startTstimes + "结束值：" + endTstimes)
/* getLogContent()*/
}
function timehandle(date, time) {
switch (time) {
case "1":
return date + " " + "0" + time + ":00:00"
break;
case "2":
return date + " " + "0" + time + ":00:00"
break;
case "3":
return date + " " + "0" + time + ":00:00"
break;
case "4":
return date + " " + "0" + time + ":00:00"
break;
case "5":
return date + " " + "0" + time + ":00:00"
break;
case "6":
return date + " " + "0" + time + ":00:00"
break;
case "7":
return date + " " + "0" + time + ":00:00"
break;
case "8":
return date + " " + "0" + time + ":00:00"
break;
case "9":
return date + " " + "0" + time + ":00:00"
break;
case "10":
return date + " " + time + ":00:00"
break;
case "11":
return date + " " + time + ":00:00"
break;
case "12":
return date + " " + time + ":00:00"
break;
case "13":
return date + " " + time + ":00:00"
break;
case "14":
return date + " " + time + ":00:00"
break;
case "15":
return date + " " + time + ":00:00"
break;
case "16":
return date + " " + time + ":00:00"
break;
case "17":
return date + " " + time + ":00:00"
break;
case "18":
return date + " " + time + ":00:00"
break;
case "19":
return date + " " + time + ":00:00"
break;
case "20":
return date + " " + time + ":00:00"
break;
case "21":
return date + " " + time + ":00:00"
break;
case "22":
return date + " " + time + ":00:00"
break;
case "23":
return date + " " + time + ":00:00"
break;
case "24":
return date + " " + "00:00:00"
break;
default:
return "null"
break;
}
}
$('#startTs').datepicker({
language: 'zh-CN', // 中文语言包
autoclose: 1, // 选中日期后自动关闭
format: 'yyyy-mm-dd', // 日期格式
minView: "month", // 最小日期显示单元，这里最小显示月份界面，即可以选择到日*/
/* todayBtn: 1, // 显示今天按钮*/
todayHighlight: 1, // 显示今天高亮
clearBtn: true,//清除按钮
});
$('#endTs').datepicker({
language: 'zh-CN', // 中文语言包
autoclose: 1, // 选中日期后自动关闭
format: 'yyyy-mm-dd', // 日期格式
minView: "month", // 最小日期显示单元，这里最小显示月份界面，即可以选择到日
/* todayBtn: 1, // 显示今天按钮*/
todayHighlight: 1, // 显示今天高亮
clearBtn: true,//清除按钮
});
</script>

4746
MQTTServerSideAPI/Views/Home/RefreshDevice.cshtml Normal file
View File

File diff suppressed because it is too large Load Diff

218
MQTTServerSideAPI/Views/Home/Viewofflinerecordsofalldevices.cshtml Normal file
View File

@@ -0,0 +1,218 @@

@{
ViewBag.Title = "Viewofflinerecordsofalldevices";
}
<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" })
<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>
<div class="form-group row">
<div>
<label for="" class="col-md-1 col-sm-2 col-form-label">时间范围</label>
<div class="col-md-10 col-sm-2">
<div class="row">
<div class="col-md-5 col-sm-2">
<div class="input-group">
<input type="text" class="input-sm form-control mytimer" name="start" id="startTs" readonly="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar-alt"></i>
</button>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2">至</div>
<div class="col-md-5 col-sm-2">
<div class="input-group">
<input type="text" class="input-sm form-control mytimer" name="end" id="endTs" readonly="">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar-alt"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<label for="inputPassword2" class="col-md-1 col-sm-2 col-form-label">设备名称</label>
<div class="col-md-5 col-sm-2">
<input type="text" class="form-control" id="inputPassword2" placeholder="请输入设备名称">
</div>
</div>
<div>
</div>
</div>
<div>
<button style="margin:10px;" onclick="SelectedMessgeHistory()" class="btn btn-light">查询</button>
</div>
<div id="gridtable"></div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="~/plugins/datapicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="~/dist/echarts.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/plugins/datapicker/datepicker3.css" rel="stylesheet" />
<script>
var gTableDataMap = new Map();
var gDeviceArr = new Array();
$(function () {
selectallinfo();
})
function selectallinfo() {
let startTs = $("#startTs").val();
let endTs = $("#endTs").val();
let name = $("#inputPassword2").val()
console.log("ks:" + startTs + "js:" + endTs + "name:" + name)
if (startTs > endTs) {
alert("开始时间大于结束时间，请重新选择时间")
return;
}
if (startTs == undefined || startTs == "" || startTs == null) {
startTs = "null";
} else {
startTs+=" 00:00:00"
}
if (endTs == undefined || endTs == "" || endTs == null) {
endTs = "null";
} else {
endTs +=" 23:59:59"
}
if (name == undefined || name == "" || endTs == name) {
name = "null";
}
//startTsBYtimes
//endTsBYtimes
//var Status = document.getElementById("startTsBYtimes");
//var index = Status.selectedIndex;
//var startTsBYtimes = Status.options[index].value;
//let startTstimes = timehandle(startTs, startTsBYtimes)
//var BYStatus = document.getElementById("endTsBYtimes");
//var index = BYStatus.selectedIndex;
//var endTsBYtimes = BYStatus.options[index].value;
/* string devicename, string stime, string etime*/
fetch("/api/State/?devicename=" + name + "&stime=" + startTs + "&etime=" + endTs)
.then(resp => resp.json())
.then(function (jsondata) {
var arrRef = jsondata;
getStatusData(arrRef);
var arrayObj = Array.from(gTableDataMap);
fillTable(gTableDataMap);
});
}
function getStatusData(arrRef) {
gTableDataMap = new Map();
/* console.log(arrRef)*/
for (var i = 0; i < arrRef.length; i++) {
let tmp2Part = arrRef[i].split(",");
let devicename = tmp2Part[0].split(":")[1];
let eventName = tmp2Part[1].split(":")[1];
let seq = tmp2Part[2].split(":")[1];
let timemills = tmp2Part[3].split(":")[1];
let reason = tmp2Part[4].split(":")[1];
let id = tmp2Part[5].split(":")[1];
//use product+device as key
let tmpKey = id;
gTableDataMap.set(tmpKey, [devicename, eventName, seq, timemills, reason, id]);
}
/* console.log(gTableDataMap)*/
};
function fillTable(dataArrFromMap) {
/* console.log(dataArrFromMap)*/
var arrayObj = Array.from(dataArrFromMap);
var tarBody = document.querySelector("#gridtable");
tarBody.innerHTML = '';
var combineHtml = '';
for (let i = 0; i < arrayObj.length; i++) {
combineHtml += '<div style="border: 1px solid black; display: grid; grid-template-columns: auto auto;">';
combineHtml += '<div>'
combineHtml += '<div>编号:' + arrayObj[i][1][5] + '</div>'
combineHtml += '<div>timestamp:' + shijianchuozhuanhuan(arrayObj[i][1][3]) + '</div>'
combineHtml += '<div style="' + (arrayObj[i][1][1] == "EV_ONLINE" ? "color:forestgreen;" : "color:red;") + '">原因:' + arrayObj[i][1][4] + '</div>'
combineHtml += '</div>'
/* style = "width:300px"*/
combineHtml += '<div>'
combineHtml += '<div style="' + (arrayObj[i][1][1] == "EV_ONLINE" ? "color:forestgreen;" : "color:red;") + '"> <span style="color:black;">状态:</span>' + (arrayObj[i][1][1] == "EV_ONLINE" ? "在线" : "离线") + '</div>'
combineHtml += '<div>seq:' + arrayObj[i][1][2] + '</div>'
combineHtml += '<div>设备名称:' + arrayObj[i][1][0] + '</div>'
combineHtml += '</div>'
combineHtml += '</div>'
}
tarBody.innerHTML = combineHtml;
}
function shijianchuozhuanhuan(timestamp) {
// 此处时间戳以毫秒为单位
let date = new Date(parseInt(timestamp));
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 SelectedMessgeHistory() {
selectallinfo();
}
$('#startTs').datepicker({
language: 'zh-CN', // 中文语言包
autoclose: 1, // 选中日期后自动关闭
format: 'yyyy-mm-dd', // 日期格式
minView: "month", // 最小日期显示单元，这里最小显示月份界面，即可以选择到日*/
/* todayBtn: 1, // 显示今天按钮*/
todayHighlight: 1, // 显示今天高亮
clearBtn: true,//清除按钮
});
$('#endTs').datepicker({
language: 'zh-CN', // 中文语言包
autoclose: 1, // 选中日期后自动关闭
format: 'yyyy-mm-dd', // 日期格式
minView: "month", // 最小日期显示单元，这里最小显示月份界面，即可以选择到日
/* todayBtn: 1, // 显示今天按钮*/
todayHighlight: 1, // 显示今天高亮
clearBtn: true,//清除按钮
});
</script>

189
MQTTServerSideAPI/Views/LoginViews/Index.cshtml Normal file
View File

@@ -0,0 +1,189 @@
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 取消固定手机框架宽度980 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Login</title>
<!-- Vue.js -->
<script src="~/plugins/vue.js/vue_2.6.14.js"></script>
<!-- 引入样式 -->
@* <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-2-s/element-ui/2.15.7/theme-chalk/index.min.css" type="text/css" rel="stylesheet" />*@
<!-- 引入组件库 -->
@* <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-2-s/element-ui/2.15.7/index.min.js" type="application/javascript"></script>*@
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- jQuery -->
<script src="~/plugins/jQuery/jquery.min.js"></script>
<style>
/* 流动布局样式 */
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body style=" overflow: hidden; margin: 0; padding: 0;">
<h1 style="font-size: 22px; position: absolute; top: 12%; left: 50%; transform: translate(-50%, -50%); margin: 0;">MQTT</h1>
<div id="app" class="login-container">
<el-card class="box-card" style="width: 500px;">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<div>
<el-form ref="loginForm" :model="loginForm" label-width="85px">
<el-form-item label="账号">
<el-input style="width:88%" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input style="width:88%" type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
</el-form-item>
<el-form-item style="padding-left:0px">
<el-button style="width:77%" type="primary" @@click="handleLogin">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
loginForm: {
username: '',
password: '',
remember: true,
}
};
},
created: function () {
this.loadCredentials(); // 加载凭证
this.adjustLayout();
window.addEventListener('resize', this.adjustLayout);
document.addEventListener('keydown', this.handleGlobalEnter);
this.attemptAutoLogin(); // 尝试自动登录
},
beforeDestroy: function () {
window.removeEventListener('resize', this.adjustLayout);
document.removeEventListener('keydown', this.handleGlobalEnter);
},
methods: {
loadCredentials: function () {
var username = localStorage.getItem('username');
var password = localStorage.getItem('password');
var remember = localStorage.getItem('remember') == 'true';
var loginTime = localStorage.getItem('loginTime');
if (username && password && remember) {
this.loginForm.username = username;
this.loginForm.password = password;
this.loginForm.remember = remember;
}
},
handleLogin() {
var _this = this; // 保存 Vue 实例的引用
// 发送登录请求
$.ajax({
url: '/api/Login/Login', // 登录处理程序
type: 'POST',
data: {
user_name: _this.loginForm.username,
password: _this.loginForm.password
},
success: function (response) {
// 处理成功响应
if (response) {
_this.$message({
message: '登录成功！',
type: 'success'
});
// 如果用户选择了记住密码，将用户名和密码保存到localStorage
if (_this.loginForm.remember) {
localStorage.setItem('username', _this.loginForm.username);
localStorage.setItem('password', _this.loginForm.password);
localStorage.setItem('remember', 'true');
localStorage.setItem('loginTime', new Date().toString());
} else {
localStorage.removeItem('username');
localStorage.removeItem('password');
localStorage.setItem('remember', 'false');
}
// 跳转到 /home/Index 页面
setTimeout(function () {
window.location.href = '/Home/Index';
}, 666);
} else {
// 如果后端返回了错误信息，显示Message提示
_this.$message.error(response);
}
},
error: function (xhr, status, error) {
// 处理错误响应
_this.$message.error('登录失败！');
}
});
},
handleGlobalEnter: function (event) {
if (event.key === 'Enter') {
this.handleLogin();
}
},
adjustLayout: function () {
var width = window.innerWidth;
var loginContainer = document.querySelector('.login-container');
var boxCard = document.querySelector('.box-card');
var header = document.querySelector('h1');
if (width < 768) { // 默认768px以下为移动设备
// 调整登录容器的样式
loginContainer.style.flexDirection = 'column';
loginContainer.style.alignItems = 'flex-start';
boxCard.style.width = '99vw';
header.style.fontSize = '18px';
} else {
// 还原为原始样式
loginContainer.style.flexDirection = 'row';
loginContainer.style.alignItems = 'center';
boxCard.style.width = '500px';
header.style.fontSize = '22px';
}
},
attemptAutoLogin: function () {
var loginTime = localStorage.getItem('loginTime');
if (loginTime) {
var timeSinceLastLogin = (new Date() - new Date(loginTime)) / 3600000; // 计算时间差，单位改为小时
if (timeSinceLastLogin < 2 && this.loginForm.username && this.loginForm.password) {
console.log('自动登录成功');
this.handleLogin();
}
}
}
}
});
</script>
</body>
</html>

14
MQTTServerSideAPI/Views/Shared/Error.cshtml Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />
<title>错误</title>
</head>
<body>
<hgroup>
<h1>错误。</h1>
<h2>处理你的请求时出错。</h2>
</hgroup>
</body>
</html>

27
MQTTServerSideAPI/Views/Shared/_Layout.cshtml Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Mqtt测试应用</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
<body>
<div>
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

43
MQTTServerSideAPI/Views/Web.config Normal file
View File

@@ -0,0 +1,43 @@
<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
</sectionGroup>
</configSections>
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.9.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
<add namespace="MQTTServerSideAPI" />
</namespaces>
</pages>
</system.web.webPages.razor>
<appSettings>
<add key="webpages:Enabled" value="false" />
</appSettings>
<system.webServer>
<handlers>
<remove name="BlockViewHandler"/>
<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>
</system.webServer>
<system.web>
<compilation>
<assemblies>
<add assembly="System.Web.Mvc, Version=5.2.9.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</assemblies>
</compilation>
</system.web>
</configuration>

3
MQTTServerSideAPI/Views/_ViewStart.cshtml Normal file
View File

@@ -0,0 +1,3 @@
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}