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

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@model Applications.UniversalApi_WebConsole_App.Models.OnlineMonitor.OnlineMonitorInfo
@{
    int screenWidth = 1280;
    int mainviewHeight = 570;
    int maxNozzleNumberInOnePage = 12;
    int maxNozzlewidth = 176;
    int minNozzlewidth = 129;
    //including the right margin at the end of a row,current display 6 nozzles in one row
    int marginleft = (screenWidth - maxNozzlewidth * 6) / 7;
    int nozzleHeight = 259;
    int margintop = (mainviewHeight - nozzleHeight * 2) / 3;
    int textlableHeight = 34;//人民币未付款图标高度/宽度
    int nozzleImagHeight = 123;
    int lableFontSize = 22;
    int imgPaidHeight = 25;
    int imgPaidWidth = 20;
    int alImgWidth = 44;
    int alImgHeight = 43;

    int headRightHeight = 44;
    int alLogoWidth = 61;
    int smartFuelLogoWidth = 43;
    int alLogoTop = 0;
    //int alLogoTop = headRightHeight + 10;
    string imgPrePath = "/images/onlineMonitor/nozzleView/";
}
<script>
    var currentPage = 1;
    var oldPage = currentPage;
    var totalPage = 1;
    var currentView = "AL";
    //var alLogoVisibility = currentView === "AL" ? "hidden" : "visible";
    //var smartFuelLogoVisibility = currentView === "SmartFuel" ? "hidden" : "visible";
    var alLogoVisibility = "hidden";
    var smartFuelLogoVisibility = "hidden";

    var warningNozzles = new Array();
    var alarmNozzles = new Array();
    //Generate AL nozzle view according messages got from mqtt
    function GenerateNozzleView(message) {
        var nozzlesDiv = document.getElementById("nozzles");
        if (nozzlesDiv == null) {
            console.log("nozzles div is null");
            return;
        }
        if (message == null || message.data == null) {
            console.log("Invalid message received for GenerateNozzleView");
            return;
        }
        if (warningNozzles.length > 0) {
            warningNozzles.splice(0,warningNozzles.length);
        }
        if (alarmNozzles.length > 0) {
            alarmNozzles.splice(0,alarmNozzles.length);
        }
        totalPage = Math.ceil(message.data.length / @(maxNozzleNumberInOnePage));// +(message.data.length % (@maxNozzleNumberInOnePage) === 0 ? 0 : 1);
        if (currentPage > totalPage) {
            currentPage = totalPage;
            console.log("configuration changed???");
        }
        message.data.forEach(function(d) {
            if (d.VrState === "WARNING") {
                warningNozzles.push(d.SiteLevelDispenserId);
            } else if (d.VrState === "ALARM") {
                alarmNozzles.push(d.SiteLevelDispenserId);
            }
        });
        var dataLength =
            (message.data.length - @maxNozzleNumberInOnePage * (currentPage - 1)) > @maxNozzleNumberInOnePage
                ? @maxNozzleNumberInOnePage
                : (message.data.length - @maxNozzleNumberInOnePage * (currentPage - 1));

        //test
        //var temp1 = message.data.slice(2,3);
        var temp = message.data.slice(@maxNozzleNumberInOnePage * (currentPage - 1), @maxNozzleNumberInOnePage * (currentPage - 1)+dataLength);
        temp.forEach(function(d) {
            var nozzleDiv = document.createElement("div");
            nozzleDiv.id = "nozzle_" + d.SiteLevelNozzleId;
            nozzleDiv.style =
                "position:relative; float: left;margin-left:"+@marginleft+"px; margin-top:" +@(margintop)+"px; width:" +@(maxNozzlewidth)+"px; height:"+@(nozzleHeight)+"px;";

            var nozzleIdDiv = document.createElement("div");
            nozzleIdDiv.id = "nozzleId_" + d.SiteLevelNozzleId;
            nozzleIdDiv.style =
                "position: relative; float:left;width: 100%; height:"+@(textlableHeight)+"px; text-align: left; font-size: 22px;font-weight: bold";
            nozzleIdDiv.innerHTML = d.SiteLevelNozzleId;

            var nozzleImgDiv = document.createElement("div");
            nozzleImgDiv.id = "nozzleImg_" + d.SiteLevelNozzleId;
            nozzleImgDiv.style = "position: relative; float: left;width: 100%; height:" +@(nozzleImagHeight)+"px; text-align: center;";

            var fuelingStatusIdleVisible = (d.FuelingStatus === "IDLE") ? "visible" : "hidden";
            var fuelingStatusFuellingVisible = (d.FuelingStatus === "FUELING") ? "visible" : "hidden";
            //对于油气回收来说目前只有两个状态IDLE,FUELLING
            var imgIdle = document.createElement("img");
            imgIdle.id = "nozzleImage_Idle_" + d.SiteLevelNozzleId;
            imgIdle.style = "visibility:" + fuelingStatusIdleVisible;
            imgIdle.src = "@(imgPrePath)IDEL.png";

            var imgFuelling = document.createElement("img");
            imgFuelling.id = "nozzleImage_Fuelling_" + d.SiteLevelNozzleId;
            imgFuelling.style = "position: absolute; left: 0px;visibility:"+fuelingStatusFuellingVisible;
            imgFuelling.src = "@(imgPrePath)Fuelling.png";

            var alImgNormalVisible = (d.FuelingStatus === "IDLE" && d.VrState === "NORMAL") ? "visible" : "hidden";
            var alImgWarningVisible = (d.FuelingStatus === "IDLE" && d.VrState ==="WARNING")? "visible" : "hidden";
            var alImgAlarmVisible = (d.FuelingStatus === "IDLE" && d.VrState ==="ALARM")? "visible" : "hidden";
            var alImgDisconnectVisible = (d.FuelingStatus === "IDLE" && d.VrState ==="DISCONNETED")? "visible" : "hidden";

            var imgAlNormal = document.createElement("img");
            imgAlNormal.id = "nozzleALImage_Normal_" + d.SiteLevelNozzleId;
            imgAlNormal.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgNormalVisible+";";
            imgAlNormal.src = "@(imgPrePath)NozzleALNormal.png";
            var imgAlWarning = document.createElement("img");
            imgAlWarning.id = "nozzleALImage_Warning_" + d.SiteLevelNozzleId;
            imgAlWarning.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgWarningVisible+";";
            imgAlWarning.src = "@(imgPrePath)NozzleALWarning.png";
            var imgAlAlarm = document.createElement("img");
            imgAlAlarm.id = "nozzleALImage_Alarm_" + d.SiteLevelNozzleId;
            imgAlAlarm.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgAlarmVisible+";";
            imgAlAlarm.src = "@(imgPrePath)NozzleALAlarm.png";
            var imgAlDisconnect = document.createElement("img");
            imgAlDisconnect.id = "nozzleALImage_Disconnect_" + d.SiteLevelNozzleId;
            imgAlDisconnect.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgDisconnectVisible+";";
            imgAlDisconnect.src = "@(imgPrePath)NozzleALDisconnect.png";

            nozzleImgDiv.appendChild(imgIdle);
            nozzleImgDiv.appendChild(imgFuelling);
            nozzleImgDiv.appendChild(imgAlNormal);
            nozzleImgDiv.appendChild(imgAlWarning);
            nozzleImgDiv.appendChild(imgAlAlarm);
            nozzleImgDiv.appendChild(imgAlDisconnect);

            //油气回收界面只有气（升）、液（加油升数）、汽液比值；现只添加三个div即可
            var nozzleGasDiv = document.createElement("div");
            nozzleGasDiv.id = "nozzleGas_" + d.SiteLevelNozzleId;
            nozzleGasDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px; font-size:22px; font-weight: bold;";
            nozzleGasDiv.innerHTML = "气："+d.VaporVolume;

            var nozzleLiterDiv = document.createElement("div");
            nozzleLiterDiv.id = "nozzleLiter_" + d.SiteLevelNozzleId;
            nozzleLiterDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px; font-size:22px; font-weight: bold;";
            nozzleLiterDiv.innerHTML = "升："+d.LiquidVolume;

            var nozzleAlDiv = document.createElement("div");
            nozzleAlDiv.id = "nozzleAL_" + d.SiteLevelNozzleId;
            nozzleAlDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px; font-size:22px; font-weight: bold;";
            nozzleAlDiv.innerHTML = "气液比 "+d.VaporLiquidRatio;

            nozzleDiv.appendChild(nozzleIdDiv);
            nozzleDiv.appendChild(nozzleImgDiv);
            nozzleDiv.appendChild(nozzleGasDiv);
            nozzleDiv.appendChild(nozzleLiterDiv);
            nozzleDiv.appendChild(nozzleAlDiv);

            nozzlesDiv.appendChild(nozzleDiv);
        });
        UpdateHeadMessage();
        UpdateFooterPage();
    }

    function UpdateFooterPage() {
        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";
                }
            }
        }
    }

    function ClearOldItems() {
        var nozzlesDiv = document.getElementById("nozzles");
        if (nozzlesDiv != null) {
            for (var cl = 1; cl < @(maxNozzleNumberInOnePage+1); cl++) {
                var ocn = document.getElementById("nozzle_" + (cl+@(maxNozzleNumberInOnePage)*(currentPage-1)));
                if (ocn != null) nozzlesDiv.removeChild(ocn);
            }
        }
    }
    function UpdateVrState(message) {
        if (message != null && message.NozzleStatus != null && message.NozzleStatus.data != null) {
            message.NozzleStatus.data.forEach(
                function (d) {
                    var nozzleId = d.SiteLevelNozzleId;
                    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);

                    var nozzleDiv = document.getElementById("nozzle_" + nozzleId);
                    if (nozzleDiv != null) {
                        var fuelingStatusIdleVisible = (d.FuelingStatus === "IDLE") ? "visible" : "hidden";
                        var fuelingStatusFuellingVisible = (d.FuelingStatus === "FUELING") ? "visible" : "hidden";
                        var nozzleImgIdle = document.getElementById("nozzleImage_Idle_" + d.SiteLevelNozzleId);
                        var nozzleImgFulling = document.getElementById("nozzleImage_Fuelling_" + d.SiteLevelNozzleId);
                        if (nozzleImgIdle != null) nozzleImgIdle.style.visibility = fuelingStatusIdleVisible;
                        if (nozzleImgFulling != null) nozzleImgFulling.style.visibility = fuelingStatusFuellingVisible;

                        var alImgNormalVisible = (d.FuelingStatus === "IDLE" && d.VrState === "NORMAL") ? "visible" : "hidden";
                        var alImgWarningVisible = (d.FuelingStatus === "IDLE" && d.VrState ==="WARNING")? "visible" : "hidden";
                        var alImgAlarmVisible = (d.FuelingStatus === "IDLE" && d.VrState ==="ALARM")? "visible" : "hidden";
                        var alImgDisconnectVisible = (d.FuelingStatus === "IDLE" && d.VrState === "DISCONNETED") ? "visible" : "hidden";
                        if(document.getElementById("nozzleALImage_Normal_"+d.SiteLevelNozzleId)!=null)document.getElementById("nozzleALImage_Normal_"+d.SiteLevelNozzleId).style.visibility=alImgNormalVisible;
                        if (document.getElementById("nozzleALImage_Warning_"+d.SiteLevelNozzleId) != null) document.getElementById("nozzleALImage_Warning_"+d.SiteLevelNozzleId).style.visibility =alImgWarningVisible;
                        if (document.getElementById("nozzleALImage_Alarm_"+d.SiteLevelNozzleId) != null) document.getElementById("nozzleALImage_Alarm_"+d.SiteLevelNozzleId).style.visibility =alImgAlarmVisible;
                        if(document.getElementById("nozzleALImage_Disconnect_"+d.SiteLevelNozzleId)!=null)document.getElementById("nozzleALImage_Disconnect_"+d.SiteLevelNozzleId).style.visibility=alImgDisconnectVisible;

                        if (document.getElementById("nozzleGas_" + d.SiteLevelNozzleId) != null)
                            document.getElementById("nozzleGas_" + d.SiteLevelNozzleId).innerHTML = "气：" + d.VaporVolume;
                        if (document.getElementById("nozzleLiter_" + d.SiteLevelNozzleId) != null)
                            document.getElementById("nozzleLiter_" + d.SiteLevelNozzleId).innerHTML = "升：" + d.LiquidVolume;
                        if (document.getElementById("nozzleAL_" + d.SiteLevelNozzleId) != null)
                            document.getElementById("nozzleAL_" + d.SiteLevelNozzleId).innerHTML = "气液比 " + d.VaporLiquidRatio;

                    } else {
                        console.log("nozzle:"+nozzleId+" is not exist on web UI");
                    }
                });
            UpdateHeadMessage();
        } else {
            console.log("Invalid vr state change envent received");
        }
    }

    //Generate nozzle view for smart fuel
    function GenerateSmartFuelNozzleView(message) {
        var nozzlesDiv = document.getElementById("nozzles");
        @*for (var cl = 0; cl < @maxNozzleNumberInOnePage; cl++) {
            var ocn = document.getElementById("nozzle_" + (cl+@(maxNozzleNumberInOnePage)*(oldPage-1)+1));
            if (ocn != null) nozzlesDiv.removeChild(ocn);
        }*@
        if (nozzlesDiv == null) {
            console.log("nozzles div is null");
            return;
        }
        if (message == null || message.data == null) {
            console.log("Invalid message received for GenerateNozzleView");
            return;
        }
        totalPage = Math.ceil(message.data.length / @(maxNozzleNumberInOnePage));//message.data.length / @(maxNozzleNumberInOnePage)+(message.data.length % (@maxNozzleNumberInOnePage) === 0 ? 0 : 1);

        if (currentPage > totalPage) {
            currentPage = totalPage;
            console.log("configuration changed???");
        }
        var dataLength =
            (message.data.length - @maxNozzleNumberInOnePage * (currentPage - 1)) > @maxNozzleNumberInOnePage
                ? @maxNozzleNumberInOnePage
                : (message.data.length - @maxNozzleNumberInOnePage * (currentPage - 1));

        var temp = message.data.slice(@maxNozzleNumberInOnePage * (currentPage - 1), @maxNozzleNumberInOnePage * (currentPage - 1)+dataLength);

        temp.forEach(function (d) {
            var nozzleId = d.SiteLevelNozzleId;
            var nozzleDiv = document.createElement("div");
            nozzleDiv.id = "nozzle_" + nozzleId;
            nozzleDiv.style =
                "position:relative; float: left;margin-left:"+@marginleft+"px; margin-top:" +@(margintop)+"px; width:" +@(maxNozzlewidth)+"px; height:"+@(nozzleHeight)+"px;";

            var nozzleIdDiv = document.createElement("div");
            nozzleIdDiv.id = "nozzleId_" + nozzleId;
            nozzleIdDiv.style =
                "position: relative; float:left;width: 100%; height:"+@(textlableHeight)+"px; text-align: left; font-size: 22px;font-weight: bold";
            nozzleIdDiv.innerHTML = nozzleId;

            var nozzleImgDiv = document.createElement("div");
            nozzleImgDiv.id = "nozzleImg_" + nozzleId;
            nozzleImgDiv.style = "position: relative; float: left;width: 100%; height:" +@(nozzleImagHeight)+"px; text-align: center;";
            //油枪状态图
            var fuelingStatusIdleVisible = (d.FuelingStatus === "IDLE") ? "visible" : "hidden";
            var fuelingStatusFuellingVisible = (d.FuelingStatus === "FUELING") ? "visible" : "hidden";
            var fuelingStatusCallingVisible = "hidden";
            var fuelingStatusAuthrizedVisible = "hidden";
            var fuelingStatusDisconnectVisible = "hidden";
            var fuelingStatusClosedVisible = "hidden";
            //IDLE,CALLING,AUTHORIZED,FUELLING,DISCONNECT,油枪未连接
            var imgIdle = document.createElement("img");
            imgIdle.id = "nozzleImage_Idle_" + nozzleId;
            imgIdle.style = "visibility:" + fuelingStatusIdleVisible;
            imgIdle.src = "@(imgPrePath)IDEL.png";
            var imgCalling = document.createElement("img");
            imgCalling.id = "nozzleImage_Calling_" + nozzleId;
            imgCalling.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusCallingVisible+";";
            imgCalling.src ="@(imgPrePath)CALLING.png";
            var imgAuthorized= document.createElement("img");
            imgAuthorized.id = "nozzleImage_Authorized_" + nozzleId;
            imgAuthorized.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusAuthrizedVisible+";";
            imgAuthorized.src = "@(imgPrePath)Authorize.png";
            var imgFuelling = document.createElement("img");
            imgFuelling.id = "nozzleImage_Fuelling_" + nozzleId;
            imgFuelling.style = "position: absolute; left: 0px;visibility:"+fuelingStatusFuellingVisible;
            imgFuelling.src ="@(imgPrePath)Fuelling.png";
            var imgDisconnect= document.createElement("img");
            imgDisconnect.id = "nozzleImage_Disconnect_" + nozzleId;
            imgDisconnect.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusDisconnectVisible+";";
            imgDisconnect.src = "@(imgPrePath)Offline.png";
            var imgClosed= document.createElement("img");
            imgClosed.id = "nozzleImage_Closed_" + nozzleId;
            imgClosed.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusClosedVisible+";";
            imgClosed.src = "@(imgPrePath)Closed.png";
            //加油界面油气回收图标暂时都隐藏，之后根据油气回收的消息更新界面
            var alImgNormalVisible = "hidden";
            var alImgWarningVisible = "hidden";
            var alImgAlarmVisible = "hidden";
            var alImgDisconnectVisible = "hidden";

            var imgAlNormal = document.createElement("img");
            imgAlNormal.id = "nozzleALImage_Normal_" + nozzleId;
            imgAlNormal.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgNormalVisible+";";
            imgAlNormal.src = "@(imgPrePath)NozzleALNormal.png";
            var imgAlWarning = document.createElement("img");
            imgAlWarning.id = "nozzleALImage_Warning_" + nozzleId;
            imgAlWarning.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgWarningVisible+";";
            imgAlWarning.src ="@(imgPrePath)NozzleALWarning.png";
            var imgAlAlarm = document.createElement("img");
            imgAlAlarm.id = "nozzleALImage_Alarm_" + nozzleId;
            imgAlAlarm.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgAlarmVisible+";";
            imgAlAlarm.src = "@(imgPrePath)NozzleALAlarm.png";
            var imgAlDisconnect = document.createElement("img");
            imgAlDisconnect.id = "nozzleALImage_Disconnect_" + nozzleId;
            imgAlDisconnect.style = "position: absolute; top:"+@(nozzleImagHeight-alImgHeight)+"px; left:"+@(maxNozzlewidth-alImgWidth)+"px;visibility:"+alImgDisconnectVisible+";";
            imgAlDisconnect.src = "@(imgPrePath)NozzleALDisconnect.png";
            nozzleImgDiv.appendChild(imgIdle);
            nozzleImgDiv.appendChild(imgCalling);
            nozzleImgDiv.appendChild(imgAuthorized);
            nozzleImgDiv.appendChild(imgFuelling);
            nozzleImgDiv.appendChild(imgDisconnect);
            nozzleImgDiv.appendChild(imgClosed);
            nozzleImgDiv.appendChild(imgAlNormal);
            nozzleImgDiv.appendChild(imgAlWarning);
            nozzleImgDiv.appendChild(imgAlAlarm);
            nozzleImgDiv.appendChild(imgAlDisconnect);

            var imgNotPaidVisible = "visible";
            var imgPaidVisible = "visible";
            var nozzleAmountDiv = document.createElement("div");
            nozzleAmountDiv.id = "nozzleAmount_" + nozzleId;
            nozzleAmountDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px;";
            var nozzleAmountImgDiv = document.createElement("div");
            nozzleAmountImgDiv.id = "nozzleAmount_img_"+nozzleId;
            nozzleAmountImgDiv.style = "position: relative;float: left;width:" +@(textlableHeight)+"px; height:100%;";
            var nozzleAmountUnpaidImg = document.createElement("img");
            nozzleAmountUnpaidImg.id = "nozzleAmount_img_Unpaid_" + nozzleId;
            nozzleAmountUnpaidImg.style = "visibility:"+imgNotPaidVisible;
            nozzleAmountUnpaidImg.src = "@(imgPrePath)Payable.png";
            var nozzleAmountPaidImg = document.createElement("img");
            nozzleAmountPaidImg.id = "nozzleAmount_img_Paid_" + nozzleId;
            nozzleAmountPaidImg.style = "position: absolute; top:"+@((textlableHeight-imgPaidHeight)/2)+"px; left:"+@((textlableHeight-imgPaidWidth)/2)+"px;visibility:"+imgPaidVisible+";";
            nozzleAmountPaidImg.src = "@(imgPrePath)Paid.png";
            nozzleAmountImgDiv.appendChild(nozzleAmountUnpaidImg);
            nozzleAmountImgDiv.appendChild(nozzleAmountPaidImg);

            var nozzleAmountValueDiv = document.createElement("div");
            nozzleAmountValueDiv.id = "nozzleAmount_value_" + nozzleId;
            nozzleAmountValueDiv.style = "position: relative;float: left;width:" +@(maxNozzlewidth-textlableHeight)+"px; height:100%;";
            nozzleAmountValueDiv.innerHTML = " ："+"12345.00";
            nozzleAmountDiv.appendChild(nozzleAmountImgDiv);
            nozzleAmountDiv.appendChild(nozzleAmountValueDiv);


            var nozzleAccumulatorTextDiv = document.createElement("div");
            nozzleAccumulatorTextDiv.id = "nozzleAccumulatorText_" + nozzleId;
            nozzleAccumulatorTextDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px; font-size:22px; font-weight: bold;";
            nozzleAccumulatorTextDiv.innerHTML = "累计数：";

            var nozzleAccumulatorValueDiv = document.createElement("div");
            nozzleAccumulatorValueDiv.id = "nozzleAccumulatorValue_" + nozzleId;
            nozzleAccumulatorValueDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight)+"px; font-size:22px; font-weight: bold;";
            nozzleAccumulatorValueDiv.innerHTML = "1234567.0000";

            nozzleDiv.appendChild(nozzleIdDiv);
            nozzleDiv.appendChild(nozzleImgDiv);
            nozzleDiv.appendChild(nozzleAmountDiv);
            nozzleDiv.appendChild(nozzleAccumulatorTextDiv);
            nozzleDiv.appendChild(nozzleAmountValueDiv);

            nozzlesDiv.appendChild(nozzleDiv);
        });
        UpdateFooterPage();
    }
    //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="nozzles" style="position: relative; width:@(screenWidth)px; height:@(mainviewHeight)px;">
    @*<div id="nozzles_1" style="position: relative; float: left;margin-left:@(marginleft)px; width:@(maxNozzlewidth)px; height:@(nozzleHeight)px; border: 1px solid #00bfff">
        </div>
        <div id="nozzles_2" style="position: relative; float: left;margin-left:@(marginleft)px; width:@(maxNozzlewidth)px; height:@(nozzleHeight)px; border: 1px solid #00bfff">
        </div>*@
    @* <input type="button" onclick="GenerateView(12)" value="GenerateView" />*@

    @*@for (int i = 0; i < 12; i++)
        {
            <div id="nozzles_@i" style="position:relative; float: left;margin-left:@(marginleft)px; margin-top: @(margintop)px; width: @(maxNozzlewidth)px; height: @(nozzleHeight)px;border: 1px solid #00bfff">
                <div id="nozzleId_@i" style="position: relative; float:left;width: 100%; height: @(textlableHeight)px; text-align: left; font-size: 22px;font-weight: bold">@i</div>
                <div id="nozzleImg_@i" style="position: relative; float: left;width: 100%; height: @(nozzleImagHeight)px; text-align: center">
                    <img id="nozzleImage_Idle_@i" src="/image/online/油枪IDEL.png" style="visibility: visible" />
                    <img id="nozzleImage_Calling_@i" src="/image/online/油枪CALLING.png" style="position: absolute; top: 0px; left:@((maxNozzlewidth-minNozzlewidth)/2)px;visibility: visible" />
                    <img id="nozzleImage_Authorized_@i" src="/image/online/油枪授权.png" style="position: absolute; top: 0px; left:@((maxNozzlewidth-minNozzlewidth)/2)px;visibility: visible" />
                    <img id="nozzleImage_Fuelling_@i" src="/image/online/油枪加油中.png" style="position: absolute; left: 0px;visibility: visible" />
                    <img id="nozzleImage_Closed_@i" src="/image/online/油枪未连接.png" style="position: absolute; top: 0px; left:@((maxNozzlewidth-minNozzlewidth)/2)px;visibility: visible" />
                    <img id="nozzleImage_Disconnect_@i" src="/image/online/油枪断开.png" style="position: absolute; top: 0px; left:@((maxNozzlewidth-minNozzlewidth)/2)px;visibility: visible" />
                    <img id="nozzleALImage_Normal_@i" src="/image/online/normal.png" style="position: absolute; top:@(nozzleImagHeight-alImgWidth)px; left:@(maxNozzlewidth-alImgWidth)px;visibility: visible" />
                    <img id="nozzleALImage_Warning_@i" src="/image/online/warning.png" style="position: absolute; top:@(nozzleImagHeight-alImgWidth)px; left:@(maxNozzlewidth-alImgWidth)px;visibility: visible" />
                    <img id="nozzleALImage_Alarm_@i" src="/image/online/alarm.png" style="position: absolute; top:@(nozzleImagHeight-alImgWidth)px; left:@(maxNozzlewidth-alImgWidth)px;visibility: visible" />
                </div>
                <div id="nozzleAmount_@i" style="position: relative; float: left;width: 100%; height:@(textlableHeight)px; border: 1px solid#00bfff;">
                    <div id="nozzleAmount_img_@i" style="position: relative;float: left;width:@(textlableHeight+5)px; height:100%;border: 1px solid#00bfff;">
                        <img id="nozzleAmount_img_notPaid_@i" src="/image/online/人民币标志NotPaid.png" />
                        <img id="nozzleAmount_img_Paid_@i" src="/image/online/人民币标志已付款.png" style="position: absolute; top:@((textlableHeight-imgPaidHeight)/2)px; left:@((textlableHeight-imgPaidWidth)/2)px;" />
                        <span style="position: absolute; left: @(textlableHeight)px; text-align: center;line-height: @(textlableHeight)px; font-size: @(lableFontSize)px; font-weight:bold;">:</span>
                    </div>
                    <div>
                    </div>
                </div>
                <div id="nozzleLiter_@i" style="position: relative; float: left; width: 100%; height:@(textlableHeight)px;font-size: @(lableFontSize)px; font-weight: bold;border: 1px solid#00bfff;">
                    <div id="nozzleLiter_img_@i" style="position: relative;float:left;width:@(textlableHeight)px; height:100%;">
                        升：
                    </div>
                    <div id="nozzleLiter_text_@i" style="position: relative; float: left;">
                        1234.00
                    </div>
                </div>
                <div id="nozzleAL_@i" style="position: relative; float: left;width: 100%; height: @(textlableHeight)px; font-size: @(lableFontSize)px; font-weight: bold;border: 1px solid#00bfff;">
                    汽液比  1.3
                </div>
            </div>
        }*@
