FCC/Framework/Edge.WebHost/Views/WebConsole/OnlineMonitor/pumps.cshtml

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@model Edge.WebHost.Models.OnlineMonitor.OnlineMonitorInfo
@{
    int maxPumpNumberInOnePage = 8;
    int screenWidth = 1280;
    int mainviewHeight = 570;
    string pumpViewImgPrePath = "images/onlineMonitor/pumpView/";
}
<script>
    var currentPage = 1;
    var totalPage = 1;
    var warningNozzles = new Array();
    var alarmNozzles = new Array();

    function GeneratePumpView(message) {
        if (message == null || message.data == null) {
            console.log("Invalid message got in pump view");
            return;
        }
        var pumpsDiv = document.getElementById("Pumps");
        if (pumpsDiv == null) {
            console.log("pumps div is null");
            return;
        }

        if (pumpsDiv.childNodes.length > 0) {
            var pl = pumpsDiv.childNodes.length;
            for (var cp = 0; cp < pl; cp++) {
                var c = pumpsDiv.childNodes[0];
               pumpsDiv.removeChild(c);
            }
        }
        if (warningNozzles.length > 0) {
            warningNozzles.splice(0,warningNozzles.length);
        }
        if (alarmNozzles.length > 0) {
            alarmNozzles.splice(0,alarmNozzles.length);
        }
        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 (d.VrState === "WARNING") {
                warningNozzles.push(d.SiteLevelDispenserId);
            } else if (d.VrState === "ALARM") {
                alarmNozzles.push(d.SiteLevelDispenserId);
            }
        });
        if (nozzlesArray.length > 0) {
            pumpMap.set(currentDispenserId, new Array().concat(nozzlesArray));
            nozzlesArray.splice(0,nozzlesArray.length);
        }
        totalPage = Math.ceil(pumpMap.size/@maxPumpNumberInOnePage);
        var dataLength =
            (pumpMap.size - @maxPumpNumberInOnePage * (currentPage - 1)) > @maxPumpNumberInOnePage
                ? @maxPumpNumberInOnePage
                : (pumpMap.size - @maxPumpNumberInOnePage * (currentPage - 1));

        var showedPumpCount = 0;
        var currentPumpMapIndex = 0;
        pumpMap.forEach(function (value, key) {
            if (!(showedPumpCount < dataLength)) {
                return;
            }
            currentPumpMapIndex++;
            if (@maxPumpNumberInOnePage*(currentPage-1)> (currentPumpMapIndex-1)) {
                return;
            }

            showedPumpCount++;
            var dispenserId = key;
            var nozzleCount = value.length;
            //如果只有单数个油枪时，左侧比右侧多一个，所以在生成页面时注意不能越界了
            var nozzleShouldBeDisplayed = Math.ceil(nozzleCount / 2);
            var currentIndex = 0;
            //pump block div
            var pumpBlockDiv = document.createElement("div");
            pumpBlockDiv.id = "Pump" + dispenserId + "_block";
            pumpBlockDiv.style = "position: relative; margin-left: 42px; margin-top: 42px; float: left; width: 265px; height: 222px;";

            //
            for (var cl = 0; cl < 3; cl++) {
                if (cl === 1) {
                    var pumpDiv = document.createElement("div");
                    pumpDiv.id = "pump" + dispenserId;
                    pumpDiv.style =
                        "position: relative;margin: 0px;float: left;width: 46%;height: 100%;text-align: center;";
                    var imgPump = document.createElement("img");
                    imgPump.id = "pump" + dispenserId + "_img";
                    imgPump.style = "position: relative; width: 113px; height: 222px; visibility: visible";
                    imgPump.src = "@(pumpViewImgPrePath)pump.png";
                    var pumpIdSpan = document.createElement("span");
                    pumpIdSpan.id = "pump_id_" + dispenserId;
                    pumpIdSpan.style = "position: absolute; left: 0px; top: 30%; width: 100%; text-align: center; font-size: 22px;";
                    pumpIdSpan.innerHTML = dispenserId;
                    pumpDiv.appendChild(imgPump);
                    pumpDiv.appendChild(pumpIdSpan);
                    pumpBlockDiv.appendChild(pumpDiv);
                } else {
                    var nozzleBlockDiv = document.createElement("div");
                    nozzleBlockDiv.id = "pump" + dispenserId + "_Nozzle_block" + cl;
                    nozzleBlockDiv.style = "position: relative; margin: 0px; float: left; width: 27%; height: 100%;";
                    for (var n = 0; n < nozzleShouldBeDisplayed; n++) {
                        if (currentIndex+1 > value.length) {
                            break;
                        }
                        var itemNormalVisibility = (value[currentIndex].VrState === "NORMAL") ? "visible" : "hidden";
                        var itemWarningVisibility = (value[currentIndex].VrState === "WARNING") ? "visible" : "hidden";
                        //var itemNormalVisibility = "visible";
                        //var itemWarningVisibility = "visible";
                        var itemAlarmVisibility = (value[currentIndex].VrState === "ALARM") ? "visible" : "hidden";
                        var itemDisconnectVisibility = (value[currentIndex].VrState === "DISCONNETED" || value[currentIndex].VrState === "NO_VR") ? "visible" : "hidden";
                        //var itemAlarmVisibility = "visible";
                        var idPreStr = "pump" + dispenserId + "_nozzle" + value[currentIndex].SiteLevelNozzleId;

                        var nozzleDiv = document.createElement("div");
                        nozzleDiv.id = idPreStr;
                        nozzleDiv.style = "position: relative; width: 100%; height:" + 100 / nozzleShouldBeDisplayed + "%;";

                        if (cl === 0) {
                            var nozzleNumberSpan = document.createElement("span");
                            nozzleNumberSpan.style = "float: left; width: 35%; height: 100%; font-size: 22px; text-align: right; line-height:" + 222 / nozzleShouldBeDisplayed + "px;";
                            nozzleNumberSpan.innerHTML = value[currentIndex].SiteLevelNozzleId;

                            var imgSpan = document.createElement("span");
                            imgSpan.style = "float: left; width: 65%; height: 100%;";

                            var imgNormal = document.createElement("img");
                            imgNormal.id = idPreStr + "_normal";
                            imgNormal.src = "@(pumpViewImgPrePath)normal.png";
                            imgNormal.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px; right: 0px;visibility:" + itemNormalVisibility + ";";
                            var imgWarning = document.createElement("img");
                            imgWarning.id = idPreStr + "_warning";
                            imgWarning.src = "@(pumpViewImgPrePath)warning.png";
                            imgWarning.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px; right: 0px;visibility:" + itemWarningVisibility + ";";
                            var imgAlarm = document.createElement("img");
                            imgAlarm.id = idPreStr + "_alarm";
                            imgAlarm.src = "@(pumpViewImgPrePath)alarm.png";
                            imgAlarm.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px; right: 0px;visibility:" + itemAlarmVisibility + ";";
                            var imgDisconnect = document.createElement("img");
                            imgDisconnect.id = idPreStr + "_disconnected";
                            imgDisconnect.src = "@(pumpViewImgPrePath)PumpViewDisconnected.png";
                            imgDisconnect.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px; right: 0px;visibility:" + itemDisconnectVisibility + ";";
                            imgSpan.appendChild(imgNormal);
                            imgSpan.appendChild(imgWarning);
                            imgSpan.appendChild(imgAlarm);
                            imgSpan.appendChild(imgDisconnect);

                            nozzleDiv.appendChild(nozzleNumberSpan);
                            nozzleDiv.appendChild(imgSpan);
                        }
                        else if (cl === 2) {
                            var imgSpan2 = document.createElement("span");
                            imgSpan2.style = "float: left; width: 65%; height: 100%;";

                            var imgNormal2 = document.createElement("img");
                            imgNormal2.id = idPreStr + "_normal";
                            imgNormal2.src = "@(pumpViewImgPrePath)normal.png";
                            imgNormal2.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px;visibility:" + itemNormalVisibility + ";";
                            var imgWarning2 = document.createElement("img");
                            imgWarning2.id = idPreStr + "_warning";
                            imgWarning2.src = "@(pumpViewImgPrePath)warning.png";
                            imgWarning2.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px;visibility:" + itemWarningVisibility + ";";
                            var imgAlarm2 = document.createElement("img");
                            imgAlarm2.id = idPreStr + "_alarm";
                            imgAlarm2.src = "@(pumpViewImgPrePath)alarm.png";
                            imgAlarm2.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px;visibility:" + itemAlarmVisibility + ";";
                            var imgDisconnect2 = document.createElement("img");
                            imgDisconnect2.id = idPreStr + "_disconnected";
                            imgDisconnect2.src = "@(pumpViewImgPrePath)PumpViewDisconnected.png";
                            imgDisconnect2.style = "position: absolute; top:" + ((222 / nozzleShouldBeDisplayed - 38) / 2) + "px;visibility:" + itemDisconnectVisibility + ";";
                            imgSpan2.appendChild(imgNormal2);
                            imgSpan2.appendChild(imgWarning2);
                            imgSpan2.appendChild(imgAlarm2);
                            imgSpan2.appendChild(imgDisconnect2);
                            nozzleDiv.appendChild(imgSpan2);
                            var nozzleNumberSpan2 = document.createElement("span");
                            nozzleNumberSpan2.style = "float: left; width: 35%; height: 100%;font-size: 22px; text-align:left;line-height:" + 222 / nozzleShouldBeDisplayed + "px;";
                            nozzleNumberSpan2.innerHTML = value[currentIndex].SiteLevelNozzleId;
                            nozzleDiv.appendChild(nozzleNumberSpan2);
                        }
                        nozzleBlockDiv.appendChild(nozzleDiv);
                        currentIndex++;
                    }
                    pumpBlockDiv.appendChild(nozzleBlockDiv);
                }
            }
            pumpsDiv.appendChild(pumpBlockDiv);
        });
        if (document.getElementById("PumpsPage_Bottom_pages") != null) {
            for (var p = 1; p < 6; p++) {
                var imgCurrentPageIdStr = "PumpsPage_Bottom_pages_img_"+p;
                var imgCurrentPageNotShowedIdStr = "PumpsPage_Bottom_pages_notshowed_img_"+p;
                if (p > totalPage) {
                    if (document.getElementById(imgCurrentPageIdStr) != null)
                        document.getElementById(imgCurrentPageIdStr).style.visibility = "hidden";
                    if (document.getElementById(imgCurrentPageNotShowedIdStr) != null)
                        document.getElementById(imgCurrentPageNotShowedIdStr).style.visibility = "hidden";
                } else if (p === currentPage || (p === 5 && totalPage > p)) {
                    if (document.getElementById(imgCurrentPageIdStr) != null)
                        document.getElementById(imgCurrentPageIdStr).style.visibility = "visible";
                    if (document.getElementById(imgCurrentPageNotShowedIdStr) != null)
                        document.getElementById(imgCurrentPageNotShowedIdStr).style.visibility = "hidden";
                }else {
                    if (document.getElementById(imgCurrentPageIdStr) != null)
                        document.getElementById(imgCurrentPageIdStr).style.visibility = "hidden";
                    if (document.getElementById(imgCurrentPageNotShowedIdStr) != null)
                        document.getElementById(imgCurrentPageNotShowedIdStr).style.visibility = "visible";
                }
            }
        }

    }
    //process vr state change event
    function UpdateVrState(message) {
        console.log("message received:"+message);
        if (message != null && message.NozzleStatus != null && message.NozzleStatus.data != null) {
            message.NozzleStatus.data.forEach(
                function(d) {
                    var nozzleId = d.SiteLevelNozzleId;
                    var dispenserId = d.SiteLevelDispenserId;
                    var nozzleDiv = document.getElementById("pump" + dispenserId + "_nozzle" + nozzleId);
                    if (!(warningNozzles.indexOf(nozzleId) < 0)) {
                        if (d.VrState !== "WARNING")
                            warningNozzles.splice(warningNozzles.indexOf(nozzleId), 1);
                    } else if (!(alarmNozzles.indexOf(nozzleId) < 0)) {
                        if (d.VrState !== "ALARM")
                            alarmNozzles.splice(alarmNozzles.indexOf(nozzleId), 1);
                    }
                    if (d.VrState === "WARNING" && warningNozzles.indexOf(nozzleId)<0) warningNozzles.push(nozzleId);
                    else if (d.VrState === "ALARM" && alarmNozzles.indexOf(nozzleId)<0) alarmNozzles.push(nozzleId);
                    if (nozzleDiv != null) {
                        var itemNormalVisibility = (d.VrState === "NORMAL") ? "visible" : "hidden";
                        var itemWarningVisibility = (d.VrState === "WARNING") ? "visible" : "hidden";
                        var itemAlarmVisibility = (d.VrState === "ALARM") ? "visible" : "hidden";
                        var itemDisconnectVisibility = (d.VrState === "DISCONNETED") ? "visible" : "hidden";
                        var preIdStr = "pump" + dispenserId + "_nozzle" + nozzleId;
                        var imgNormal = document.getElementById(preIdStr + "_normal");
                        var imgWarning = document.getElementById(preIdStr + "_warning");
                        var imgAlarm = document.getElementById(preIdStr + "_alarm");
                        var imgDisconnected = document.getElementById(preIdStr + "_disconnected");
                        if (imgNormal != null) imgNormal.style.visibility = itemNormalVisibility;
                        if (imgWarning != null) imgWarning.style.visibility = itemWarningVisibility;
                        if (imgAlarm != null) imgAlarm.style.visibility = itemAlarmVisibility;
                        if (imgDisconnected != null) imgDisconnected.style.visibility = itemDisconnectVisibility;
                    } else {
                        console.log("nozzle " + nozzleId + "is not exist on UI");
                    }
                });
        } else {
            console.log("Invalid vr state change event");
        }
        UpdateHeadMessage();
    }

    //Update the message on header
    function UpdateHeadMessage() {
        var pumpsHead = document.getElementById("PumpsPage_Head");
        var normalHead = document.getElementById("PumpsPage_Head_Status_normal");
        var warningHead = document.getElementById("PumpsPage_Head_Status_warning");
        var alarmHead = document.getElementById("PumpsPage_Head_Status_alarm");
        var textSpan = document.getElementById("head_left_text");
        if (pumpsHead == null || normalHead == null || warningHead == null || alarmHead == null || textSpan ==null) {
            return;
        }
        var message = "";
        if (alarmNozzles.length > 0) {

            alarmNozzles.forEach(function(d) {
                message = message+d + "，";
            });
            normalHead.style.visibility = "hidden";
            warningHead.style.visibility = "hidden";
            alarmHead.style.visibility = "visible";
            message = message + "号枪处于报警状态";
            textSpan.style.textAlign = "left";
            textSpan.innerHTML = message;
            return;
        }
        if (warningNozzles.length > 0) {
            warningNozzles.forEach(function(d) {
                message = message+d + "，";
            });
            normalHead.style.visibility = "hidden";
            warningHead.style.visibility = "visible";
            alarmHead.style.visibility = "hidden";
            message = message + "号枪处于预警状态";
            textSpan.style.textAlign = "left";
            textSpan.innerHTML = message;
            return;
        }
    }
