@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:quote>Modbus驱动已支持大小端</wt:quote>
    <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>