</div>

<img id="ALLogo" src="@(imgPrePath)AL.png" onclick="LogonClicked(this.id)" style="position: absolute; left:@(screenWidth-alLogoWidth-10)px; top:@(alLogoTop)px;visibility:visible;" />
<img id="SmartFuelLogo" src="@(imgPrePath)SmartFuel.png" onclick="LogonClicked(this.id)" style="position: absolute; left:@(screenWidth-smartFuelLogoWidth-10)px; top:@(alLogoTop)px; visibility: hidden;" />
<script>
    if (document.getElementById("ALLogo") != null)
        document.getElementById("ALLogo").style.visibility = alLogoVisibility;
    if (document.getElementById("SmartFuelLogo") != null)
        document.getElementById("SmartFuelLogo").style.visibility = smartFuelLogoVisibility;
</script>
<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 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("@Model.mqttConnectionString", options); // you add a ws:// url here

    ////建立连接
    client.on('connect',
        function () {
            var a = document.getElementById("testmqqt");
            if (a != null) a.innerHTML = "connected";
            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.on('error',
        function (err) {
            console.log("error happens, will close the client");
            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") {
                ClearOldItems();
                GenerateNozzleView(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 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 LogonClicked(id) {
        var logo = document.getElementById(id);
        if (logo != null) logo.style.visibility = "hidden";
        ClearOldItems();
        if (id === "ALLogo" && client != null) {
            currentView = "AL";
            client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData',
                "Hello mqtt");
            if (document.getElementById("SmartFuelLogo") != null)
                document.getElementById("SmartFuelLogo").style.visibility = "visible";
        } else if (id === "SmartFuelLogo" && client != null) {
            if (document.getElementById("ALLogo") != null)
                currentView = "SmartFuel";
            document.getElementById("ALLogo").style.visibility = "visible";
        }
    }

    //// 用户程序点击事件
    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;
        }
        ClearOldItems();
        oldPage = currentPage;
        currentPage--;
        //如果当前油气回收页面则重新获取NozzlesData
        if (currentView === "AL" && client != null) {
            client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData');
        }
    }
    //显示下一页
    function ShowNextPage() {
        if (currentPage === totalPage) {
            alert("已经是最后一页！");
            return;
        }
        ClearOldItems();
        oldPage = currentPage;

        currentPage++;
        //如果当前油气回收页面则重新获取NozzlesData
        if (currentView === "AL" && client != null) {
            client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData');
        }
    }
</script>