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

<div id="alNozzlesPage" style="position: relative; width:100%; height:100%;">
    <div id="alNozzles" style="position: absolute;top:2.4%; width:100%; height:88.516%;">
        <div v-show="nozzleLength>0" class="toplabels">
            <div class="topALLabel">時間</div>
            <div class="topALLabel">氣</div>
            <div class="topALLabel">油</div>
            <div class="topALLabel">氣液比</div>
        </div>
        <div v-show="nozzleLength>6" class="toplabels" style="top:58%;">
            <div class="topALLabel">時間</div>
            <div class="topALLabel">氣</div>
            <div class="topALLabel">油</div>
            <div class="topALLabel">氣液比</div>
        </div>
        <div v-for="n in Nozzles" class="NozzleDiv">
            <div class="topALDatas">
                <div class="historyIcon" style="padding-left:4%;" @@click="PreHistory(n)"><</div>

                <div class="topALTrans topALTransBolderRight">
                    <div class="topAL">{{n.ALIsNormalTimeStampHistory}}</div>
                    <div class="topAL">
                        @*<div class="topALLabel">氣</div>*@
                        <div class="topALLabelData">{{n.VaporVolumeWithDecimalHistory}}</div>
                    </div>
                    <div class="topAL">
                        @*<div class="topALLabel">油</div>*@
                        <div class="topALLabelData">{{n.LiquidVolumeWithDecimalHistory}}</div>
                    </div>
                    <div class="topAL">
                        @*<div class="topALLabel" style="width:50%;">氣液比</div>*@
                        <div v-if="n.ALIsNormal === true" class="topALLabelData" @*style="width:50%;"*@>{{n.VaporLiquidRatioHistory}}</div>
                        <div v-else class="topALLabelData" style="color: deeppink;">{{n.VaporLiquidRatioHistory}}</div> @*width: 50%;*@
                    </div>
                </div>
                <div class="topALTrans">
                    <div class="topAL">{{n.ALIsNormalTimeStamp}}</div>
                    <div class="topAL">
                        @*<div class="topALLabel">氣</div>*@
                        <div class="topALLabelData">{{n.VaporVolumeWithDecimal}}</div>
                    </div>
                    <div class="topAL">
                        @*<div class="topALLabel">油</div>*@
                        <div class="topALLabelData">{{n.LiquidVolumeWithDecimal}}</div>
                    </div>
                    <div class="topAL">
                        @*<div class="topALLabel" style="width:50%;">氣液比</div>*@
                        <div v-if="n.ALIsNormal === true" class="topALLabelData" @*style="width:50%;"*@>{{n.VaporLiquidRatio}}</div>
                        <div v-else class="topALLabelData" style="color: deeppink;">{{n.VaporLiquidRatio}}</div>@* width: 50%;*@
                    </div>
                </div>
                <div class="historyIcon" style="padding-right:4%;" @@click="NextHistory(n)">></div>
            </div>
            <div class="ALDatas" @@click="DisplayConfigForm(n)">
                <div class="NozzleId">{{n.SiteLevelNozzleId}}</div>
                @*<img v-show="n.FuelingState ==='IDLE'" src="/WebConsole/images/smartFuel/idleStatic.png" class="FuelingState" />*@
                @*<img v-show="n.FuelingState ==='FUELING'" src="/WebConsole/images/smartFuel/fuelling.gif" class="FuelingState"/>*@
                <img :src="n.imgsource" class="FuelingState" />

                @*<img v-show="n.HealthState === 'NORMAL' && n.FuelingState !=='FUELING'" src="~/WebConsole/images/onlineMonitor/nozzleView/NozzleALNormal.png" class="HealthState" />
                <img v-show="n.HealthState === 'WARNING'  && n.FuelingState !=='FUELING'" src="~/WebConsole/images/onlineMonitor/nozzleView/NozzleALWarning.png" class="HealthState" />
                <img v-show="(n.HealthState === 'DISCONNETED'||n.HealthState === 'NOT_SET'||n.HealthState === 'NO_VR') && n.FuelingState !=='FUELING'" src="~/WebConsole/images/onlineMonitor/nozzleView/NozzleALDisconnect.png" class="HealthState" />
                <img v-show="n.HealthState === 'ALARM' && n.FuelingState !=='FUELING'" src="~/WebConsole/images/onlineMonitor/nozzleView/NozzleALAlarm.png" class="HealthState" />*@
            </div>
            <div class="ALDatas">
                <div class="ALLable" style="margin-top:40%;">油气脈衝當量</div>
                <div class="ALLableData">{{n.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量}}</div>
                <div class="ALLable">標註氣液比值</div>
                <div class="ALLableData">{{n.advancedSettings.BoardInitParameterConfigV1.气液比值}}</div>
            </div>

        </div>
    </div>
    <div class="settingsBox" v-if="showConfigForm">
        <div class="settingsBody">
            <form v-if="mode===1" autocomplete="off" onsubmit="return WriteBoardNozzleInitParameters()">           
                <div class="modeSettingsLabel">站級槍號 {{advancedSettings.SiteLevelNozzleId}}</div>
                        <div class="modeSettingsLabel">最大未變化次數<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.最大未变化次数" type="text" min="0" max="99999" @@click="show" /></div>
                        <div class="modeSettingsLabel">開始加油閥值<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.开始加油阀值" type="text" min="0" max="99999" @@click="show"/></div>
                        <div class="modeSettingsLabel">停止加油閥值<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.停止加油阀值" type="text" min="0" max="99999" @@click="show" /></div>
                        <div class="modeSettingsLabel">最小加油量<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.最小加油量" type="text" min="0" max="99999" @@click="show"/></div>
                        <div class="modeSettingsLabel">加油脈衝當量<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.加油脉冲当量" type="text" min="0" max="99999" @@click="show"/></div>
                        <div class="modeSettingsLabel">油气脈衝當量<input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.油气脉冲当量" type="text" min="0" max="99999" @@click="show" /></div>
                        <div class="modeSettingsLabel">標準氣液比中值 <input class="inputPoistion" v-model="advancedSettings.BoardInitParameterConfigV1.气液比值" type="text" min="0" max="10" @@click="show"/></div>
                        <div class="modeSettingsLabel submitButtonPosition" style="height:12%;">
                            <input class="inputButton" type="submit" style="margin-right:3%;" value="發送給當前油槍" onclick="setSubmitMode(0)"/>
                            <input class="inputButton" type="submit" value="發送給所有油槍" onclick="setSubmitMode(1)"/>
                        </div>
                    </form>
            <div v-else>
                <form>
                    <div class="modeSettingsLabel">站級槍號：{{normalSettings.SiteLevelNozzleId}}</div>
                    <div class="modeSettingsLabel">最後一筆交易數據</div>
                    <div class="modeSettingsLabel-trans">氣：{{normalSettings.LatestTrxFlowData.VaporVolumeWithDecimal}}</div>
                    <div class="modeSettingsLabel-trans">油：{{normalSettings.LatestTrxFlowData.LiquidVolumeWithDecimal}}</div>
                    <div class="modeSettingsLabel-trans">氣液比：{{normalSettings.LatestTrxFlowData.VaporLiquidRatio}}</div>

                    @*<div class="modeSettingsLabel">待校准记录的系统吸气体积值:</div>
                    <div class="modeSettingsLabel">{{normalSettings.currentReadingValue}}</div>*@
                    <div class="modeSettingsLabel">標準測定氣體體積（升）</div>
                    <div class="modeSettingsLabel"><input type="text" v-model="normalSettings.standardReadingValue" @@click="show"/></div>
                    <div class="modeSettingsLabel submitButtonPosition">
                        <input class="inputButton" type="button" value="校準並發送給當前油槍" onclick="calibrateBoardNozzleInitParameter(0)" />
                        <input class="inputButton" style="display:none;" type="button" value="校準並發送給所有油槍" onclick="calibrateBoardNozzleInitParameter(1)" />
                    </div>

                </form>
            </div>
        </div>

        <div class="modeDiv">
            <input :class="mode===0?'modeButtonActive inputButton':'modeButton inputButton'" type="button" value="普通模式" onclick="modeChage(0)"/>
            <input :class="mode===1?'modeButtonActive inputButton':'modeButton inputButton'" type="button" value="專家模式" onclick="modeChage(1)"/>
        </div>
        
    </div>
