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

@model Applications.UniversalApi_WebConsole_App.Models.SmartFuel.SmartFuelViewInfo
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    var screenWidth = 1280.00;
    var mainviewHeight = 501.00;
    int maxNozzleNumberInOnePage = 12;
    //int maxNozzlewidth = 176;
    var maxNozzlewidth = 183.00;
    int minNozzlewidth = 129;
    //including the right margin at the end of a row,current display 6 nozzles in one row
    var marginleft = (screenWidth - maxNozzlewidth * 6) / 7;
    int textlableHeight = 34;//人民币未付款图标高度/宽度
    //int nozzleImagHeight = 123;
    int nozzleImagHeight = 125;
    int nozzleHeight = nozzleImagHeight + textlableHeight * 3;//259;
    var margintop = (mainviewHeight - nozzleHeight * 2) / 3;
    //int margintop


    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 = headRightHeight + 10;

}
    <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 amountDecimalDigits = 2;
    var volumeDecimalDigits = 2;
    var intervalId;

    var warningNozzles = new Array();
    var alarmNozzles = new Array();

    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 && currentPage > 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";
                }
            }
            //update next page img position
            var nextPageImg = document.getElementById("PumpsPage_Bottom_pages_img_next_page");
            var previousPageImg = document.getElementById("PumpsPage_Bottom_pages_img_previous_page");
            if (previousPageImg != null) {
                previousPageImg.style.visibility = (totalPage===1||currentPage===1)?"hidden":"visible";
            }
            if (nextPageImg != null) {
                if (totalPage < 5)
                    nextPageImg.style.left = (17.5 * totalPage).toString() + "%";
                nextPageImg.style.visibility = (totalPage===1||currentPage===totalPage)?"hidden":"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);
            }*@
            var nl = nozzlesDiv.childNodes.length;
            for (var cn = 0; cn < nl; cn++) {
                var c = nozzlesDiv.childNodes[0];
                nozzlesDiv.removeChild(c);
            }
        }
    }
    //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 (!Array.isArray(message))
            console.log("message is not a array:"+message);
        if (message == null || !Array.isArray(message)|| !(message.length > 0) ){
            console.log("Invalid message received for GenerateNozzleView");
            return;
        }
        //cast the pump array to an nozzle array
        var nozzlesArray = new Array();
        message.forEach(function(p) {
            if (p.Nozzles != null && p.Nozzles.length>0) {
                p.Nozzles.forEach(function (n) {
                    n.PumpId = p.PumpId;
                    nozzlesArray.push(n);
                });
            }
        });
        amountDecimalDigits = message[0].AmountDecimalDigits;
        volumeDecimalDigits = message[0].VolumeDecimalDigits;
        totalPage = Math.ceil(nozzlesArray.length / @(maxNozzleNumberInOnePage));//message.data.length / @(maxNozzleNumberInOnePage)+(message.data.length % (@maxNozzleNumberInOnePage) === 0 ? 0 : 1);

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

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

        temp.forEach(function (d) {
            var nozzleId = d.LogicalId;
            var nozzleDiv = document.createElement("div");
            nozzleDiv.id = "pump"+d.PumpId+"_nozzle" + nozzleId;
            nozzleDiv.style =
                "position:relative; float: left;margin-left:"+@(marginleft*100/screenWidth)+"%; margin-top:" +@(margintop*100/screenWidth)+"%; width:" +@(maxNozzlewidth*100/screenWidth)+"%; height:"+@(nozzleHeight*100/mainviewHeight)+"%;";

            var nozzleIdDiv = document.createElement("div");
            nozzleIdDiv.id = "pump"+d.PumpId+"_nozzleId" + nozzleId;
            nozzleIdDiv.style =
                "position: absolute; left:0px; top:0px;width: 100%; height:" +@(textlableHeight*100/ nozzleHeight)+"%; text-align: left; font-size: 1.375rem;font-weight: bold;";
            nozzleIdDiv.innerHTML = d.SiteLevelNozzleId;

            var nozzleImgDiv = document.createElement("div");
            nozzleImgDiv.id = "pump"+d.PumpId+"_nozzleImg" + nozzleId;
            //nozzleImgDiv.style = "position: relative; float: left;width: 100%; height:" +@(nozzleImagHeight)+"px; text-align: center;border: 1px solid#00bfff;";
            nozzleImgDiv.style = "position: relative; float: left;width: 100%; height:" +@(nozzleImagHeight*100/nozzleHeight)+"%;";

            nozzleImgDiv.draggable = false;
            //油枪状态图
            //var fuelingStatusIdleVisible = (d.LogicalState === "IDLE") ? "hidden" : "visible";
            //var fuelingStatusFuellingVisible = (d.LogicalState === "FUELING") ? "visible" : "hidden";
            var fuelingStatusIdleVisible = "hidden";
            var fuelingStatusIdleStaticVisible =  "visible";
            var fuelingStatusFuellingVisible = "hidden";
            var fuelingStatusCallingVisible = "hidden";
            var fuelingStatusAuthrizedVisible = "hidden";
            var fuelingStatusDisconnectVisible = "hidden";
            var fuelingStatusClosedVisible = "hidden";
            //IDLE,CALLING,AUTHORIZED,FUELLING,DISCONNECT,油枪未连接
            //var imgIdle = document.createElement("img");
            var imgIdle = document.createElement("img");
            imgIdle.id = "pump"+d.PumpId+"_nozzleImage_Idle_" + nozzleId;
            imgIdle.style = "visibility:" + fuelingStatusIdleVisible + ";width: 100%; height:100%;";
            imgIdle.draggable = false;
            //imgIdle.src = "/images/smartFuel/idle.gif?a=" + Math.random();
            imgIdle.src = "/images/smartFuel/idle.gif?a=" + d.PumpId+nozzleId;

            var imgIdleStatic = document.createElement("img");
            imgIdleStatic.id = "pump"+d.PumpId+"_nozzleImage_IdleStatic_" + nozzleId;
            imgIdleStatic.style = "position: absolute; top: 0px; left:0px;visibility:" + fuelingStatusIdleStaticVisible + ";width: 100%; height:100%;";
            imgIdleStatic.draggable = false;
            imgIdleStatic.src = "/images/smartFuel/idleStatic.png";

            var imgCalling = document.createElement("img");
            imgCalling.id = "pump"+d.PumpId+"_nozzleImage_Calling_" + nozzleId;
            //imgCalling.style = "position: absolute; top: 0px; left:" +@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusCallingVisible + ";";
            imgCalling.style = "position: absolute; top: 0px; left:0px;visibility:" + fuelingStatusCallingVisible + ";width: 100%; height:100%;";
            imgCalling.draggable = false;
            imgCalling.src = "/images/smartFuel/calling.png";
            var imgAuthorized= document.createElement("img");
            imgAuthorized.id = "pump"+d.PumpId+"_nozzleImage_Authorized_" + nozzleId;
            //imgAuthorized.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusAuthrizedVisible+";";
            imgAuthorized.style = "position: absolute; top: 0px; left:0px;visibility:" + fuelingStatusAuthrizedVisible +";width: 100%; height:100%;";
            imgAuthorized.draggable = false;
            imgAuthorized.src = "/images/smartFuel/authorize.png";
            var imgFuelling = document.createElement("img");
            imgFuelling.id = "pump" + d.PumpId + "_nozzleImage_Fuelling_" + nozzleId;
            imgFuelling.draggable = false;
            //imgFuelling.style = "position: absolute; left: 0px;top: 0px;visibility:" + fuelingStatusFuellingVisible + ";width: 100%; height:100%;";
            imgFuelling.style = "position: absolute; left: 0px;top: 0px;visibility:" + fuelingStatusFuellingVisible + ";width: 100%; height:100%;";
            //imgFuelling.src = "/images/smartFuel/fuelling.gif?a=" + Math.random();
            imgFuelling.src = "/images/smartFuel/fuelling.gif?a=" + d.PumpId+nozzleId;

            var imgDisconnect= document.createElement("img");
            imgDisconnect.id = "pump"+d.PumpId+"_nozzleImage_Disconnect_" + nozzleId;
            //imgDisconnect.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusDisconnectVisible+";";
            imgDisconnect.style = "position: absolute; top: 0px; left:0px;visibility:" + fuelingStatusDisconnectVisible +";width: 100%; height:100%;";
            imgDisconnect.draggable = false;
            imgDisconnect.src = "/images/smartFuel/disconnect.png";
            var imgClosed= document.createElement("img");
            imgClosed.id = "pump"+d.PumpId+"_nozzleImage_Closed_" + nozzleId;
            //imgClosed.style = "position: absolute; top: 0px; left:"+@((maxNozzlewidth-minNozzlewidth)/2)+"px;visibility:" + fuelingStatusClosedVisible+";";
            imgClosed.style = "position: absolute; top: 0px; left:0px;visibility:" + fuelingStatusClosedVisible +";width: 100%; height:100%;";
            imgClosed.draggable = false;
            imgClosed.src = "/images/smartFuel/closed.png";

            nozzleImgDiv.appendChild(imgIdle);
            nozzleImgDiv.appendChild(imgIdleStatic);
            nozzleImgDiv.appendChild(imgCalling);
            nozzleImgDiv.appendChild(imgAuthorized);
            nozzleImgDiv.appendChild(imgFuelling);
            nozzleImgDiv.appendChild(imgDisconnect);
            nozzleImgDiv.appendChild(imgClosed);

            var imgNotPaidVisible = "hidden";
            var imgPaidVisible = "visible";
            var nozzleAmountDiv = document.createElement("div");
            nozzleAmountDiv.id = "pump"+d.PumpId+"_nozzleAmount_" + nozzleId;
            nozzleAmountDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight*100/nozzleHeight)+"%;";
            var nozzleAmountImgDiv = document.createElement("div");
            nozzleAmountImgDiv.id = "pump"+d.PumpId+"_nozzleAmount_img_"+nozzleId;
            nozzleAmountImgDiv.style = "position: relative;float: left;width:" +@(textlableHeight*100/ maxNozzlewidth)+"%; height:100%;";
            var nozzleAmountUnpaidImg = document.createElement("img");
            nozzleAmountUnpaidImg.id = "pump"+d.PumpId+"_nozzleAmount_img_Unpaid_" + nozzleId;
            nozzleAmountUnpaidImg.style = "width:100%; height:100%;"+"visibility:" + imgNotPaidVisible;
            nozzleAmountUnpaidImg.draggable = false;
            nozzleAmountUnpaidImg.src = "/images/smartFuel/payable.png";
            var nozzleAmountPaidImg = document.createElement("img");
            nozzleAmountPaidImg.id = "pump"+d.PumpId+"_nozzleAmount_img_Paid_" + nozzleId;
            nozzleAmountPaidImg.style = "position: absolute; width:" +@(imgPaidWidth*100/textlableHeight)+"%;height:"+@(imgPaidHeight*100/textlableHeight) +"%;top:"+@((textlableHeight-imgPaidHeight)*100/2/ textlableHeight)+"%; left:"+@((textlableHeight-imgPaidWidth)*100/2/ textlableHeight)+"%;visibility:"+imgPaidVisible+";";
            nozzleAmountPaidImg.draggable = false;
            nozzleAmountPaidImg.src = "/images/smartFuel/paid.png";
            nozzleAmountImgDiv.appendChild(nozzleAmountUnpaidImg);
            nozzleAmountImgDiv.appendChild(nozzleAmountPaidImg);
            var nozzleAmountColonDiv = document.createElement("div");
            nozzleAmountColonDiv.id = "pump" + d.PumpId + "_nozzleAmount_colon_" + nozzleId;
            nozzleAmountColonDiv.style = "position: relative;float: left;width:"+@(8*100/ maxNozzlewidth)+"%; height:100%;font-size:1.375rem; font-weight: bold;text-align: center;";
            nozzleAmountColonDiv.innerHTML = " :";


            var nozzleAmountValueDiv = document.createElement("div");
            nozzleAmountValueDiv.id = "pump"+d.PumpId+"_nozzleAmount_value_" + nozzleId;
            nozzleAmountValueDiv.style = "position: relative;float: left;width:" +@((maxNozzlewidth-textlableHeight-8)*100/maxNozzlewidth)+"%; height:100%;font-size:1.375rem; font-weight: bold;text-align: left;";
            nozzleAmountValueDiv.innerHTML = "0.00"; //(d.Amount!=null)?(d.Amount/Math.pow(10,amountDecimalDigits)).toFixed(2): "0.00";
            nozzleAmountDiv.appendChild(nozzleAmountImgDiv);
            nozzleAmountDiv.appendChild(nozzleAmountColonDiv);
            nozzleAmountDiv.appendChild(nozzleAmountValueDiv);


            var nozzleAccumulatorTextDiv = document.createElement("div");
            nozzleAccumulatorTextDiv.id = "pump"+d.PumpId+"_nozzleAccumulatorText_" + nozzleId;
            nozzleAccumulatorTextDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight*100/nozzleHeight)+"%; font-size:1.375rem; font-weight: bold;";
            nozzleAccumulatorTextDiv.innerHTML = "累计数：";

            var nozzleAccumulatorValueDiv = document.createElement("div");
            nozzleAccumulatorValueDiv.id = "pump"+d.PumpId+"_nozzleAccumulatorValue_" + nozzleId;
            nozzleAccumulatorValueDiv.style = "position: relative; float: left;width: 100%; height:" +@(textlableHeight*100/nozzleHeight)+"%; font-size:1.375rem; font-weight: bold;";
            nozzleAccumulatorValueDiv.innerHTML = "0.00"; //(d.VolumeTotalizer!==null)?(d.VolumeTotalizer/Math.pow(10,volumeDecimalDigits)).toFixed(2):"0.00";

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

            nozzlesDiv.appendChild(nozzleDiv);
        });
        UpdateFooterPage();
        setTimeout(GetDeviceState,2,-1,-1);

    }

    function GetAvailableTransactions(pumpId, nozzleId) {
        var temp = {
            "Parameters": [
                {"Name": "PumpId", "Value": pumpId.toString() },
                {"Name": "NozzleId", "Value": nozzleId.toString()}
            ]
        };
        var message = JSON.stringify(temp);
        client.publish(apis.has("GetAvailableTransactions") ? apis.get("GetAvailableTransactions"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetAvailableTransactions/', message);
    }

    function GetDeviceState(pumpId, nozzleId) {
        var temp = {
            "Parameters": [
                {"Name": "PumpId", "Value": pumpId.toString() },
                {"Name": "NozzleId", "Value": nozzleId.toString()}
            ]
        };
        var message = JSON.stringify(temp);
        client.publish(apis.has("GetDeviceState")? apis.get("GetDeviceState") :'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState/',message);
    }
    function UpdatePayableStatus(message) {
        if (message == null || !(message.length > 0)) {
            console.log("invalid/null message received for GetAvailableTransactions");
            return;
        }
        message.forEach(function(data) {
            var unpaidImg = document.getElementById("pump" + data.PumpId + "_nozzleAmount_img_Unpaid_" + data.LogicalNozzleId);
            var paidImg = document.getElementById("pump" + data.PumpId + "_nozzleAmount_img_Paid_" + data.LogicalNozzleId);
            if (unpaidImg == null || paidImg == null) {
                console.log("paid/unpaid image is not exist on UI");
                return;
            }
            unpaidImg.style.visibility = (data.hasPayableTransactions === true) ? "visible" : "hidden";
            paidImg.style.visibility = (data.hasPayableTransactions === false) ? "visible" : "hidden";
        });
    }

    function ProcessTransactionStateChange(message) {
        if (message == null || message.Transaction==null) {
            console.log("invalid/null message received for GetAvailableTransactions");
            return;
        }
        if (message.State === "Paid" || message.State==="Payable") {
            setTimeout(GetAvailableTransactions,1,message.Transaction.PumpId,message.Transaction.LogicalNozzleId);
        }
    }

    function ProcessCurrentFuellingStateChange(message) {
        if (message == null || message.Transaction == null || message.Transaction.Nozzle == null) {
            console.log("invalid/null message received for GetAvailableTransactions");
            return;
        }
        //update the nozzleState
        if (message.Transaction.Finished === false) {
            var commonId = "pump" + message.Transaction.Nozzle.PumpId + "_nozzleImage_";
            var commonFuellingId = commonId + "Fuelling_";
            var fuellingImg = document.getElementById(commonFuellingId + message.Transaction.Nozzle.LogicalId);
            if (fuellingImg != null && fuellingImg.style.visibility === "hidden") {
                var commonIdleId = commonId + "Idle_";
                var commonIdleStaticId = commonId + "IdleStatic_";
                var commonCallingId = commonId + "Calling_";
                var commonAuthId = commonId + "Authorized_";
                var commonDisconnectId = commonId + "Disconnect_";
                var commonClosedId = commonId + "Closed_";

                var authImg = document.getElementById(commonAuthId + message.Transaction.Nozzle.LogicalId);
                var idleImg = document.getElementById(commonIdleId + message.Transaction.Nozzle.LogicalId);
                var idleSaticImg = document.getElementById(commonIdleStaticId + message.Transaction.Nozzle.LogicalId);
                var callingImg = document.getElementById(commonCallingId + message.Transaction.Nozzle.LogicalId);
                var disconnectImg = document.getElementById(commonDisconnectId + message.Transaction.Nozzle.LogicalId);
                var closedImg = document.getElementById(commonClosedId + message.Transaction.Nozzle.LogicalId);

                var idleImgVisible = "hidden";
                var idleImgStaticVisible = "hidden";
                var callingImgVisible = "hidden";
                var authorizedImgVisible = "hidden";
                var fuellingImgVisible = "visible";
                var disconnectImgVisible = "hidden";

                if (idleImg != null) {idleImg.style.visibility = idleImgVisible;
                }
                if (idleSaticImg != null) idleSaticImg.style.visibility=idleImgStaticVisible;
                if (callingImg != null) callingImg.style.visibility = callingImgVisible;
                if (authImg != null) authImg.style.visibility = authorizedImgVisible;
                if (fuellingImg != null) {fuellingImg.style.visibility = fuellingImgVisible;
                    fuellingImg.src = fuellingImg.src; //"/images/smartFuel/fuelling.gif?a=" + Math.random();
                }
                if (disconnectImg != null) disconnectImg.style.visibility = disconnectImgVisible;
                if (closedImg != null) closedImg.style.visibility = "hidden";

            }
        }
        var nozzleAmtDiv = document.getElementById("pump" + message.Transaction.Nozzle.PumpId + "_nozzleAmount_value_" + message.Transaction.Nozzle.LogicalId);
        if (nozzleAmtDiv == null) return;
        nozzleAmtDiv.innerHTML = message.Transaction.Amount!=null?(message.Transaction.Amount /Math.pow(10, amountDecimalDigits)).toFixed(amountDecimalDigits):"0.00";
        if (message.Transaction.Finished === true) {
            var nozzleAccumulatorValueDiv = document.getElementById("pump" + message.Transaction.Nozzle.PumpId + "_nozzleAccumulatorValue_" + message.Transaction.Nozzle.LogicalId);
            if (nozzleAccumulatorValueDiv == null) return;

            nozzleAccumulatorValueDiv.innerHTML = message.Transaction.VolumeTotalizer!=null?(message.Transaction.VolumeTotalizer /Math.pow(10, volumeDecimalDigits)).toFixed(volumeDecimalDigits):"0.00";

            //setTimeout(GetAvailableTransactions,1,message.Transaction.Nozzle.PumpId,message.Transaction.Nozzle.LogicalId);
        }
    }

    function ProcessFdcControllerStatusChange(message) {
        if (message == null || message.PumpId == null || message.PumpId === ""||message.logicalState ==="") {
            console.log("Invalid FDC Controller Status change");
            return;
        }
        //ignore the locked state
        if (message.logicalState === "FDC_LOCKED") {
            return;
        }
        var commonId = "pump" + message.PumpId + "_nozzleImage_";
        var commonAuthId = commonId + "Authorized_";
        var commonIdleId = commonId + "Idle_";
        var commonIdleStaticId = commonId + "IdleStatic_";
        var commonCallingId = commonId + "Calling_";
        var commonFuellingId = commonId + "Fuelling_";
        var commonDisconnectId = commonId + "Disconnect_";
        var commonclosedId = commonId + "Closed_";
        console.log("logicalState:" + message.logicalState);
        var idleImgVisible = message.logicalState === "FDC_READY" ? "visible" : "hidden";
        var idleImgStaticVisible = message.logicalState === "FDC_READY" ? "visible" : "hidden";
        var callingImgVisible = message.logicalState === "FDC_CALLING" ? "visible" : "hidden";
        var authorizedImgVisible = message.logicalState === "FDC_AUTHORISED" || message.logicalState === "FDC_STARTED"? "visible" : "hidden";
        var fuellingImgVisible = message.logicalState === "FDC_FUELLING" ? "visible" : "hidden";
        var disconnectImgVisible = message.logicalState === "FDC_OFFLINE"? "visible" : "hidden";
        var closedImgVisible = message.logicalState === "FDC_CLOSED" || message.logicalState === "FDC_ERRORSTATE" || message.logicalState ==="FDC_UNDEFINED"? "visible" : "hidden";

        if (message.logicalId === "") {
            var idleImgs = $("img[id^=" + commonIdleId);
            if (idleImgs != null) {
                idleImgs.each(function (index, element) {
                    var tempIdleVisible = idleImgVisible;
                    var tempFuellingImg = document.getElementById(commonFuellingId + element.id.substr(commonIdleId.length));
                    if (tempFuellingImg != null && tempFuellingImg.style.visibility !== "visible") {
                        tempIdleVisible = "hidden";
                    }
                    if (element.style.visibility !== tempIdleVisible) {
                        element.style.visibility = tempIdleVisible;
                        if (tempIdleVisible === "visible") {
                            element.src = element.src;//"/images/smartFuel/idle.gif?a=" + Math.random();
                        }
                    }
                });
            }
            var idleStaticImgs = $("img[id^=" + commonIdleStaticId);
            if (idleStaticImgs != null) {
                idleStaticImgs.each(function (index, element) {
                    var tempIdleStaticVisible = idleImgStaticVisible;
                    var tempFuellingImg = document.getElementById(commonFuellingId + element.id.substr(commonIdleStaticId.length));
                    if (tempFuellingImg != null && tempFuellingImg.style.visibility === "visible") {
                        tempIdleStaticVisible = "hidden";
                    }
                    if (element.style.visibility !== tempIdleStaticVisible) {
                        element.style.visibility = tempIdleStaticVisible;
                    }
                });
            }
            var callingImgs = $("img[id^=" + commonCallingId);
            if (callingImgs != null) {
                callingImgs.each(function (index, element) {
                    if (element.style.visibility !== callingImgVisible)
                        element.style.visibility = callingImgVisible;
                });
            }
            var authorizedImgs = $("img[id^=" + commonAuthId);
            if (authorizedImgs != null) {
                authorizedImgs.each(function (index, element) {
                    if (element.style.visibility !== authorizedImgVisible)
                        element.style.visibility = authorizedImgVisible;
                });
            }
            var fuellingImgs = $("img[id^=" + commonFuellingId);
            if (fuellingImgs != null) {
                fuellingImgs.each(function (index, element) {
                    if (element.style.visibility !== fuellingImgVisible) {
                    element.style.visibility = fuellingImgVisible;
                    if (fuellingImgVisible === "visible") {
                        element.src = element.src; //"/images/smartFuel/fuelling.gif?a=" + Math.random();
                    }
                    }
                });
            }
            var offlineImgs = $("img[id^=" + commonDisconnectId);
            if (offlineImgs != null) {
                offlineImgs.each(function (index, element) {
                    if (element.style.visibility !== disconnectImgVisible)
                        element.style.visibility = disconnectImgVisible;
                });
            }

            var closedImgs = $("img[id^=" + commonclosedId);
            if (closedImgs != null) {
                closedImgs.each(function (index, element) {
                    if (element.style.visibility !== closedImgVisible)
                        element.style.visibility = closedImgVisible;
                });
            }
        } else {
            var idleImg = document.getElementById(commonIdleId + message.logicalId);
            var idleSaticImg = document.getElementById(commonIdleStaticId + message.logicalId);
            var callingImg = document.getElementById(commonCallingId + message.logicalId);
            var authImg = document.getElementById(commonAuthId + message.logicalId);
            var fuellingImg = document.getElementById(commonFuellingId + message.logicalId);
            var disconnectImg = document.getElementById(commonDisconnectId + message.logicalId);
            var closedImg = document.getElementById(commonclosedId + message.logicalId);
            if (fuellingImg != null && fuellingImg.style.visibility !== "visible" && (message.logicalState === "FDC_READY")) {
                idleImgVisible = "hidden";
                idleImgStaticVisible = "visible";
            }

            if (idleImg != null && idleImg.style.visibility !== idleImgVisible) {
                idleImg.style.visibility = idleImgVisible;
                if (idleImgVisible === "visible") {
                    idleImg.src = idleImg.src; //"/images/smartFuel/idle.gif?a=" + Math.random();
                }
            }
            if (idleSaticImg != null && idleSaticImg.style.visibility !== idleImgVisible) {
                idleSaticImg.style.visibility = idleImgStaticVisible;
            }
            if (callingImg != null && callingImg.style.visibility !== callingImgVisible) callingImg.style.visibility = callingImgVisible;
            if (authImg != null && authImg.style.visibility!== authorizedImgVisible) authImg.style.visibility = authorizedImgVisible;
            if (fuellingImg != null && fuellingImg.style.visibility !== fuellingImgVisible) {
                fuellingImg.style.visibility = fuellingImgVisible;
                if (fuellingImgVisible === "visible") {
                    fuellingImg.src = fuellingImg.src; //"/images/smartFuel/fuelling.gif?a=" + Math.random();
                }}
            if (disconnectImg != null && disconnectImg.style.visibility !== disconnectImgVisible) disconnectImg.style.visibility = disconnectImgVisible;
            if (closedImg != null &&  closedImg.style.visibility !== closedImgVisible) closedImg.style.visibility = closedImgVisible;
            if (message.logicalState === "FDC_FUELLING") {
                var authorizedImgs = $("img[id^=" + commonAuthId);
                if (authorizedImgs != null) {
                    authorizedImgs.each(function(index,element) {
                        if (element.id !== commonAuthId + message.logicalId && element.style.visibility === "visible") {
                            element.style.visibility = "hidden";
                            var tempNozzleId = element.id.toString().substr(commonAuthId.length);
                            var tempIdleImg = document.getElementById(commonIdleStaticId + tempNozzleId);
                            if (tempIdleImg != null) tempIdleImg.style.visibility = "visible";
                        }
                    });
                }
            }
        }
        //var r = document.getElementById("pump"+message.PumpId+"_nozzleImg"+"^");
    }

    function ProcessDeviceState(message) {
        if (message == null || !Array.isArray(message)|| !(message.length>0)) {
            console.log("Invalid device state");
            return;
        }
        console.log(message);
        message.forEach(function (device) {
            var commonId = "pump" + device.PumpId + "_nozzleImage_";
            var commonAuthId = commonId + "Authorized_";
            var commonIdleId = commonId + "Idle_";
            var commonIdleStaticId = commonId + "IdleStatic_";
            var commonCallingId = commonId + "Calling_";
            var commonFuellingId = commonId + "Fuelling_";
            var commonDisconnectId = commonId + "Disconnect_";
            var commonClosedId = commonId + "Closed_";

            if (device.Nozzles != null && device.Nozzles.length > 0) {
                device.Nozzles.forEach(function(n) {
                    var idleImgStaticVisible = device.DeviceState === "FDC_READY" ? "visible" : "hidden";
                    var idleImgVisible = "hidden";
                    var callingImgVisible = device.DeviceState === "FDC_CALLING" ? "visible" : "hidden";
                    var authorizedImgVisible = device.DeviceState === "FDC_AUTHORISED" || device.GetDeviceState ==="FDC_STARTED"? "visible" : "hidden";
                    var fuellingImgVisible = device.DeviceState === "FDC_FUELLING" ? "visible" : "hidden";
                    var disconnectImgVisible = device.DeviceState === "FDC_OFFLINE"? "visible" : "hidden";
                    var closedImgVisible = device.DeviceState === "FDC_CLOSED" || device.DeviceState === "FDC_ERRORSTATE" || device.DeviceState === "FDC_UNDEFINED"? "visible" : "hidden";

                    if (n.LogicalState == null &&
                        (device.DeviceState === "FDC_CALLING" || device.DeviceState === "FDC_FUELLING")) {
                        console.log(
                            "Currently, don't update the view since don't know which one is in calling/fuelling state");
                    } else {
                        var idleImg = document.getElementById(commonIdleId + n.LogicalId);
                        var idleStaticImg = document.getElementById(commonIdleStaticId + n.LogicalId);
                        var callingImg = document.getElementById(commonCallingId + n.LogicalId);
                        var authImg = document.getElementById(commonAuthId + n.LogicalId);
                        var fuellingImg = document.getElementById(commonFuellingId + n.LogicalId);
                        var disconnectImg = document.getElementById(commonDisconnectId + n.LogicalId);
                        var closedImg = document.getElementById(commonClosedId + n.LogicalId);
                        if (idleImg != null) idleImg.style.visibility = idleImgVisible;
                        if (idleStaticImg != null) idleStaticImg.style.visibility = idleImgStaticVisible;
                        if (callingImg != null) callingImg.style.visibility = callingImgVisible;
                        if (authImg != null) authImg.style.visibility = authorizedImgVisible;
                        if (fuellingImg != null) fuellingImg.style.visibility = fuellingImgVisible;
                        if (disconnectImg != null) disconnectImg.style.visibility = disconnectImgVisible;
                        if (closedImg != null) closedImg.style.visibility = closedImgVisible;
                    }
                });
            }

            if (device.Nozzles != null && device.Nozzles.length > 0) {
                device.Nozzles.forEach(function (n) {
                    var nozzleAccumulatorValueDiv = document.getElementById("pump" + device.PumpId + "_nozzleAccumulatorValue_" + n.LogicalId);
                    if (nozzleAccumulatorValueDiv != null)
                        nozzleAccumulatorValueDiv.innerHTML = n.VolumeTotalizer!= null?(n.VolumeTotalizer / Math.pow(10, volumeDecimalDigits)).toFixed(volumeDecimalDigits):"0.00";
                    var nozzleAmtDiv = document.getElementById("pump" + device.PumpId + "_nozzleAmount_value_" + n.LogicalId);
                    if (nozzleAmtDiv == null) return;
                    nozzleAmtDiv.innerHTML =n.Amount!=null?(n.Amount /Math.pow(10, amountDecimalDigits)).toFixed(amountDecimalDigits):"0.00";
                });
            }
        });
        setTimeout(GetAvailableTransactions,2,-1,-1);
    }
    function UpdateNozzleState(pumpId,nozzleId,state) {

    }
    //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 = "";
    }
    </script>
<div id="nozzles" style="position: relative; width:100%; height:88.516%;">
    @*<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>

<script src="~/js/mqtt.min.js"></script>
<script src="~/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //will set ApiName as key,Path as value
    var apis = new Map();
    $(document).ready(function () {
        var requestData = ["localMqtt", ["IfsfFdcServer"]];
        var serviceUrl = "http://localhost:8384/u/?apitype=service&an=ShowMeApi&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
        $.ajax({
            url: serviceUrl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                console.log(data);
                data.forEach(function (d) {
                    if (apis.has(d.ApiName)) {
                        apis.delete(d.ApiName);
                    }
                    apis.set(d.ApiName, d.Path.slice(d.Path.length - 1) === "+" ? d.Path.slice(0, d.Path.length-1) : d.Path);
                });
                subscribeEvents();
            },
            error: function (err) {
                console.log(err);
            }
        });
    });

    var options = {
        //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
        clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
        timeout: 5000,
        useSSL: false
    }
    //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
    var client = mqtt.connect("@Model.mqttConnectionString", options); // you add a ws:// url here

    function subscribeEvents()
    {
        if (!client.connected || apis.size === 0) {
            console.log("subscribeEvents:client is not connected or haven't got APIS");
            return;
        }
        client.subscribe(apis.has("GetPumpsLayout_Reply") ? apis.get("GetPumpsLayout_Reply"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout_reply/',
            function (err) {
                if (!err) {
                    var temp = {
                        "parameters": [
                            { "name": "pumpId", "value": "-1" }
                        ]
                    };
                    var message = JSON.stringify(temp);
                    client.publish(apis.has("GetPumpsLayout") ? apis.get("GetPumpsLayout") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout/', message);
                    //client.publish('/sys/fdcServerApp/Applications.FDC.FdcServerHostApp/thing/service/GetPumpsLayout', message);
                };
            });
        client.subscribe(apis.has("OnFdcControllerStateChange")?apis.get("OnFdcControllerStateChange"): '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcControllerStateChange/post',
            function (err) {
                if (!err) {
                    console.log("subscribe fdc controller state change event successfully");
                } else {
                    console.log("subscribe fdc controller state change event failed" + err);
                }
            });
        client.subscribe(apis.has("OnCurrentFuellingStatusChange") ? apis.get("OnCurrentFuellingStatusChange") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnCurrentFuellingStatusChange/post',
            function (err) {
                if (!err) {
                    console.log("subscribe current fuel status change event successfully");
                } else {
                    console.log("subscribe current fuel status change event failed" + err);
                }
            });
        client.subscribe(apis.has("OnFdcFuelSaleTransactinStateChange") ? apis.get("OnFdcFuelSaleTransactinStateChange"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcFuelSaleTransactinStateChange/post',
            function (err) {
                if (!err) {
                    console.log("subscribe current fuel status change event successfully");
                } else {
                    console.log("subscribe current fuel status change event failed" + err);
                }
            });
        client.subscribe(apis.has("GetAvailableTransactions_reply") ? apis.get("GetAvailableTransactions_reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetAvailableTransactions_reply/',
            function (err) {
                if (!err) {
                    console.log("subscribe GetAvailableTransactions_reply successfully");
                };
            });
        client.subscribe(apis.has("GetDeviceState_reply") ? apis.get("GetDeviceState_reply"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState_reply/',
            function (err) {
                if (!err) {
                    console.log("subscribe GetDeviceState_reply successfully");
                };
            });
    }
    ////建立连接
    client.on('connect',
        function () {
            console.log("connected");
            subscribeEvents();
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout_reply/',
            //    function (err) {
            //        if (!err) {
            //            var temp = {
            //                "parameters": [
            //                    { "name": "pumpId", "value": "-1" }
            //                ]
            //            };
            //            var message = JSON.stringify(temp);
            //            client.publish('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout/',message);
            //            //client.publish('/sys/fdcServerApp/Applications.FDC.FdcServerHostApp/thing/service/GetPumpsLayout', message);
            //        };
            //    });
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcControllerStateChange/post',
            //    function (err) {
            //        if (!err) {
            //            console.log("subscribe fdc controller state change event successfully");
            //        } else {
            //            console.log("subscribe fdc controller state change event failed" + err);
            //        }
            //    });
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnCurrentFuellingStatusChange/post',
            //    function (err) {
            //        if (!err) {
            //            console.log("subscribe current fuel status change event successfully");
            //        } else {
            //            console.log("subscribe current fuel status change event failed" + err);
            //        }
            //    });
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcFuelSaleTransactinStateChange/post',
            //    function (err) {
            //        if (!err) {
            //            console.log("subscribe current fuel status change event successfully");
            //        } else {
            //            console.log("subscribe current fuel status change event failed" + err);
            //        }
            //    });
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetAvailableTransactions_reply/',
            //    function (err) {
            //        if (!err) {
            //            console.log("subscribe GetAvailableTransactions_reply successfully");
            //        };
            //    });
            //client.subscribe('/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState_reply/',
            //    function (err) {
            //        if (!err) {
            //            console.log("subscribe GetDeviceState_reply successfully");
            //        };
            //    });
        });

    //如果连接错误，打印错误
    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;
            
            var temp = apis.has("GetPumpsLayout_Reply") ? apis.get("GetPumpsLayout_Reply") : "/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout_reply/";
            if (topic === temp) {
                ClearOldItems();
                GenerateSmartFuelNozzleView(JSON.parse(message.toString()));
                //get available transactions for all pumps, so there's no need to add parameter for this publish
                //client.publish("/sys/fdcServerApp/Applications.FDC.FdcServerHostApp/thing/service/GetAvailableTransactions");
                return;
            }
            temp = apis.has("OnCurrentFuellingStatusChange") ? apis.get("OnCurrentFuellingStatusChange") : "/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnCurrentFuellingStatusChange/post";
            if (topic === temp) {
                ProcessCurrentFuellingStateChange(JSON.parse(message.toString()));
                return;
            }
            temp = apis.has("OnFdcFuelSaleTransactinStateChange") ? apis.get("OnFdcFuelSaleTransactinStateChange") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcFuelSaleTransactinStateChange/post';
            if (topic === temp) {
                ProcessTransactionStateChange(JSON.parse(message.toString()));
                return;
            }
            temp = apis.has("OnFdcControllerStateChange") ? apis.get("OnFdcControllerStateChange") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcControllerStateChange/post';
            if (topic === temp) {
                ProcessFdcControllerStatusChange(JSON.parse(message.toString()));
                return;
            }
            temp = apis.has("GetAvailableTransactions_Reply") ? apis.get("GetAvailableTransactions_Reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetAvailableTransactions_reply/';
            if (topic === temp) {
                UpdatePayableStatus(JSON.parse(message.toString()));
                return;
            }
            temp = apis.has("GetDeviceState_Reply") ? apis.get("GetDeviceState_Reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState_reply/';
            if (topic === temp) {
                ProcessDeviceState(JSON.parse(message.toString()));
                return;
            }
        });

    //显示前一页
    function ShowPreviousPage() {
        if (currentPage === 1) {
            //alert("已经是第一页！");
            return;
        }
        ClearOldItems();
        oldPage = currentPage;
        currentPage--;
        var temp = {
            "parameters": [
                { "name": "pumpId", "value": "-1" }
            ]
        };
        //如果当前油气回收页面则重新获取NozzlesData
        if (client != null) {
            client.publish(apis.has("GetPumpsLayout") ? apis.get("GetPumpsLayout"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout/', JSON.stringify(temp));
        }
    }
    //显示下一页
    function ShowNextPage() {
        if (currentPage === totalPage) {
            //alert("已经是最后一页！");
            return;
        }
        ClearOldItems();
        oldPage = currentPage;

        currentPage++;
        var temp = {
            "parameters": [
                { "name": "pumpId", "value": "-1" }
            ]
        };
        //如果当前油气回收页面则重新获取NozzlesData
        if (client != null) {
            client.publish(apis.has("GetPumpsLayout") ? apis.get("GetPumpsLayout") :'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout/', JSON.stringify(temp));
        }
    }
</script>