74 lines
3.2 KiB
Plaintext
74 lines
3.2 KiB
Plaintext
@model IoTGateway.ViewModel.BasicData.DeviceVariableVMs.DeviceVariableListVM
|
||
@inject IStringLocalizer<Program> Localizer;
|
||
|
||
<wt:treecontainer items="AllDevices" id-field="Searcher.DeviceId" height="500">
|
||
<wt:searchpanel vm="@Model" reset-btn="true">
|
||
<wt:row items-per-row="ItemsPerRowEnum.Three">
|
||
<wt:textbox field="Searcher.Name" />
|
||
<wt:textbox field="Searcher.Method" />
|
||
<wt:textbox field="Searcher.DeviceAddress" />
|
||
<wt:combobox field="Searcher.DataType" empty-text="@Localizer["Sys.All"]" />
|
||
</wt:row>
|
||
</wt:searchpanel>
|
||
<wt:grid vm="@Model" url="/BasicData/DeviceVariable/Search" hidden-grid-index="true" done-func="inimqttclient" />
|
||
</wt:treecontainer>
|
||
<link href="~/sitecss/animate.min.css" rel="stylesheet" />
|
||
<script src="~/mqtt.min.js" type="text/javascript"></script>
|
||
|
||
<script type="text/javascript">
|
||
function inimqttclient() {
|
||
var options = {
|
||
//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
|
||
clientId: 'mqttjs_' + (Math.random() * 10000000).toString()
|
||
}
|
||
var client = mqtt.connect('ws://' + window.location.host + '/mqtt', options);
|
||
client.on('connect',
|
||
function() {
|
||
client.subscribe('internal/v1/gateway/telemetry/+/+',
|
||
function(err) {
|
||
if (!err) {
|
||
console.log("订阅成功!");
|
||
} else {
|
||
console.log(err);
|
||
}
|
||
});
|
||
});
|
||
|
||
client.on('message',
|
||
function(topic, message) {
|
||
var objmsg = $.parseJSON(message.toString());
|
||
|
||
//原值
|
||
$('#id' + objmsg.VarId + '_Value').text(objmsg.Value);
|
||
$('#id' + objmsg.VarId + '_Value').addClass('animated bounceIn');
|
||
setTimeout(function() {
|
||
$('#id' + objmsg.VarId + '_Value').removeClass('bounceIn');
|
||
},
|
||
1500);
|
||
|
||
//加工值
|
||
$('#id' + objmsg.VarId + '_CookedValue').text(objmsg.CookedValue);
|
||
$('#id' + objmsg.VarId + '_CookedValue').addClass('animated bounceIn');
|
||
setTimeout(function() {
|
||
$('#id' + objmsg.VarId + '_CookedValue').removeClass('bounceIn');
|
||
},
|
||
1500);
|
||
|
||
//状态
|
||
$('#id' + objmsg.VarId + '_State').text(objmsg.StatusType);
|
||
$('#id' + objmsg.VarId + '_State').addClass('animated bounceIn');
|
||
setTimeout(function() {
|
||
$('#id' + objmsg.VarId + '_State').removeClass('bounceIn');
|
||
},
|
||
1500);
|
||
|
||
//时间
|
||
$('#id' + objmsg.VarId + '_Timestamp').text(objmsg.Timestamp);
|
||
$('#id' + objmsg.VarId + '_Timestamp').addClass('animated bounceIn');
|
||
setTimeout(function () {
|
||
$('#id' + objmsg.VarId + '_Timestamp').removeClass('bounceIn');
|
||
},
|
||
1500);
|
||
});
|
||
}
|
||
</script> |