</div>
<script>
    var currentPage = 1;
    var oldPage = currentPage;
    var totalPage = 1;
    var maxNozzleNumberInOnePage = 12;
    var alIntervalId = -1;

    //切换至气液比油枪界面
    function ToggleSmartFuel() {
        RenderDiv("/OnlineMonitor/Nozzles", contentDiv, null, null);
    }
    var vm_config = new Vue({
        el: '#alNozzlesPage',
        data: {
            totalPage: 1,
            Nozzles: [/*{ "SiteLevelNozzleId": 1, "HealthState": "NORMAL", "LatestTrxFlowData": null, "FuelingState": "IDLE",
             * HistoryTransactions:}*/],
            smartFuelEnabled: false,
            nozzleLength:0,
            advancedSettings: {
                "SiteLevelNozzleId": 1, "BoardInitParameterConfigV1": {
                    "最大未变化次数": null,
                    "开始加油阀值": null,
                    "停止加油阀值": null,
                    "最小加油量": null,
                    "加油脉冲当量": null,
                    "油气脉冲当量": null,
                    "气液比值": null
                }
            },
            normalSettings: {
                "SiteLevelNozzleId": 1,
                "LatestTrxFlowData": null,
                "currentConefficientValue":0,
                "currentReadingValue": 0,
                "standardReadingValue":null
            },
            siteLevelIds: [],
            showConfigForm: false,
            mode: 0,//0-普通模式 1-专家模式,
            submitType:0//仅提交参数给当前的一块，1提交给所有的板子
        },
        methods: {
            show(e) {
                showKeyboard("default", e.currentTarget)
            }
        },
        mouted() {
        }
    });
    $(document).ready(function () {
        if (vm_config === undefined) return;
        if (apis.has("GetPumpsLayout")) {
            vm_config.smartFuelEnabled = true;
        }
        alIntervalId = setInterval(function () {
            console.log("time interval");

            if (vm_config.Nozzles.length === 0) {
                ALNozzlesSubscribeEvents();
            }
        }, 5000);

        if (apis.size > 0 && apis.has("GetVRBoardNozzles")) {
            ALNozzlesSubscribeEvents();
            return;
        }

        //var requestData = ["localMqtt", ["在线监测"]];
        ShowMeAPIS(["localMqtt", ["OnlineWatch"]], function () {
            ALNozzlesSubscribeEvents();
        });
        //var serviceUrl = basicUrl + "/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);
        //        });
        //        ALNozzlesSubscribeEvents();
        //    },
        //    error: function (err) {
        //        console.log(err);
        //    }
        //});
    }
    );
    mqttclient.on('connect', function () {
        ALNozzlesSubscribeEvents();
    });
    //mqttclient.on('message', function (topic, message) {
    //    if (apis.size > 0 && apis.has("GetVRBoardNozzles_Reply") && topic === apis.get("GetVRBoardNozzles_Reply")) {
    //        vm.Nozzles = JSON.parse(message.toString());
    //    }
    //});
    function OnReply(apis, topic, jsonObj) {
        if (apis.size > 0 && apis.has("GetVRBoardNozzles_Reply") && topic === apis.get("GetVRBoardNozzles_Reply")) {
            //vm.Nozzles = jsonObj;
            if (!Array.isArray(jsonObj)) {
                console.log("Invalid response GetVRBoardNozzles_Reply");
                return;
            }
            //stop the interval if can receive message from mqtt
            if (alIntervalId !== -1) {
                console.log("stop the interval:" + alIntervalId);
                clearInterval(alIntervalId);
            }
            vm_config.siteLevelIds = [];
            jsonObj.forEach(function (d) {
                console.log("GetVRBoardNozzles_Reply:" + d.SiteLevelNozzleId + "-" + d.FuelingState);
                vm_config.siteLevelIds.push(d.SiteLevelNozzleId);
                d.currentIndex = 0;//当前翻页
                d.VaporVolumeWithDecimal = d.LatestTrxFlowData === null ? "" : d.LatestTrxFlowData.VaporVolumeWithDecimal;
                d.LiquidVolumeWithDecimal = d.LatestTrxFlowData === null ? "" : d.LatestTrxFlowData.LiquidVolumeWithDecimal;
                d.VaporLiquidRatio = d.LatestTrxFlowData === null ? "" : d.LatestTrxFlowData.VaporLiquidRatio;
                d.ALIsNormal = d.LatestTrxFlowData === null ? "" : d.LatestTrxFlowData.气液比值是否正常;
                d.imgsource = d.FuelingState === "FUELING" ? "/WebConsole/images/smartFuel/fuelling.gif?a=" + d.SiteLevelNozzleId : (d.FuelingState === "IDLE" ? "/WebConsole/images/smartFuel/idleStatic.png" : "/WebConsole/images/smartFuel/disconnect.png");
                if (d.advancedSettings === undefined) {
                    d.advancedSettings = {
                        "SiteLevelNozzleId": d.SiteLevelNozzleId, "BoardInitParameterConfigV1": {
                            "最大未变化次数": 1,
                            "开始加油阀值": 1,
                            "停止加油阀值": 1,
                            "最小加油量": 1,
                            "加油脉冲当量": 1,
                            "油气脉冲当量": 1,
                            "气液比值": 1
                        }
                    };
                }
                if (d.normalSettings === undefined) {
                    d.normalSettings = {
                        "SiteLevelNozzleId": d.SiteLevelNozzleId,
                        "LatestTrxFlowData": null,
                        "currentConefficientValue": 0,
                        "currentReadingValue": 0,
                        "standardReadingValue": null
                    };
                }
            })
            totalPage = Math.ceil(jsonObj.length / maxNozzleNumberInOnePage);
            var dataLength =
                (jsonObj.length - maxNozzleNumberInOnePage * (currentPage - 1)) > maxNozzleNumberInOnePage
                    ? maxNozzleNumberInOnePage
                    : (jsonObj.length - maxNozzleNumberInOnePage * (currentPage - 1));

            vm_config.Nozzles = jsonObj.sort(sortBySiteLevelNozzleId).slice((currentPage - 1) * maxNozzleNumberInOnePage, (currentPage - 1) * maxNozzleNumberInOnePage + dataLength);
            vm_config.Nozzles.forEach(function (n) {
                ReadBoardNozzleInitParameters(n.SiteLevelNozzleId, (data) => {
                    n.advancedSettings.BoardInitParameterConfigV1.最大未变化次数 = data===null?"?":data.最大未变化次数;
                    n.advancedSettings.BoardInitParameterConfigV1.开始加油阀值 = data === null ? "?":data.开始加油阀值;
                    n.advancedSettings.BoardInitParameterConfigV1.停止加油阀值 = data === null ? "?" :data.停止加油阀值;
                    n.advancedSettings.BoardInitParameterConfigV1.最小加油量 = data === null ? "?" :data.最小加油量;
                    n.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量 = data === null ? "?" : data.加油脉冲当量;
                    n.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = data === null ? "?" :data.油气脉冲当量;
                    n.advancedSettings.BoardInitParameterConfigV1.气液比值 = data === null ? "?" :data.气液比值;
                    n.normalSettings.currentConefficientValue = data === null ? "?" : data.油气脉冲当量;
                });

                setTimeout(GetVRBoardNozzleTrxFlowDatas, 2, n.SiteLevelNozzleId, 0);
            });
            vm_config.nozzleLength = vm_config.Nozzles.length;
            if (currentPage > totalPage) {
                currentPage = totalPage;
            }
            UpdateFooterPage();
            
        } else if (apis.size > 0 && apis.has("OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead") && topic === apis.get("OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead")) {
            if (vm_config.Nozzles.length > 0) {
                vm_config.Nozzles.forEach(function (n) {
                    if (n.SiteLevelNozzleId === jsonObj.SiteLevelNozzleId && n.LatestTrxFlowData) {
                        n.LatestTrxFlowData.VaporVolumeWithDecimal = jsonObj.VaporVolumeWithDecimal;
                        n.LatestTrxFlowData.LiquidVolumeWithDecimal = jsonObj.LiquidVolumeWithDecimal;
                        n.LatestTrxFlowData.VaporLiquidRatio = jsonObj.VaporLiquidRatio;
                        //n.FuelingState = jsonObj.FuellingStartTime === null ? "FUELING" : "IDLE";
                        //n.HealthState = jsonObj.气液比值是否正常 === true ? "NORMAL" : "WARNING";
                        n.LatestTrxFlowData.气液比值是否正常 = jsonObj.气液比值是否正常;
                        //console.log("OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead-VaporLiquidRatio:" + jsonObj.VaporLiquidRatio);
                    }
                })
            }
        } else if (apis.size > 0 && apis.has("OnVaporRecoveryDataCollectorBoardNozzleStateChange") && topic === apis.get("OnVaporRecoveryDataCollectorBoardNozzleStateChange")) {
            if (vm_config.Nozzles.length > 0) {
                vm_config.Nozzles.forEach(function (n) {
                    if (n.SiteLevelNozzleId === jsonObj.SiteLevelNozzleId) {
                       // console.log("CollectorBoardNozzleStateChange:" + jsonObj.SiteLevelNozzleId + "-" + jsonObj.FuelingState);
                        n.imgsource = jsonObj.FuelingState === "IDLE" ? ((n.imgsource === "/WebConsole/images/smartFuel/fuelling.gif?a=" + n.SiteLevelNozzleId) ?
                            "/WebConsole/images/smartFuel/Idle.gif?a=" + n.SiteLevelNozzleId : "/WebConsole/images/smartFuel/idleStatic.png") :
                            "/WebConsole/images/smartFuel/fuelling.gif?a=" + n.SiteLevelNozzleId;
                        n.FuelingState = jsonObj.FuelingState;
                        n.HealthState = jsonObj.HealthState;
                        if (jsonObj.FuelingState === "IDLE" && n.currentIndex === 0)
                            setTimeout(GetVRBoardNozzleTrxFlowDatas, 2, jsonObj.SiteLevelNozzleId, 0);
                    }
                })
                
            }
        } else if (apis.size > 0 && apis.has("OnVaporRecoveryDataCollectorBoardStateChange") && topic === apis.get("OnVaporRecoveryDataCollectorBoardStateChange")) {
            if (vm_config.Nozzles.length > 0 && jsonObj !== null) {
                if (jsonObj.State === "UnInit") {
                    jsonObj.Nozzles.forEach(function (bn) {
                        var tempNozzle = vm_config.Nozzles.find(n => n.SiteLevelNozzleId === bn.SiteLevelNozzleId);
                        if (tempNozzle !== undefined)
                            tempNozzle.imgsource = "/WebConsole/images/smartFuel/disconnect.png";
                    });
                } else if (jsonObj.State === "Initialized") {
                    jsonObj.Nozzles.forEach(function (bn) {
                        var tempNozzle = vm_config.Nozzles.find(n => n.SiteLevelNozzleId === bn.SiteLevelNozzleId);
                        //tempNozzle.imgsource = "/WebConsole/images/smartFuel/disconnect.png";
                        if (tempNozzle !== undefined && tempNozzle.imgsource === "/WebConsole/images/smartFuel/disconnect.png")
                            tempNozzle.imgsource = "/WebConsole/images/smartFuel/idleStatic.png";
                    });
                }
            }
        } else if (apis.size > 0 && apis.has("GetVRBoardNozzleTrxFlowDatas_Reply") && topic === apis.get("GetVRBoardNozzleTrxFlowDatas_Reply")) {
            console.log("GetVRBoardNozzleTrxFlowDatas_Reply");
            if (jsonObj !== null && vm_config.Nozzles.length > 0) {
                vm_config.Nozzles.forEach(function (n) {
                    if (jsonObj.length > 0 && n.SiteLevelNozzleId === jsonObj[0].SiteLevelNozzleId) {
                        n.VaporVolumeWithDecimal = jsonObj[0].VaporVolumeWithDecimal;
                        n.LiquidVolumeWithDecimal = jsonObj[0].LiquidVolumeWithDecimal;
                        n.VaporLiquidRatio = jsonObj[0].VaporLiquidRatio;
                        n.ALIsNormal = jsonObj[0].气液比值是否正常;
                        let timeString = jsonObj[0].FuellingEndTime;
                        n.ALIsNormalTimeStamp = Pad1(new Date(timeString).getHours(), 2) +
                            ":" + Pad1(new Date(timeString).getMinutes(), 2) + ":" + Pad1(new Date(timeString).getSeconds(), 2);

                        n.VaporVolumeWithDecimalHistory = jsonObj.length === 2 ? jsonObj[1].VaporVolumeWithDecimal : null;
                        n.LiquidVolumeWithDecimalHistory = jsonObj.length === 2 ? jsonObj[1].LiquidVolumeWithDecimal : null;
                        n.VaporLiquidRatioHistory = jsonObj.length === 2 ? jsonObj[1].VaporLiquidRatio : null;
                        n.ALIsNormalHistory = jsonObj.length === 2 ? jsonObj[1].气液比值是否正常 : null;
                        timeString = jsonObj.length === 2 ? jsonObj[1].FuellingEndTime : "";
                        n.ALIsNormalTimeStampHistory = jsonObj.length === 2 ? Pad1(new Date(timeString).getHours(), 2) +
                            ":" + Pad1(new Date(timeString).getMinutes(), 2) + ":" + Pad1(new Date(timeString).getSeconds(), 2) : null;
                    }
                })
            }
        }
    }
    //In ascending order of site level nozzle Id
    function sortBySiteLevelNozzleId(n1, n2) {
        if (n1.SiteLevelNozzleId < n2.SiteLevelNozzleId)
            return -1;
        else
            return 1;
    }
    function ALNozzlesSubscribeEvents() {
        console.log("subsribe ALNozzlesSubscribeEvents");
        if (!mqttclient.connected || apis.size === 0) {
            console.log("ALNozzlesSubscribeEvents:client is not connected or haven't got APIS");
            return;
        }
        if (apis.has("GetVRBoardNozzles_Reply")) {
            mqttclient.subscribe(apis.get("GetVRBoardNozzles_Reply"), function (err) {
                if (!err) {
                    mqttclient.publish(apis.get("GetVRBoardNozzles"));
                }
            });
        }
        if (apis.has("OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead")) {
            mqttclient.subscribe(apis.get("OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead"), function (err) {
                if (!err) {
                    console.log("subscribe OnVaporRecoveryDataCollectorBoardNozzleFlowDataRead successfully");
                }
            });
        }
        if (apis.has("OnVaporRecoveryDataCollectorBoardNozzleStateChange")) {
            mqttclient.subscribe(apis.get("OnVaporRecoveryDataCollectorBoardNozzleStateChange"), function (err) {
                if (!err) {
                    console.log("subscribe OnVaporRecoveryDataCollectorBoardNozzleStateChange successfully");
                }
            });
        }
        if (apis.has("OnVaporRecoveryDataCollectorBoardStateChange")) {
            mqttclient.subscribe(apis.get("OnVaporRecoveryDataCollectorBoardStateChange"), function (err) {
                if (!err) {
                    console.log("subscribe OnVaporRecoveryDataCollectorBoardStateChange successfully");
                }
            });
        }
    }
    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() + "%";
                nextPageImg.style.visibility = "visible";
                //nextPageImg.style.visibility = (totalPage === 1 || currentPage === totalPage) ? "hidden" : "visible";
            }
        }
    }
    //显示前一页
    function ShowPreviousPage() {
        console.log("ShowPreviousPage");
        if (currentPage === 1) {
            //alert("已经是第一页！");
            dialogBox("提示信息", "已經是第一頁",null,null);
            return;
        }
        currentPage--;
        if (apis.has("GetVRBoardNozzles_Reply")) {
            mqttclient.subscribe(apis.get("GetVRBoardNozzles_Reply"), function (err) {
                if (!err) {
                    mqttclient.publish(apis.get("GetVRBoardNozzles"));
                }
            });
        }
    }
    //显示下一页
    function ShowNextPage() {
        console.log("ShowNextPage");
        if (currentPage === totalPage) {
            //alert("已经是最后一页！");
            dialogBox("提示信息", "已經是最後一頁",null,null);
            return;
        }
        currentPage++;
        if (apis.has("GetVRBoardNozzles_Reply")) {
            mqttclient.subscribe(apis.get("GetVRBoardNozzles_Reply"), function (err) {
                if (!err) {
                    mqttclient.publish(apis.get("GetVRBoardNozzles"));
                }
            });
        }
    }
    function DisplayConfigForm(nozzle) {
        if (nozzle === null || nozzle === undefined)
            return;
        if (vm_config.showConfigForm) {
            vm_config.showConfigForm = false;
            return;
        }
        this.ReadBoardNozzleInitParameters(nozzle.SiteLevelNozzleId, (data) => {
            vm_config.advancedSettings.SiteLevelNozzleId = nozzle.SiteLevelNozzleId;
            vm_config.advancedSettings.BoardInitParameterConfigV1.最大未变化次数 = nozzle.advancedSettings.BoardInitParameterConfigV1.最大未变化次数 = data === null ? "?" : data.最大未变化次数;
            vm_config.advancedSettings.BoardInitParameterConfigV1.开始加油阀值 = nozzle.advancedSettings.BoardInitParameterConfigV1.开始加油阀值 = data === null ? "?" : data.开始加油阀值;
            vm_config.advancedSettings.BoardInitParameterConfigV1.停止加油阀值 = nozzle.advancedSettings.BoardInitParameterConfigV1.停止加油阀值 = data === null ? "?" : data.停止加油阀值;
            vm_config.advancedSettings.BoardInitParameterConfigV1.最小加油量 = nozzle.advancedSettings.BoardInitParameterConfigV1.最小加油量 = data === null ? "?" : data.最小加油量;
            vm_config.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量 = nozzle.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量 = data === null ? "?" : data.加油脉冲当量;
            vm_config.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = nozzle.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = data === null ? "?" : data.油气脉冲当量;
            vm_config.advancedSettings.BoardInitParameterConfigV1.气液比值 = nozzle.advancedSettings.BoardInitParameterConfigV1.气液比值 = data === null ? "?" : data.气液比值;
            nozzle.normalSettings.currentConefficientValue = data === null ? "?" : data.油气脉冲当量;
            vm_config.showConfigForm = !vm_config.showConfigForm && data !== null;
            if (vm_config.showConfigForm) {
                vm_config.normalSettings.SiteLevelNozzleId = nozzle.SiteLevelNozzleId;
                vm_config.normalSettings.LatestTrxFlowData = nozzle.LatestTrxFlowData;
                vm_config.normalSettings.currentReadingValue = nozzle.LatestTrxFlowData.VaporVolumeWithDecimal;
                //vm_config.advancedSettings = Object.assign({}, nozzle.advancedSettings);//nozzle.advancedSettings;
                vm_config.normalSettings.currentConefficientValue = nozzle.normalSettings.currentConefficientValue;
            }
        })
    }
    function WriteBoardNozzleInitParameters() {
        console.log("WriteBoardNozzleInitParameters");
        /*alert("Your details were Submitted");*/
        var urlInfos = apis.get("WriteAndPersistVrBoardNozzleInitParameters").split("/");
        var pn = urlInfos[2];
        var providerType = urlInfos[1];

        var tempUrl = basicUrl + "/u/?apitype=service&an=WriteAndPersistVrBoardNozzleInitParameters&pn=" + pn + "&en=" + providerType;
        var parameters = {
            "最大未变化次数": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.最大未变化次数),
            "开始加油阀值": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.开始加油阀值),
            "停止加油阀值": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.停止加油阀值),
            "最小加油量": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.最小加油量),
            "加油脉冲当量": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量),
            "油气脉冲当量": parseInt(vm_config.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量),
            "气液比值": parseFloat(vm_config.advancedSettings.BoardInitParameterConfigV1.气液比值)
        };
        //let currentNozzleId = vm_config.advancedSettings.SiteLevelNozzleId;
        var singleNozzleId = new Array();
        singleNozzleId.push(vm_config.advancedSettings.SiteLevelNozzleId);
        var nozzlesList = vm_config.submitType === 1 ? vm_config.siteLevelIds : singleNozzleId;
        WriteParameters(tempUrl,nozzlesList, 0, parameters, "", "");
        //nozzlesList.forEach(function (id, index) {
        //    var requestData = new Array();
        //    requestData.push(id);
        //    requestData.push(parameters);

        //    $.ajax({
        //        url: tempUrl,
        //        datatype: "application/json",
        //        type: 'post',
        //        contentType: "application/json;charset=utf-8;",
        //        data: JSON.stringify(requestData),
        //        beforeSend: function () {
        //        },
        //        success: function (data) {
        //            if (data)
        //                successNozzleIds = successNozzleIds === "" ? id : successNozzleIds+"," + id;
        //            else
        //                errNozzleIds = errNozzleIds === "" ? id : errNozzleIds+"," + id;
        //            if (index === nozzleLength - 1) {
        //                var promptMsg = errNozzleIds + "號槍設置失敗" + successNozzleIds === "" ? "" : " " + successNozzleIds + "號槍設置成功"
        //                dialogBox("提示信息", promptMsg, null, null);
        //            }
        //            if (data) {
        //                ReadBoardNozzleInitParameters(id, (data) => {
        //                    vm_config.Nozzles.forEach(function (n) {
        //                        if (n.SiteLevelNozzleId === id) {
        //                            n.advancedSettings.BoardInitParameterConfigV1.最大未变化次数 = data===null?"?" : data.最大未变化次数;
        //                            n.advancedSettings.BoardInitParameterConfigV1.开始加油阀值 = data === null ? "?" :data.开始加油阀值;
        //                            n.advancedSettings.BoardInitParameterConfigV1.停止加油阀值 = data === null ? "?" :data.停止加油阀值;
        //                            n.advancedSettings.BoardInitParameterConfigV1.最小加油量 = data === null ? "?" :data.最小加油量;
        //                            n.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量 = data === null ? "?" :data.加油脉冲当量;
        //                            n.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = data === null ? "?" :data.油气脉冲当量;
        //                            n.advancedSettings.BoardInitParameterConfigV1.气液比值 = data === null ? "?" :data.气液比值;
        //                            n.normalSettings.currentConefficientValue = data === null ? "?" :data.油气脉冲当量;
        //                        }
        //                    });
        //                });
        //            }
        //        },
        //        error: function (err) {
        //            errNozzleIds = errNozzleIds === "" ? id : errNozzleIds+"," + id;
        //            if (index === nozzleLength - 1) {
        //                var promptMsg = errNozzleIds + "號槍設置失敗" + successNozzleIds === "" ? "" : " "+successNozzleIds +"號槍設置成功"
        //                dialogBox("提示信息", promptMsg, null, null);
        //            }
        //        }
        //    });
        //});
        return false;
    }
    function WriteParameters(url,nozzleIds, index, parameters, errMsg, successMsg) {
        if (!(nozzleIds.length > 0) || nozzleIds.length < index + 1) return;
        var requestData = new Array();
        requestData.push(nozzleIds[index]);
        requestData.push(parameters);
        var nozzleLength = nozzleIds.length;
        $.ajax({
            url: url,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                if (data)
                    successMsg = successMsg === "" ? nozzleIds[index] : successMsg + "，" + nozzleIds[index];
                else
                    errMsg = errMsg === "" ? nozzleIds[index] : errMsg + "，" + nozzleIds[index];
                if (index === nozzleLength - 1) {
                    var promptMsg = (errMsg === "" ? "" : (errMsg + "號槍設置失敗")) + (successMsg === "" ? "" : " " + (successMsg + "號槍設置成功"));
                    dialogBox("提示信息", promptMsg, null, null);
                }
                if (data) {
                    ReadBoardNozzleInitParameters(nozzleIds[index], (data) => {
                        vm_config.Nozzles.forEach(function (n) {
                            if (n.SiteLevelNozzleId === nozzleIds[index]) {
                                n.advancedSettings.BoardInitParameterConfigV1.最大未变化次数 = data === null ? "?" : data.最大未变化次数;
                                n.advancedSettings.BoardInitParameterConfigV1.开始加油阀值 = data === null ? "?" : data.开始加油阀值;
                                n.advancedSettings.BoardInitParameterConfigV1.停止加油阀值 = data === null ? "?" : data.停止加油阀值;
                                n.advancedSettings.BoardInitParameterConfigV1.最小加油量 = data === null ? "?" : data.最小加油量;
                                n.advancedSettings.BoardInitParameterConfigV1.加油脉冲当量 = data === null ? "?" : data.加油脉冲当量;
                                n.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = data === null ? "?" : data.油气脉冲当量;
                                n.advancedSettings.BoardInitParameterConfigV1.气液比值 = data === null ? "?" : data.气液比值;
                                n.normalSettings.currentConefficientValue = data === null ? "?" : data.油气脉冲当量;
                            }
                        });
                    });
                }
                index += 1;
                if (index < nozzleLength) {
                    WriteParameters(url,nozzleIds, index, parameters, errMsg, successMsg);
                }
            },
            error: function (err) {
                errMsg = errMsg === "" ? nozzleIds[index] : errMsg + "，" + nozzleIds[index];
                if (index === nozzleLength - 1) {
                    var promptMsg = (errMsg === "" ? "" : (errMsg + "號槍設置失敗")) + (successMsg === "" ? "" : " " + (successMsg + "號槍設置成功"));
                    dialogBox("提示信息", promptMsg, null, null);
                    return;
                }
                index += 1;
                if (index < nozzleLength) {
                    WriteParameters(url,nozzleIds, index, parameters, errMsg, successMsg);
                }
            }
        });
    }
    function ReadBoardNozzleInitParameters(siteLevelNozzleId,callback=null) {
        //vm_config.advancedSettings.SiteLevelNozzleId = siteLevelNozzleId;
        var urlInfos = apis.get("ReadVrBoardNozzleInitParameters").split("/");
        var pn = urlInfos[2];
        var providerType = urlInfos[1];
        var tempUrl = basicUrl + "/u/?apitype=service&an=ReadVrBoardNozzleInitParameters&pn=" + pn + "&en=" + providerType;
        var requestData = new Array();
        requestData.push(siteLevelNozzleId);
        $.ajax({
            url: tempUrl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                if (callback !== null) callback(data);
            },
            error: function (err) {
                if (callback !== null) callback(null);
                dialogBox("提示信息", siteLevelNozzleId+"號槍參數讀取失敗", null,null);
            }
        });
    }
    function calibrateBoardNozzleInitParameter(submitMode) {
        let validNumber = isNaN(vm_config.normalSettings.standardReadingValue);
        if (vm_config === undefined || vm_config.normalSettings.standardReadingValue === null ||
            vm_config.normalSettings.standardReadingValue === "" || isNaN(vm_config.normalSettings.standardReadingValue)) {
            dialogBox("提示信息", "請輸入有效的‘標準測定氣體體積’", null, null);
            return;
        }
        setSubmitMode(submitMode);
        var urlInfos = apis.get("CaculateVrBoardNozzleInitParameterCalibrationValue").split("/");
        var pn = urlInfos[2];
        var providerType = urlInfos[1];
        var tempUrl = basicUrl + "/u/?apitype=service&an=CaculateVrBoardNozzleInitParameterCalibrationValue&pn=" + pn + "&en=" + providerType;
        var requestData = new Array();
        requestData.push("油气脉冲当量");
        requestData.push(vm_config.normalSettings.currentConefficientValue);
        requestData.push(vm_config.normalSettings.currentReadingValue);
        requestData.push(parseFloat(parseFloat(vm_config.normalSettings.standardReadingValue).toFixed(2)));
        $.ajax({
            url: tempUrl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                dialogBox("提示信息", "發送成功", null, null);
                vm_config.advancedSettings.BoardInitParameterConfigV1.油气脉冲当量 = parseInt(data);
                WriteBoardNozzleInitParameters();
            },
            error: function (err) {
                dialogBox("提示信息", "發送失敗", null, null);
            }
        });
    }
    function setSubmitMode(submitMode) {
        if (vm_config) {
            vm_config.submitType = submitMode;
        }
    }
    function modeChage(m) {
        vm_config.mode = m;
    }

    function GetVRBoardNozzleTrxFlowDatas(siteLevelNozzleId,page) {
        let path = '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/';
        let arg = '[' + 'null,null,'; 
       
        let arg2 = ','+page+',2,"","",""]';
        if (siteLevelNozzleId === "") {
            if (vm_config.Nozzles && vm_config.Nozzles.length > 0) {
                vm_config.Nozzles.forEach(function (n) {
                    arg = arg + n.SiteLevelNozzleId + arg2;
                    console.log("publish2--GetVRBoardNozzleTrxFlowDatas-each:" + n.SiteLevelNozzleId);
                    Publish2(arg, path, "GetVRBoardNozzleTrxFlowDatas");
                })
            }
        } else {
            arg = arg + siteLevelNozzleId + arg2;
            console.log("publish2-GetVRBoardNozzleTrxFlowDatas:" + siteLevelNozzleId + "currentIndex:" + page);
            Publish2(arg, path, "GetVRBoardNozzleTrxFlowDatas");
        }    
    }
    function NextHistory(n) {
        if (n=== null || n.currentIndex === 0 || n.currentIndex < 0) {
            dialogBox("提示信息", "己經是最新記錄", null, null);
            return;
        }
        n.currentIndex = n.currentIndex - 1;
        GetVRBoardNozzleTrxFlowDatas(n.SiteLevelNozzleId, n.currentIndex)
    }
    function PreHistory(n) {
        if (n === null || n.VaporVolumeWithDecimalHistory === null) {
            dialogBox("提示信息", "沒有更多記錄了", null, null);
            return;
        }
        n.currentIndex = n.currentIndex + 1;
        GetVRBoardNozzleTrxFlowDatas(n.SiteLevelNozzleId, n.currentIndex)
    }
