@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
Layout = null;
}
@{
int screenWidth = 1280;
int mainviewHeight = 570;
int marginLeft = 42;
int marginTop = 20;
int dataDescriptionWidth = (screenWidth - 2 * marginLeft) * 50 / 100;
int dataDescriptionHeight = mainviewHeight - marginTop - marginTop / 2;
int dataDescriptionTableHeight = dataDescriptionHeight * 95 / 100;
int dataDescriptionTableHeadHeight = dataDescriptionTableHeight / 5;
int dataDescriptionTableBodyRowHeight = (dataDescriptionTableHeight - dataDescriptionTableHeight / 5) / 8;
int dataDescriptionTableBodyHeight = dataDescriptionTableHeight - dataDescriptionTableHeight / 5;
int dataHistoryWidth = (screenWidth - 2 * marginLeft) * 50 / 100;
int stationInfoHeigth = dataDescriptionHeight - dataDescriptionTableHeight;
//int dataDescriptionHeaderHeight = dataDescriptionHeight - dataDescriptionTableHeight;
}
<style type="text/css">
.table{
border-collapse:collapse;
}
.table tr td{
/*border-bottom: 1px solid#00bfff;
border-left: 1px solid #00bfff;*/
color: #000000;
font-size: 30px;
/*padding:5px 8px;*/
text-align: left;
font-weight: bold;
}
.table>thead {
display: table;
width: 100%;
height:@(dataDescriptionTableHeadHeight)px;
table-layout:fixed;
}
.table>tbody>tr{
display: table;
width: 100%;
height:@(dataDescriptionTableBodyRowHeight)px;
table-layout:fixed;
}
.table>tbody{
height:@(dataDescriptionTableBodyHeight)px;
overflow: hidden;
display: block;
overflow: hidden;
overflow-y:auto;
}
</style>
<script src="~/js/mqtt.min.js"></script>
@*<script src="~/js/jquery-3.4.1.min.js"></script>*@
@*@{
await Html.RenderPartialAsync("OnlineMonitorHeader");
}*@
<div id="dataupload" style="position: relative; width:@(screenWidth-2)px; height:@(mainviewHeight-2)px;">
@*<span id="testmqqt" style="position: relative">数据上传</span>
<input type="button" onclick="Onmqtttest()" value="Test MQQT" />*@
<div id="dataupload_description" style="position: relative;float: left;margin-left: @(marginLeft)px; margin-top: @(marginTop)px;width:@(dataDescriptionWidth)px; height:@(dataDescriptionHeight)px;">
@*<span id="dataupload_description_header" style="position: relative; width: 100%; height: 40px; line-height: 40px; font-size: 22px; text-align: left; font-weight: bold;">
北京环保局上传（测试）
</span>*@
<table id="dataupload_description_table" class="table">
<thead>
<tr style="font-weight: bold; font-size: 40px;">
<td style="height: @(dataDescriptionTableHeadHeight)px;">北京环保局上传（测试）</td>
</tr>
</thead>
<tbody>
@for (int i = 0; i < 4; i++)
{
<tr style="font-size: 30px;">
<td style="text-align: left; height: @(dataDescriptionTableBodyRowHeight-2)px;">2020-04-16</td>
</tr>
<tr style="font-size: 30px;">
<td style="padding-left: 20%; height: @(dataDescriptionTableBodyRowHeight)px;">加油数据首次上传</td>
</tr>
}
</tbody>
</table>
<div id="dataupload_stationInfo" style="position: relative; float: left;width:@(dataDescriptionWidth)px; height:@(stationInfoHeigth-2)px;font-size: 22px;">站点编号：1234567890</div>
</div>
<div id="dataupload_history" style="position: relative;float: left;margin-top: @(marginTop)px;width:@(dataHistoryWidth)px; height:@(dataDescriptionHeight)px;">
<table id="dataupload_history_table" class="table">
<thead>
<tr style="font-weight: bold; font-size: 30px;">
<td style="height: @(dataDescriptionTableHeadHeight)px;">上传历史</td>
</tr>
</thead>
<tbody>
@for (int i = 0; i < 15; i++)
{
<tr style="font-size: 30px;font-weight: bold;">
<td style="width: 33%;">2020-04-16</td>
<td style="width: 41%;">加油数据上传</td>
<td style="width: 25%;">成功</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@*<img id="dataupload_img" src="/image/online/筛选图标.png" style="position: absolute; left: @(screenWidth-63)px;top: 55px;"/>*@
<script>
var textSpan = document.getElementById("head_left_text");
if (textSpan != null)
textSpan.innerHTML = "数据上传";
</script>
<script type="text/javascript">
var hostname = 'localhost', //'192.168.1.2',
port = 8384,
clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
timeout = 5000,
keepAlive = 100,
cleanSession = false,
mqttVersion = 3,
ssl = false;
//var client = new Paho.MQTT.Client(hostname, port, clientId);
//client.onConnectionLost = onConnectionLost;//绑定连接断开事件
//client.onMessageArrived = onMessageArrived;//
var options = {
//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
//invocationContext: {
// host: hostname,
// port: port,
// //path: client.path,
// mqttVersion:mqttVersion,
// clientId: clientId
//},
//mqttVersion:mqttVersion,
timeout: timeout,
//keepAliveInterval: keepAlive,
//cleanSession: cleanSession,
useSSL: false
//onSuccess: onConnect,
//onFailure: onError
}
//浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here
//client.on('connect',
// function() {
// client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply',
// function(err) {
// if (!err) {
// client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt');
// }
// });
// });
//client.on('message',
// function(topic, message) {
// // message is Buffer
// console.log(message.toString());
// client.end();
// });
////建立连接
client.on('connect',
function () {
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = "connected";
//订阅主题 presence
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply',
function (err) {
if (!err) {
if (a != null) a.innerHTML = "subscribe GetConfigAsync_reply successfully";
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt ');
} else {
//打印错误
if (a != null) a.innerHTML = err;
}
});
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply',
function (err) {
if (!err) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData', "Hello mqtt");
};
});
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData_reply',
function (err) {
if (!err) {
if (a != null) a.innerHTML = "subscribe nozzleFlowData successfully";
} else {
//打印错误
if (a != null) a.innerHTML = err;
}
});
});
//如果连接错误，打印错误
client.on('error',
function (err) {
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = err;
client.end();
});
//如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
client.on('message',
function (topic, message) {
// message is Buffer,此处就是打印消息的具体内容
//console.log('-> ' + message.toString());
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = topic;
if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply") {
processConfigData(JSON.parse(message.toString()));
return;
}
if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply") {
var nozzles = processNozzlesData(JSON.parse(message.toString()));
return;
}
});
function processConfigData(message) {
var WarningValueMin = message.onlineWatchConfig.WarningValueMin;
var WarningValueMax = message.onlineWatchConfig.WarningValueMax;
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = WarningValueMin;
}
function processNozzlesData(message) {
var data = message.data;
var pumpMap = new Map();
var currentDispenserId = 0;
var nozzlesArray = new Array();
data.forEach(function (d) {
if (currentDispenserId === 0) {
currentDispenserId = d.SiteLevelDispenserId;
nozzlesArray.push(d);
} else if (currentDispenserId !== d.SiteLevelDispenserId) {
pumpMap.set(currentDispenserId, new Array().concat(nozzlesArray));
currentDispenserId = d.SiteLevelDispenserId;
nozzlesArray.splice(0, nozzlesArray.length);
nozzlesArray.push(d);
} else {
currentDispenserId = d.SiteLevelDispenserId;
//nozzlesArray.clear();
nozzlesArray.push(d);
}
});
if (nozzlesArray.length > 0) {
pumpMap.set(currentDispenserId, new Array().concat(nozzlesArray));
nozzlesArray.splice(0, nozzlesArray.length);
}
pumpMap.forEach(function (value, key) {
var dispenserId = key;
var nozzleCount = value.length;
});
}
//// 用户程序点击事件
function Onmqtttest() {
var message = "message from browser with websocket"; // 消息内容
var nozzleId = 1;
var temp = { "Parameters": [{ "Name": "nozzleid", "Value": nozzleId }, { "Name": "starttime", "Value": "20200422000000" }, { "Name": "endtime", "Value": "20200422235959" }] };
message = JSON.stringify(temp);
//message ="{/"Parameters/": [{/"Name/": /"nozzleid/","Value": "2"}, { "Name": "starttime","Value": "20200422000000"}, {"Name": "endtime","Value": "20200422235959"}]}"
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
//发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
//client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt ' + message);
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = message;
}
</script>