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