</script>
<style scoped>
    .HealthState {
        position: absolute;
        right: 2%;
        bottom: 4%;
        width: 20%;
        height: 25%;
    }

    .FuelingState {
        position: absolute;
        top: 20%;
        left: 0%;
        width: 100%;
        height: 80%;
    }

    .NozzleId {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 15%;
        text-align: left;
        font-size: 1.375rem;
        font-weight: bold;
        /*border: 1px solid#ff0000*/
    }

    .NozzleDiv {
        position: relative;
        float: left;
        margin: 1%;
        width: 14.66%;
        height: 48%;
        /*border: 1px solid#ff0000;*/
    }

    .ALLable {
        position: relative;
        float: left;
        /*width: 15%;*/
        /*margin-left: 12%;*/
        width: 100%;
        height: 15%;
        text-align: right;
        font-size: 1.0rem;
        font-weight: bold;
        color: orange;
        padding-right: 14%;
        /*border: 1px solid#ff0000;*/
    }

    .ALLableData {
        position: relative;
        float: left;
        /*width: 85%;*/
        width: 100%;
        height: 15%;
        text-align: right;
        font-size: 1.0rem;
        font-weight: bold;
        padding-right: 14%;
        /*color:#808080;*/
        /* border: 1px solid#ff0000;*/
    }

    .ALDatas {
        position: relative;
        width: 50%;
        height:60%;
        float:left;
        /*height: 15%;*/
        /*border: 1px solid#ff0000;*/
    }
    .topALDatas{
        position:relative;
        width:100%;
        height:40%;
        padding-left:10%;
        /*border:1px solid #b6ff00*/
    }
    .topALTrans {
        position: relative;
        float:left;
        width: 26%;
        padding: 1%;
        height: 100%;
       /* border: 1px solid #00ffff;*/
    }
    .topALTransBolderRight{
        /*border-right:1px solid grey;*/
        margin-right:10%;
    }
    .topAL {
        position: relative;
        width: 100%;
        height: 25%;
        font-size: 0.9rem;
        text-align:right;
        /*border:1px solid red;*/
    }
    .topALLabel {
        position: relative;
        float: left;
        width: 100%;
        height: 25%;
        text-align: left;
        padding-left: 10%;
        color: orange;
        /*border: 1px solid red;*/
    }
    .toplabels {
        /*position:relative;
        float:left;
        height:100%;
        width:20%;
        font-size:0.9rem;*/
        /*border:1px solid red;*/
        position: absolute;
        left:0.5%;
        top:3%;
        height: 19.2%;
        width: 2.892%;
        font-size: 0.9rem;
    }
    .topALLabelData {
        position: relative;
        float: left;
        /*width: 85%;*/
        width: 100%;
        height: 100%;
        text-align: right;
    }
    .historyIcon {
        position: relative;
        float: left;
        width: 11%;
        margin-top: 8%;
        height: 75%;
        text-align: center;
        font-size: 2rem;
        font-weight: bolder;
        /*border: 1px solid deeppink;*/
    }
    .settingsBox {
        position: absolute;
        right: 0%;
        top: 0%;
        height: 100%;
        width: 17%;
        background-image: url("/WebConsole/images/onlineMonitor/chartView/background_query.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
    .settingsBody{
        width:100%;
        height:95%;
    }
    .modeDiv{
        width:100%;
        height:5%;
    }
    .modeButton{
        position:relative;
        display:flex;
        float:left;
        width:50%;
        height:100%;
        border:none;
        text-align:center;
        background-color:transparent;
    }
    .modeButtonActive {
        position: relative;
        display: flex;
        float: left;
        width: 50%;
        height: 100%;
        text-align: center;
        border: none;
        background-color:lightskyblue;
    }
    .modeSettingsLabel{
        position:relative;
        width:100%;
        height:10%;
        padding:1%;
        /*margin-left:2%;*/
        margin-bottom:4%;
        font-size:1rem;
        font-weight:bold;
    }
    .modeSettingsLabel-trans {
        position: relative;
        width: 100%;
        height: 10%;
        padding:0% 5% 0% 12%;
        /*margin-left:2%;*/
        margin-bottom: 4%;
        font-size: 1rem;
    }
    input {
        outline-color: #66afe9;
        border-radius: 3px;
        border-color: #ccc;
    }
    .inputPoistion{
       position:absolute;
       width:48%;
       right:5%;
       height:100%;
       padding:1%;
    }

    .inputButton {
        outline: 0;
        border-color: #66afe9;
        margin-bottom:6%;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }
    .submitButtonPosition{
        position:absolute;
        width:98%;
        margin:2%;
        height:15%;
        bottom:5%;
        text-align:center;
    }
</style>