FCC/Framework/Edge.WebHost/Views/WebConsole/SmartFuel/Nozzles.cshtml

@model Edge.WebHost.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";
                previousPageImg.style.visibility = "visible";
            }
            if (nextPageImg != null) {
                //if (totalPage < 5)
                nextPageImg.style.left = (16.5 * totalPage + 5).toString() + "%";
                //else {
                //    nextPageImg.style.left = (16.5 * totalPage + 6).toString() + "%";
                //}
                //nextPageImg.style.visibility = (totalPage===1||currentPage===totalPage)?"hidden":"visible";
                nextPageImg.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);
            }*@
            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.sort(sortBySiteLevelNozzleId).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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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 = "WebConsole/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);

    }
        //In ascending order of site level nozzle Id
        function sortBySiteLevelNozzleId(n1, n2) {
            if (n1.SiteLevelNozzleId < n2.SiteLevelNozzleId)
                return -1;
            else
                return 1;
        }
    function GetAvailableTransactions(pumpId, nozzleId) {
        var temp = {
            "Parameters": [
                {"Name": "PumpId", "Value": pumpId.toString() },
                {"Name": "NozzleId", "Value": nozzleId.toString()}
            ]
        };
        var message = JSON.stringify(temp);
        mqttclient.publish(apis.has("GetLastAvailableTransaction") ? apis.get("GetLastAvailableTransaction") :'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetLastAvailableTransaction/', message);
        //mqttclient.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);
        //console.log(message + " " + apis.get("GetDeviceState"));
        var path = apis.has("GetDeviceState") ? apis.get("GetDeviceState") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState/';
        console.log(message + " " + path);
        mqttclient.publish(path, 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";
            } else if (fuellingImg != null && fuellingImg.style.visibility === "visible" && (message.logicalState === "FDC_READY")) {
                idleImgVisible = "visible";
                idleImgStaticVisible = "hidden";
            }

            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 !== idleImgStaticVisible) {
                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 = "";
        }
    //切换至气液比油枪界面
        function ToggleOnlineMonitor() {
            RenderDiv("/OnlineMonitor/ALNozzles", contentDiv,null,null);
        }
    </script>
<div id="nozzlesPage" style="position: relative; width:100%; height:100%;">
    <div id="nozzles" style="position: absolute;top:2.4%; width:100%; height:88.516%;">

    </div>
    <div class="tank_filter_div" id="toggleOnlineMonitor" style="top:0%;bottom:90%;left:95%;background-image: url(/WebConsole/images/onlineMonitor/nozzleView/AL.png);visibility:hidden;" onclick="ToggleOnlineMonitor()">
    </div>
    @*<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="~/WebConsole/js/mqtt.min.js"></script>
