FCC/Applications/UniversalApi_WebConsole_App/Views/OnlineMonitor/Upload.cshtml

@*
    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>