</script>
<div id="Pumps" style="position: relative; margin: 0 auto; width: (@screenWidth)px; height: (@mainviewHeight)px;">
</div>
<script src="~/js/mqtt.min.js"></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 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("@Model.mqttConnectionString", options); // you add a ws:// url here
    //建立连接
    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/event/OnVaporRecoveryStateChange/post',
                function (err) {
                    if (!err) {
                        console.log("subscribe vr state change event successfully");
                    } else {
                        console.log("subscribe vr state change event failed"+err);
                    }
                });
            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") {
                GeneratePumpView(JSON.parse(message.toString()));
                return;
            }
            if (topic === '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/event/OnVaporRecoveryStateChange/post') {
                UpdateVrState(JSON.parse(message.toString()));
                return;
            }
        });


    function processConfigData(message) {
        var WarningValueMin = message.onlineWatchConfig.WarningValueMin;
        var WarningValueMax = message.onlineWatchConfig.WarningValueMax;
        console.log(message);
        //var a = document.getElementById("testmqqt");
        //if (a != null) a.innerHTML = WarningValueMin;
    }

    //// 用户程序点击事件
    function Onmqtttest() {
        message = "message from browser with websocket"; // 消息内容
        //发布主题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;

    }
    //显示前一页
    function ShowPreviousPage() {
        if (currentPage === 1) {
            alert("已经是第一页！");
            return;
        }
        currentPage--;
        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData');

    }
    //显示下一页
    function ShowNextPage() {
        if (currentPage === totalPage) {
            alert("已经是最后一页！");
            return;
        }
        currentPage++;
        client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData');
    }

</script>