<script src="~/WebConsole/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //will set ApiName as key,Path as value
    //var apis = new Map();
    var nozzlesIntervalId = -1;
    var currenthref = window.location.href;
    var currentPath = window.location.pathname;
    var currentHP = currenthref.slice(0, currenthref.indexOf(currentPath) + 1);
    //"ws://localhost:8384/mqtt"
    var ipUsedForMqtt = "ws:" + currentHP.slice(currentHP.indexOf("//")) + "mqtt";
    $(document).ready(function () {
        if (apis.has("GetVRBoardNozzles") && document.getElementById("toggleOnlineMonitor") !== null) {
            document.getElementById("toggleOnlineMonitor").style.visibility = "visible";
        } else if (document.getElementById("toggleOnlineMonitor") !== null) {
            document.getElementById("toggleOnlineMonitor").style.visibility = "hidden";
        }
        nozzlesIntervalId = setInterval(function () {
            console.log("time interval");

            if (vm.Nozzles.length === 0) {
                ALNozzlesSubscribeEvents();
            }
        }, 5000);
        if (apis.size > 0 && apis.has("GetPumpsLayout")) {
            NozzlesSubscribeEvents();
            return;
        }
        var requestData = ["localMqtt", ["IfsfFdcServer"]];
        ShowMeAPIS(requestData, function () {
            NozzlesSubscribeEvents();
        });
        //var serviceUrl = currentHP+"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);
        //        });
        //        NozzlesSubscribeEvents();
        //    },
        //    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(ipUsedForMqtt, options); // you add a ws:// url here

    function NozzlesSubscribeEvents()
    {
        if (!mqttclient.connected || apis.size === 0) {
            console.log("subscribeEvents:client is not connected or haven't got APIS");
            return;
        }
        mqttclient.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);
                    mqttclient.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);
                };
            });
        mqttclient.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);
                }
            });
        mqttclient.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);
                }
            });
        mqttclient.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);
                }
            });
        mqttclient.subscribe(apis.has("GetLastAvailableTransaction_Reply") ? apis.get("GetLastAvailableTransaction_Reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetLastAvailableTransaction_Reply/',
            function (err) {
                if (!err) {
                    console.log("subscribe GetLastAvailableTransaction_Reply successfully");
                };
            });
        mqttclient.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" + apis.get("GetDeviceState_Reply"));
                };
            });
    }
    ////建立连接
    mqttclient.on('connect',
        function () {
            console.log("connected");
            NozzlesSubscribeEvents();
        });

    //如果连接错误，打印错误
    mqttclient.on('error',
        function (err) {
            console.log("error happens, will close the client");
            mqttclient.end();
        });

    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
    function OnReply(apis, topic, jsonObj) {
        var temp = apis.has("GetPumpsLayout_Reply") ? apis.get("GetPumpsLayout_Reply") : "/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout_reply/";
        if (topic === temp) {
            if (nozzlesIntervalId !== -1) {
                console.log("Nozzles Page:stop the interval " + nozzlesIntervalId);
                clearInterval(nozzlesIntervalId);
            }
            ClearOldItems();
            GenerateSmartFuelNozzleView(jsonObj);
            //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(jsonObj);
            return;
        }
        temp = apis.has("OnFdcFuelSaleTransactinStateChange") ? apis.get("OnFdcFuelSaleTransactinStateChange") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcFuelSaleTransactinStateChange/post';
        if (topic === temp) {
            ProcessTransactionStateChange(jsonObj);
            return;
        }
        temp = apis.has("OnFdcControllerStateChange") ? apis.get("OnFdcControllerStateChange") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/event/OnFdcControllerStateChange/post';
        if (topic === temp) {
            ProcessFdcControllerStatusChange(jsonObj);
            return;
        }
        temp = apis.has("GetLastAvailableTransaction_Reply") ? apis.get("GetLastAvailableTransaction_Reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetLastAvailableTransaction_Reply/';
        if (topic === temp) {
            UpdatePayableStatus(jsonObj);
            return;
        }
        temp = apis.has("GetDeviceState_Reply") ? apis.get("GetDeviceState_Reply") : '/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetDeviceState_reply/';
        if (topic === temp) {
            ProcessDeviceState(jsonObj);
            return;
        }
    }
    //显示前一页
    function ShowPreviousPage() {
        if (currentPage === 1) {
            //alert("已经是第一页！");
            dialogBox("提示信息", "已經是第一頁",null,null);
            return;
        }
        ClearOldItems();
        oldPage = currentPage;
        currentPage--;
        var temp = {
            "parameters": [
                { "name": "pumpId", "value": "-1" }
            ]
        };
        //如果当前油气回收页面则重新获取NozzlesData
        if (mqttclient != null) {
            mqttclient.publish(apis.has("GetPumpsLayout") ? apis.get("GetPumpsLayout"):'/Applications.FDC.FdcServerHostApp/fdcServerApp/thing/service/GetPumpsLayout/', JSON.stringify(temp));
        }
    }
    //显示下一页
    function ShowNextPage() {
        if (currentPage === totalPage) {
            //alert("已经是最后一页！");
            dialogBox("提示信息", "已經是最後一頁",null,null);
            return;
        }
        ClearOldItems();
        oldPage = currentPage;

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